how to make Responsive DataList asp.net

问题

I have an Asp.net DataList control in my page. It is currently having repeatcolumns set to 4 which will give me 4 columns in each row. But I want to make this responsive and set the value to 1 for smaller screen sizes. Below is my asp.net control:

<asp:DataList runat="server" RepeatDirection="Horizontal" RepeatColumns="4" ID="dd" class="vex-res">

How can I achieve this?

回答1:

You cannot make DataList to be responsive, because it renders as Table.

Instead, you need to use ListView with bootstrap (or some other responsive framework).

<asp:ListView ID="ListView1" runat="server" ...>
    ...
    <ItemTemplate>
        <div class="row">
            <div class="col-md-4"><%# Eval("Name") %></div>
            <div class="col-md-4"><%# Eval("Email") %></div>
            <div class="col-md-4"><%# Eval("Address") %></div>
        </div>
    </ItemTemplate>
</asp:ListView>

回答2:

This Work My Home :

<asp:DataList ID="dlCustomers" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="row">
    <ItemTemplate>
   <%-- <div class="row">--%>
    <div class="col-sm-4"><!--THUMBNAIL#2-->
    <div class="panel-body">
      <span class="label label-warning"><%# Eval("status")%></span>
      <div class="thumbnail label-success">
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/" +Eval("image1").ToString().Trim() %>' Width="150px" Height="150px" />
        <div class="caption"><h4>Rp.<small> <%# Eval("harga")%></small></h4>
          <strong><%# Eval("judul") %></strong>
          <p>
          <small>LT:<strong>  <%# Eval("luastanah")%> m2</strong> </small> <small> LB : <strong>  <%# Eval("luasbangunan")%> m2</strong> </small> 
          <small>Setifikat : <strong><%# Eval("sertifikasi")%></strong> </small> <br />
         <small> Kamar : <strong><%# Eval("kamartidur")%></strong> </small><br />
         <small> Kamar Mandi : <strong><%# Eval("kamarmandi")%></strong> </small>
          </p>
          <a href="#" class="btn btn-success">Lihat Details</a>
        </div>
      </div>
     </div>
     </div> 
      <%--</div>--%>
      </ItemTemplate>
</asp:DataList>

Responsive using bootstrap 3.3.6 ..

回答3:

Coming to this a little late but I found an asp:repeater works well and no additional CSS is required to get the layout repeating horizontally.

    <div class="container">
        <div class="row">
            <asp:Repeater ID="myRepeater" runat="server" DataSourceID="myDataSourceID">
                <ItemTemplate>
                    <div class="col-sm-4">
                        <%# Eval("itemID")%><br />
                        <%# Eval("itmName")%>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>

I realise that this will result in the total columns in one row adding up to more than 12 but as this will just wrap to the line underneath it shouldn't really matter.

Reference: https://stackoverflow.com/questions/23502342/bootstrap-3-grid-does-it-really-matter-how-many-columns-are-in-a-row

回答4:

You can also try setting RepeatLayout="Flow". That will cause your datalist to render as a series of <div> elements, which will behave more responsively.

回答5:

<asp:DataList ID="DataList1" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Name") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Email") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Address") %></div>
            <div class="col-sm-3 col-md-3 col-lg-3"><%# Eval("Phone") %></div>
        </ItemTemplate>
    </asp:DataList>

回答6:

    <asp:DataList ID="uxPosts" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>

            <a id="uxLink" runat="server" class="txt_link">
                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>

                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label1" runat="server"  Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>

                <div class="col-xs-4 col-sm-4 col-md-4  " style="text-align:center;" >
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                </div>
            </a>

        </ItemTemplate>

    </asp:DataList>

回答7:

  <asp:DataList ID="uxPosts" runat="server"  OnItemDataBound="uxPosts_ItemDataBound1" cssClass="row" RepeatLayout="Flow" RepeatDirection="Horizontal">
        <ItemTemplate>
            <a id="uxLink" runat="server" class="txt_link">
                <div class=" col-xs-6 col-sm-4 col-md-3 col-lg-3  " style="text-align:center;" >
                    <div class="pnlborde">
                        <div class="encabezadofondo">
                            <asp:Label ID="Label2" runat="server" Height="38px" width="150px" Text='<%# Eval("Descripcion","{0:d}") %>'></asp:Label>  
                        </div>

                        <br />
                        <asp:Image ID="uxImage" runat="server" width="65%"  Height="90%" align="center" />
                        <br /><br />
                    </div>
                    <br />
                </div>
            </a>
        </ItemTemplate>
    </asp:DataList>

来源：https://stackoverflow.com/questions/22975990/how-to-make-responsive-datalist-asp-net

标签

css

ASP.NET

datalist