Help in constructing html inside repeater with vertical scroll bar

View Complete Thread

Shortcuts

Related Links

Eric Du

Contributor

6730 Points

2715 Posts

Re: Help in constructing html inside repeater with vertical scroll bar

Dec 28, 2016 08:55 AM|Eric Du|LINK

Hi suvo,

According to your description, I make a sample use div and class, it show the result like table, here is the sample code, but I am not clear why not use table, I think it is more easy than use div combine with CSS.

<head runat="server">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #Box {
            height: 120px;
            width: 450px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .SmallBox {
            height: 120px;
            width: 32.85%;
            border: 1px solid blue;
            float: left;
        }

        .Second {
            float:left;
            margin-left:40px;
            margin-top:10px;
        }

        .Third {
            float: left;
            margin-left: 40px;
            margin-top: 50px;
        }
        .Fourth {
            float:left;
        margin-left:60px;
        margin-top:55px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div id="Box">
                        <div class="SmallBox">
                            <asp:Image ID="Image1" runat="server" ImageUrl="SmallImage.jpg" />
                        </div>
                        <div class="SmallBox">
                            <asp:Label ID="Label2" runat="server" Text='<%# Eval("Productname") %>' CssClass="Second"></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text='<%# Eval("Amount") %>' CssClass="Third"></asp:Label>
                        </div>
                        <div class="SmallBox">
                            <asp:Label ID="Label4" runat="server" Text='<%# Eval("Price") %>' CssClass="Fourth"></asp:Label>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>

Code Behind:
 protected void Page_Load(object sender, EventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("Productname", typeof(string));
            table.Columns.Add("Amount", typeof(int));
            table.Columns.Add("Price", typeof(string));

            // Here we add five DataRows.
            table.Rows.Add("Computer1", 3020,"$3232");
            table.Rows.Add("Computer4", 3000, "$3232");
            table.Rows.Add("Computer43", 3030, "$3332");
            table.Rows.Add("Computer1", 3040, "$3232");
            table.Rows.Add("Computer5", 3000, "$3232");
            table.Rows.Add("Computer1", 3000, "$3232");
            Repeater1.DataSource = table;
            Repeater1.DataBind();
        }

Result:

I am not sure where you want to use scroll bar, I make a sample about how to use vertical scroll bar in div, you could try to add it through your needs.

 <div style="overflow:auto; width:100px;height:100px;">
                here is some text<br/><br/><br/><br/><br/><br/><br/><br/>
                here is some text
            </div>

If this reply can not solve your problem, please le me know.

Best Regards,

Eric Du

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.