Comment faire pour mettre en forme les contrôles de panneau imbriqués dans ASP.NET

Question

J'ai un panneau assis dans un div, et je veux utiliser ce panneau comme un conteneur pour ajouter plus de panneaux! Pourquoi voudrais-je ajouter un panneau à un panneau? Parce que le panneau que j'ajoute au panneau existant, est également fait pour contenir des objets, mais seulement et image et étiquette.

Le panneau de conteneur principal existant est créé pendant la conception et porte le joli nom de "toolboxpanel". Au cours de l'exécution, j'ai une boucle pour/suivante qui crée dynamiquement une image, une étiquette, les ajoute à la fois à un panneau, ajoute ensuite ce panneau à l'toolboxpanel, comme on peut le voir ici:

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 

Le problème est, que chaque panneau que j'ajoute au panneau est bourré dans une colonne et viole totalement les règles css du toolboxpanel qui disent que la hauteur maximum est seulement 700px. Il semble étirer le panneau, et le div dans sa position, plus haut que ce qu'il est supposé être!

Mes principales questions sont:

1) Comment puis-je l'obtenir ainsi je peux ajouter des objets du panneau (avec mes tripes image/étiquette) sur le panneau principal d'une manière où il affiche avec 3 colonnes, fixe hauteur visible, et barre de défilement rangé?

2) Existe-t-il une meilleure façon de procéder? Il doit y avoir :(

Vous pouvez voir le désordre actuel sur la page d'accueil: http://www.mobiuspc.com

Je vous remercie de toute aide Bill

Answer 1

Vous avez besoin de deux choses:

1. A clearfix stylesheet
2. flotter vos panneaux intérieurs

flottante est simple mais peut parfois être un peu intimidant au début. Read these tutorials sur les flotteurs pour tout savoir sur eux.

Essentiellement, tout ce que vous devez faire est d'ajouter le style suivant aux styles de vos panneaux intérieurs:

float: left; 

flottant fera automatiquement le div, et tout son contenu, aussi étroite que possible, alors assurez-vous à spécifiez une largeur, comme vous l'avez déjà fait.

Ensuite, vous devrez appliquer le style clearfix à votre panneau externe afin que tous les contenus flottants à l'intérieur ne souffrent pas de "l'effet guillotine". Comme les blocs flottants n'ont pas de "disposition", ils ne font pas partie du flux de documents normal et, par conséquent, sont ignorés par leurs conteneurs parents. Le clearfix résout cela en forçant le conteneur à reconnaître les flottants comme ayant une disposition.

Answer 2

Les panneaux doivent généralement, mais pas toujours, comme les balises div rendu, les identifiants sont bloqués par le conteneur de nommage, il est donc plus facile d'ajouter un attribut cssclass .. le set votre css en conséquence

Si vous voulez que le sur-défilement permette le défilement, vous aurez besoin de votre positionnement et de la hauteur pour permettre

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

devrait le faire. :)