Foros del Web » Programando para Internet » ASPX (.net) »

[SOLUCIONADO] Crear columnas "adaptables"

Estas en el tema de Crear columnas "adaptables" en el foro de ASPX (.net) en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/11/2014, 12:47
 
Fecha de Ingreso: julio-2014
Mensajes: 12
Antigüedad: 10 años, 4 meses
Puntos: 0
Crear columnas "adaptables"

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
  #2 (permalink)  
Antiguo 14/11/2014, 11:06
Avatar de Drako_18  
Fecha de Ingreso: mayo-2005
Ubicación: Madrid
Mensajes: 505
Antigüedad: 19 años, 7 meses
Puntos: 16
Respuesta: Crear columnas "adaptables"

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 :)
__________________
Rubén Espada
Desarrollador full stack .Net (Angular + JS + .Net Core)
  #3 (permalink)  
Antiguo 14/11/2014, 15:24
 
Fecha de Ingreso: julio-2014
Mensajes: 12
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Crear columnas "adaptables"

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:
  #4 (permalink)  
Antiguo 14/11/2014, 16:17
Avatar de Drako_18  
Fecha de Ingreso: mayo-2005
Ubicación: Madrid
Mensajes: 505
Antigüedad: 19 años, 7 meses
Puntos: 16
Respuesta: Crear columnas "adaptables"

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!
__________________
Rubén Espada
Desarrollador full stack .Net (Angular + JS + .Net Core)
  #5 (permalink)  
Antiguo 15/11/2014, 12:47
Avatar de Drako_18  
Fecha de Ingreso: mayo-2005
Ubicación: Madrid
Mensajes: 505
Antigüedad: 19 años, 7 meses
Puntos: 16
Exclamación Respuesta: Crear columnas "adaptables"

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>
__________________
Rubén Espada
Desarrollador full stack .Net (Angular + JS + .Net Core)

Última edición por Drako_18; 15/11/2014 a las 12:48 Razón: Corrección ortográfica.
  #6 (permalink)  
Antiguo 06/02/2015, 13:28
 
Fecha de Ingreso: julio-2014
Mensajes: 12
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Crear columnas "adaptables"

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.

Etiquetas: aspx, csharp
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:32.