Come per lo stile controlli del pannello nidificati in ASP.NET

Question

Ho un pannello di seduta in un div, e voglio usare quel pannello come contenitore per aggiungere più pannelli! Perché dovrei voler aggiungere un pannello a un pannello? Poiché il pannello che sto aggiungendo al pannello esistente, è fatta anche per contenere gli oggetti, ma solo e l'immagine e l'etichetta.

Il pannello master contenitore esistente viene creato durante la fase di progettazione, e va sotto il bel nome di "toolboxpanel". Durante la fase di esecuzione, ho una per / prossimo ciclo che crea dinamicamente un'immagine, un'etichetta, entrambi aggiunge a un pannello, poi aggiunge che pannello alla toolboxpanel, come si può vedere qui:

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

Il problema è che ogni pannello aggiungo al pannello viene farcito in 1 colonna e viola totalmente le regole CSS del toolboxpanel che dicono l'altezza massima è solo 700px. Sembra di allungare il pannello, e il div la sua seduta in, a modo superiore al dovuto essere!

Le mie domande principali sono:

1) Come faccio a farlo così posso aggiungere oggetti del pannello (con le mie budella image / etichetta) al pannello principale in un modo in cui verrà visualizzato con 3 colonne, altezza fissa visibile, e la barra di scorrimento in ordine?

2) C'è un modo migliore di fare questo? Ci deve essere: (

È possibile visualizzare l'attuale caos sulla homepage di: http://www.mobiuspc.com

Apprezzo tutto l'aiuto! Bill

Answer 1

Hai bisogno di due cose:

1. clearfix foglio di stile
2. Per galleggiare i pannelli interni

galleggiante è semplice, ma a volte può essere un po 'scoraggiante in un primo momento. Leggere questi tutorial su carri per imparare tutto su di loro.

In sostanza, tutto quello che dovete fare è aggiungere il seguente stile per gli stili i pannelli interiori:

float: left;

Floating farà automaticamente il div, e tutti i suoi contenuti, più stretta possibile, in modo da essere sicuri di specificare una larghezza , come già avete.

Avanti è necessario applicare lo stile clearfix al vostro pannello esterno in modo che tutti i contenuti galleggianti al suo interno non soffrono l'effetto "ghigliottina". Poiché i blocchi galleggianti non hanno "layout", non sono parte del normale flusso dei documenti e, quindi, vengono ignorati dai loro contenitori padre. Il clearfix risolve questo forzando il contenitore di riconoscere galleggianti come aventi la layout.

Answer 2

I pannelli dovrebbero solito, ma non sempre, rendere i tag div come, gli ID vengono borked dal contenitore di denominazione, in modo più semplice per aggiungere un attributo CssClass .. il impostare il CSS di conseguenza.

Se si desidera overfow per consentire per lo scorrimento, si vorrà il vostro posizionamento e l'altezza impostata per consentire per questo.

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

dovrebbe farlo. :)