Cómo el estilo de los controles del panel anidadas en ASP.NET

Question

Tengo un panel sentado en un div, y yo quiero usar ese panel como un contenedor para añadir más paneles! ¿Por qué querría añadir un panel a un panel? Debido a que el panel que estoy añadiendo al panel existente, también se hace para contener objetos, sino única y la imagen y etiqueta.

Panel de contenedor maestra existente se crea durante el tiempo de diseño, y se conoce con el nombre de preciosa "toolboxpanel". Durante el tiempo de ejecución, tengo una para el siguiente bucle / que crea dinámicamente una imagen, una etiqueta, los dos se suma a un panel, a continuación, añade que el panel a la toolboxpanel, como se puede ver aquí:

For i = 0 To imageholder.Count - 1 'create a control
        insertpanel = New Panel 'these object types have been DIM'd up above
        insertimage = New Image
        inserttext = New Label
        inserttext.ID = "text" + partnumberholder(i) + i.ToString 'the "holder" arrays hold the goodies from my db
        inserttext.Text = brandholder(i) + " " + partnumberholder(i)
        insertimage.ID = "image" + partnumberholder(i) + i.ToString
        insertimage.ImageUrl = ".\Images\Display\" + imageholder(i) + ".jpg"
        insertpanel.CssClass = "drag" 'this allows the panel to be dragged around using a JQuery script elsewhere
        'insertpanel.BackImageUrl = "~\Images\Display\" + imageholder(i) + ".jpg" 'commented out because this method looks awful
        insertpanel.ID = "panel" + partnumberholder(i) + i.ToString

        insertpanel.Controls.Add(insertimage)
        insertpanel.Controls.Add(inserttext)
        toolboxpanel.Controls.Add(insertpanel)
    Next

El problema es que cada panel agrego que el panel se rellena en la columna 1 y viola totalmente las reglas CSS de la toolboxpanel que dicen que la altura máxima es de solamente 700 px. Parece que estirar el panel y el div sentado en su, a mucho más alto que su supone que es!

Mis principales preguntas son:

1) ¿Cómo llego, así que puede añadir objetos del panel (con las tripas imagen / etiqueta) al panel principal de una manera en la que se mostrará con 3 columnas, altura fija visible, y barra de desplazamiento ordenado?

2) ¿Hay una mejor manera de hacer esto? Tiene que ser: (

Puede ver el caos actual en la página principal de: http://www.mobiuspc.com

Agradezco cualquier ayuda! Bill

Answer 1

Se necesitan dos cosas:

1. A clearfix hoja de estilo
2. Para hacer flotar sus paneles interiores

flotante es simple, pero a veces puede ser un poco intimidante al principio. Lea estos tutoriales en los flotadores para aprender todo sobre ellos.

En esencia, todo lo que tiene que hacer es añadir el siguiente estilo a sus estilos paneles interiores:

float: left;

flotante hará automáticamente el div, y todo su contenido, lo más estrecha posible, así que asegúrese de especificar un ancho , que ya tiene.

A continuación, tendrá que aplicar el estilo clearfix a su panel exterior, de manera que todos los contenidos que flotan en su interior no sufren el "efecto guillotina". Debido a que los bloques flotantes no tienen "diseño", no son parte del flujo de documentos normal, y por lo tanto, son ignorados por sus contenedores primarios. El clearfix resuelve este forzando el contenedor a reconocer flotadores como teniendo diseño.

Answer 2

Los paneles deben por lo general, pero no siempre, hacer etiquetas como div, los ID consiguen borked por el contenedor de nombres, de modo más fácil añadir un atributo CssClass .. al configurar su css en consecuencia.

Si desea overfow Para permitir un desplazamiento, usted quiere que su posicionamiento, y la altura establecida para permitir por ello.

.myContainter {
    position: relative; /* or absolute, or a float */
    height: 700px;
    overflow: auto;
}

debería hacerlo. :)