Comment le style de commandes du panneau imbriqués dans ASP.NET

Question

J'ai un panneau assis dans une div, et je veux utiliser ce panneau comme un conteneur pour ajouter d'autres 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 de l'image et l'étiquette.

Le panneau de conteneur principal existant est créé au cours de la conception, et passe le beau nom de « toolboxpanel ». Au cours de l'exécution, j'ai un pour / boucle 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 ajouter au panneau se fait fourrer dans une colonne et viole totalement les règles du css toolboxpanel qui indiquent que la hauteur maximum est seulement 700px. Il semble étirer le panneau, et la div sa séance en, à façon plus que son supposé être!

Mes principales questions sont:

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

2) Y at-il une meilleure façon de le faire? 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! Le projet de loi

Answer 1

Vous avez besoin de deux choses:

1. clearfix stylesheet
2. Pour faire flotter vos panneaux intérieurs

flottant est simple mais peut parfois être un peu intimidant au début. Lire ces tutoriels sur flotteurs pour tout savoir sur eux.

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

float: left;

Floating fera automatiquement le div, et tout son contenu, aussi étroite que possible, alors assurez-vous de spécifier une largeur , que vous avez déjà.

Ensuite, vous aurez besoin d'appliquer le style clearfix à votre panneau extérieur de sorte que tout le contenu flottant à l'intérieur, il ne souffre pas de « l'effet guillotine ». Parce que les blocs flottants ne pas « mise en page », ils ne font pas partie du flux normal du document, et par conséquent, sont ignorés par leurs conteneurs parents. Le clearfix résout ce problème en forçant le conteneur à reconnaître flotteurs comme ayant la mise en page.

Answer 2

Les panneaux doivent généralement, mais pas toujours, comme rendre des balises div, les ID se foireuse par le conteneur de dénomination, donc plus facile d'ajouter un attribut CssClass .. l'ensemble de votre css en conséquence.

Si vous voulez overfow pour permettre le défilement, vous voulez que votre positionnement et la hauteur fixé pour permettre cela.

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

devrait le faire. :)