How to style nested panel controls in ASP.NET

Question

Hello all,

I have a panel sitting in a div, and I want to use that panel as a container to add more panels! Why would I want to add a panel to a panel? Because the panel that I'm adding to the existing panel, is also made to contain objects, but only and image and label.

The existing master container panel is created during design time, and goes by the lovely name of "toolboxpanel". During run time, I have a for/next loop that dynamically creates an image, a label, adds them both to a panel, then adds that panel to the toolboxpanel, as can be seen here:

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

The problem is, that each panel I add to the panel gets stuffed into 1 column and totally violates the css rules of the toolboxpanel that say max height is only 700px. It seems to stretch the panel, and the div its sitting in, to way higher than its supposed to be!

My main questions are:

1) How do I get it so I can add panel objects (with my image/label guts) to the main panel in a way where it will display with 3 columns, fixed viewable height, and tidy scroll bar?

2) Is there a better way of doing this? There has to be :(

You can see the current mess on the homepage of: http://www.mobiuspc.com

I appreciate any help! Bill

Answer 1

Panels should usually, but not always, render as div tags, the IDs get borked by the naming container, so easier to add a cssclass attribute.. the set your css accordingly.

If you want overfow to allow for scrolling, you'll want your positioning, and height set to allow for that.

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

should do it. :)

Answer 2

You need two things:

1. A clearfix stylesheet
2. To float your inner panels

Floating is simple but can sometimes be a bit daunting at first. Read these tutorials on floats to learn all about them.

Essentially, all you need to do is add the following style to your inner panels' styles:

float: left;

Floating will automatically make the div, and all its contents, as narrow as possible, so be sure to specify a width, as you already have.

Next you'll need to apply the clearfix style to your outer panel so that all floating contents inside it don't suffer from the "guillotine effect". Because floating blocks don't have "layout", they're not part of the normal document flow, and therefore, are ignored by their parent containers. The clearfix solves this by forcing the container to recognize floats as having layout.