ASP newbie - how to align panels horizontally (or what other containerto use)

[Axel]

Hi

I want to align some containers of various controls with in a form
horizontally (without using a table). I tried dropping 2 panels but they
are alway displayed on top of each other? Is there an equivalent to the
XUL vbox and hbox controls that I could use instead? If possible I would
like to use a real control/object that I can see in design view and not
just a pair of divs.

Or do I have to specify something in the containing panel?

thanks in advance - a newbie.

 

[Axel]

Sorry, forgot to tell my version number - this is a .NET 2.0 project in
C# - I am using VS2005. (and I am not an ASP newbie, just .NET)

 

[Guest]

Sorry, forgot to tell my version number - this is a .NET 2.0 project in
C# - I am using VS2005. (and I am not an ASP newbie, just .NET)

Using html markup you can place your panels within <div> tags, which
you can use to align panels as you need. For example

<div>
<div style="float:left">

panel 1

</div>
<div style="float:right;">

panel 2

</div>
</div>

 

[Axel]

Thanks; it seems a bit strange as I thought Panels (or maybe other
widgets - is there no horizontal / vertical rectangle / container
control?) could be used for form layout - but these seem to be purely
semantical? I want to achieve floating layout, if <divs> are the only
way (except for tables) then <divs> it will be.

 

[Axel]

Hi Alex

I have tried that but the layout breaks in my browsers (Firefox 3.0,
IE7) - it creates a div for each of the labels as well as my (manually
inserted) divs. nesting the divs in this way somehow breaks the page

http://tinyurl.com/d8l7hk

in IE it looks slightly different but still not correct:

http://tinyurl.com/ccgbdm

here is the css for the child divs (just made them yellow so it can be
seen better):
div.hpanel
{
display: inline;
background-color: Yellow !important;
border: solid 2px White;
padding-right:15px;
margin-right: 5px;
}


I have written something like this - please note that I deliberately
omitted the "float" attribute for the second child panel div:

<div>
<aspanel ID="Panel1" runat="server" Width="100%"
Wrap="False" style="clear: none; overflow: auto; position: static;
text-align: left" Enabled="False" HorizontalAlign="Left" Height="202px">
<div class="hpanel" style="float:left;">
<aspanel ID="Panel2" runat="server" GroupingText="Sort By"
Height="45px"
Width="200px" HorizontalAlign="Left" >
<asp:RadioButtonList ID="RadioSortBy" runat="server"
AutoPostBack="True" SkinID="RadioSortBy"
Width="115px">
<asp:ListItem Value="1">Priority</asp:ListItem>
<asp:ListItem Value="0">Account</asp:ListItem>
</asp:RadioButtonList>
</aspanel>
</div>

<!-- the second panel -->

<div class="hpanel" >
<aspanel ID="Panel3" runat="server" Height="76px" Width="91px" >

<p># of Priority OIs: <label>X</label></p>
<p>this is a test - Account list:
<aspropDownList ID="lstAccounts" runat="server"
Width="132px" AutoPostBack="True" DataSourceID="SqlDataSource1"
DataTextField="Account" DataValueField="Account"
OnSelectedIndexChanged="lstAccounts_SelectedIndexChanged">
</aspropDownList><asp:SqlDataSource ID="SqlDataSource1"
runat="server" ConnectionString="<%$
ConnectionStrings:CFISQLConnectionString %>"
SelectCommand="spWQ_SKURequestsGet"
SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="RadioSortBy"
DefaultValue="0" Name="sort" PropertyName="SelectedValue"
Type="Int32" />
<asparameter DefaultValue="0" Name="minPrio"
Type="Int16" />
<asparameter DefaultValue="3" Name="maxPrio"
Type="Int16" />
</SelectParameters>
</asp:SqlDataSource>
</p>

</aspanel>
</div>


</aspanel>
</div>


========================================
here is the markup it creates - the first div is the containing div (for
everything that you suggested).

<div>

<div id="ctl00_ContentPlaceHolder1_Panel1" disabled="disabled"
style="background-color:Gainsboro;height:202px;width:100%;text-align:left;white-space:nowrap;clear:
none; overflow: auto; position: static; text-align: left">

<div class="hpanel" style="float:left;">
<div id="ctl00_ContentPlaceHolder1_Panel2"
style="height:45px;width:200px;text-align:left;">
<fieldset>
<legend>
Sort By
</legend>
<table id="ctl00_ContentPlaceHolder1_RadioSortBy"
border="0" style="width:115px;">
<tr>

