[SOLUCIONADO] Crear columnas "adaptables"

[resback]

Hola buen día, mi duda es que en la página de la empresa que trabajo es una tienda e-commerce y el listado de productos esta en 4 columnas usando un DataList, el problema viene que el ancho total de la página es de 950px y mi jefe que tiene monitores de 30" y resulución arriba de 2,000 px, por lo tanto tiene demasiado espacio en blanco a los lados, mis conocimientos en ASP.net/C# son básicos por no decir nulos.

Anexo captura del codigo:
http://i.imgur.com/liHl3Yy.jpg

He logrado modificar el ancho total de toda la página mediante CSS y todo funciona perfecto, excepto por los productos que estan en una tabla y en 4 columnas.

Anexo captura del cambio que hice:
http://i.imgur.com/WT2WFxt.jpg

A lo mucho puedo aumentarle el ancho a la div que contiene la tabla pero es feo esa solucion, cuando la ideal seria mostrar productos en mas columnas

Anexo captura del cambio que hice y no me gusta:
http://i.imgur.com/N81gQPr.jpg


echando un vistazo a los archivos ascx veo que esta programado para esas 4 columnas, hay alguna forma de que muestre los productos en divs, o listas, o simplemente en ciertas columas de acuerdo a la resolución?

Y si alguien aunque no me pueda dar la solucion en si, si es posible corregir este problema a futuro con algun otro metodo/solucion ?

Saludos y gracias por adelantado :D

[Drako_18]

Buenos días compañero!

A ver qué te parece esta solución... Es un ejemplo tonto, pero es lo que necesitas...
<style>
div{
display:inline-block;
margin-right:20px;
}

.divPadre{
display:block;
margin:0px;
}

</style>

<div class="divPadre">
<div>div N</div>
<div>div N</div>
<div>div N</div>
<div>div N</div>
<div>div N</div>
<div>div N</div>
</div>

En definitiva, quita que salgan X columnas... Y añade a cada "item" un display:inline-block; con esto consigues que salgan uno al lado del otro, mientras haya espacio, si no hay espacio... pues pasa a más abajo.....
Si necesitas más ayuda avisa y parlamos..! :)


Un saludo compañero!
PD: Esto hubiera ido en el foro de CSS, para la próxima :)

[resback]

Es que el codigo esta asi, las tablas me las inserta automaticamente el codigo ASPx, que ya inserte la captura en mi primer mensaje, quiero quitar esas tablas pero como?




D:

[Drako_18]

Buenas!

Quítale el "RepeatColumns=4"... Y así, te debe crear tantos registros en horizontal como quepan...
Pero lo que te inserta es un <table....> .... </table> ¿? y dentro de este todo el contenido del datalist? Yo tengo un listview, y no me creó una tabla, sino los divs..


Un saludo!

[Drako_18]

Buenas compañero,

Ya tengo la solución a lo que decías... No sabía que los controles DataList generasen una tabla al completo...

Usa el control <asp:ListView> aquí te dejo un pequeño ejemplo..
Te he dejado comentado la parte de paginación, por si fuese de tu interés...
En la parte de arriba, verás un div que tiene como ide "itemPlaceholder" ese elemento es obligatorio... Eso quiere decir, que se cada ItemTemplate sustituirá a ese elemento.
Enlace del control <asp:ListView>.


Espero que te sirva!!

Código:

            <asp:ListView ID="lstDatos" runat="server">
                <LayoutTemplate>
                  <div>
                    <div runat="server" id="itemPlaceholder"></div>
                  </div>
                  <%--<asp:DataPager runat="server" ID="ContactsDataPager" PageSize="3">
                    <Fields>
                      <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowLastPageButton="True"
                        FirstPageText="|&lt;&lt; " LastPageText=" &gt;&gt;|"
                        NextPageText=" &gt; " PreviousPageText=" &lt; " />
                    </Fields>
                  </asp:DataPager>--%>
                </LayoutTemplate>
                <ItemTemplate>
                  <div style="background-color: #f00; display:inline-block; padding:5px;">
                      <asp:LinkButton ID="EditButton" runat="Server" Text="Edit" CommandName="Edit" /><br />
                      <asp:Label ID="FirstNameLabel" runat="Server" Text='FirstName' /><br />
                      <asp:Label ID="LastNameLabel" runat="Server" Text='LastName' />
                  </div>
                </ItemTemplate>
                <EditItemTemplate>
                  <div style="background-color: #ADD8E6; display:inline-block; padding:5px;">
                      <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />&nbsp;
                      <asp:LinkButton ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
                      
                      <asp:TextBox ID="FirstNameTextBox" runat="server" Text='FirstName' 
                        MaxLength="50" />
                      <asp:TextBox ID="LastNameTextBox" runat="server" Text='LastName' 
                        MaxLength="50" />
                  </div>
                </EditItemTemplate>
              </asp:ListView>

[resback]

Hola la solución era simple, en mi controlador DataList había que poner la propiedad: RepeatLayout="Flow", para que generara unicamente contenedores span en lugar de una tabla y td's

Muchas gracias @Drako_18 por el seguimiento de mi problema.