How to Create Nested Control Panel Items in ASP.NET
I have a panel sitting in a div and I want to use that panel as a container to add additional panels! Why do I want to add a panel to a panel? Since the panel I am adding to the existing panel is also meant to contain objects, but only an image and a label.
The existing master container panel is created at design time and is named "toolbars". At runtime, I have a for / next loop that dynamically creates an image, a label, adds them both to a panel, and then adds that panel to the toolbar, 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 every panel I add to the panel fills in 1 column and completely violates the toolbar css rules that say the maximum height is only 700px. It seems to stretch the panel, and the div sits there, to a level higher than intended!
My main questions:
1) How can I get it so that I can add pane objects (with my images / labels) to the main pane in such a way that it appears with three columns, a fixed visible height, and a neat scrollbar?
2) Is there a better way to do this? Should be :(
You can see the current mess on the home page: http://www.mobiuspc.com
I appreciate any help! Bill
a source to share
You need two things:
- A clearfix stylesheet
- To float your inner panels
Floating is simple but can be a little tricky at times Read these float tutorials to learn all about them.
Essentially all you have to do is add the following styling to your inner panels:
float: left;
The float will automatically make the div and all its content as narrow as possible, so make sure to set the width as you already have.
Then you need to apply a clearfix style to your outer panel so that all floating elements inside it do not suffer from the "guillotine effect". Since floating boxes have no "layout", they are not part of the normal document flow and are therefore ignored by their parent containers. Clearfix solves this by making the container recognize floats as having a layout.
a source to share
Panels should usually, but not always, be rendered as div tags, ids become handled by the naming container, so it's easier to add the cssclass attribute .. set your css accordingly.
If you want the over-mode to allow scrolling, you need your positioning and height to be set to do so.
.myContainter {
position: relative; /* or absolute, or a float */
height: 700px;
overflow: auto;
}
should do it. :)
a source to share