<td><span disabled="disabled"><input
id="ctl00_ContentPlaceHolder1_RadioSortBy_0" type="radio"
name="ctl00$ContentPlaceHolder1$RadioSortBy" value="1"
disabled="disabled"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioSortBy$0\',\'\')',
0)" /><label
for="ctl00_ContentPlaceHolder1_RadioSortBy_0">Priority</label></span></td>
</tr><tr>
<td><span disabled="disabled"><input
id="ctl00_ContentPlaceHolder1_RadioSortBy_1" type="radio"
name="ctl00$ContentPlaceHolder1$RadioSortBy" value="0"
disabled="disabled"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioSortBy$1\',\'\')',
0)" /><label
for="ctl00_ContentPlaceHolder1_RadioSortBy_1">Account</label></span></td>
</tr>
</table>

</fieldset>
</div>
</div>

<!-- the second panel -->

<div class="hpanel" >
<div id="ctl00_ContentPlaceHolder1_Panel3"
style="height:76px;width:91px;">

<!--this seems to close the second "hpanel" div!!-->

<p># of Priority OIs: <label>X</label></p>
<p>this is a test - Account list:
<select name="ctl00$ContentPlaceHolder1$lstAccounts"
onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$lstAccounts\',\'\')',
0)" disabled="disabled" id="ctl00_ContentPlaceHolder1_lstAccounts"
style="font-size:10px;width:132px;">
<option selected="selected" value="G1P00Z">G1P00Z</option>
<option value="G1P012">G1P012</option>

<option value="G44L0Q">G44L0Q</option>
<option value="G44L10">G44L10</option>
<option value="G44L11">G44L11</option>
<option value="G4H20D">G4H20D</option>
<option value="G5MR00">G5MR00</option>
<option value="G5MR01">G5MR01</option>

</select>
</p>


</div>
</div>

</div>
</div>

 

[Axel]

One more info my masterpage uses this document model

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

[Axel]

If I insert 3 divs that do not containt panels they show up as expected:

<div class="hpanel"> pre hpanel </div>
<div class="hpanel"> another one </div>
<div class="hpanel"> another one </div>

see screenshots:

http://tinyurl.com/chsdgw
and
http://tinyurl.com/d7chs9

the panels however always show on top of each other, no matter what
style rules I set. Any idea how I can make 2 panels beside each other
using the panel - Style builder?

thanks in advance
Axel

 

[JM]

If I insert 3 divs that do not containt panels they show up as expected:

<div class="hpanel"> pre hpanel </div>
<div class="hpanel"> another one </div>
<div class="hpanel"> another one </div>

the panels however always show on top of each other, no matter what style
rules I set. Any idea how I can make 2 panels beside each other using the
panel - Style builder?

I just tried the above snippet with your div.hpanel and it worked fine
in both FF2 and IE6 with the xhtml1-transitional DTD.

Do a Google search for IE6 vs IE7 div issues and I'll bet you find
the keys to the answer.

John

 

[Axel]

JM,

indeed display: inline-block works in IE6 because of 2 bugs in IE6. IE7
has only one "bug" there is an undocumented feature called hasLayout
which is triggered by switching on "display:inline" . this markup works
in both browsers (Fx and IE7. I am ignoring IE6, but there is an
additional setting for the hacks line) - the * in front of the display
is important as all browsers except for IE7 ignore it. zoom is used to
toggle hasLayout, display: inline switches IE7 to inline-block mode.



div.hbox
{
border: dotted 1px Gray; /* layout test */
-moz-border-radius: 3px; /* layout test */
text-align: left;
Width: 100%;
margin-bottom: 5px;
}
div.hpanel
{
border: dotted 1px #CCC; /* layout test */
-moz-border-radius: 2px; /* layout test */
display: inline-block;
padding-left:5px;
margin-right: 5px;
vertical-align:top;
/* ie7 quirk for toggling hasLayout and inline-block! */
zoom:1.0; *display: inline;
}

<div class="hbox">
<div class="hpanel">
Area1
<div>
<div class="hpanel">
Area2
<div>
<div class="hpanel">
Area3
<div>
</div>

the advantage of this approach that this is almost fluid layout with
nicely horizontally arranged form panels - the hbox containers always
fill the whole width of their parent, which should allow for nice
multiple nesting (not tested). Border should be set to 0 for the
finished product, I am displaying as dashed to see how my browsers
render the panels.

The only thing this is missing is a nice "flex" attribute to grow
selected hpanels and make the layout even more fluid. That's probably
not possible with CSS 2, but hopfully CSS 3 will introduce something
like this.

If anybody here has ever tried XUL, they have a brilliant and very
simple layout language which achieves just about any form layout with
hbox, vbox and flex attributes. ASP.NET could be great if it had CSS
compliant hbox and vbox container controls.

cheers
Axel

 

[aychipo]

Just found a new web layout control (http://www.zettacube.com/) that
might help you do the layout more easily. They have a free version
named WebLayoutLite.