spacing of controls keeps changeing

[BeemerBiker]

I am haveing problems getting the positioning of controls set consistently in a UserControl. I can get the control layout correct in design mode.

It look just fine when I drag the control from the solution and drop it onto the page

. Unfortunately it is all wrong when I run the program

I can easily make a change and re-run the program and fix it iteratively. I hate iterative codeing especially when my boss changes what he wants the next time I show him the product.

I suspect I have something set up wrong either in the control or the page I am dropping the user control into. Maybe the whole design is wrong. Anyway, I could use a good reference for how to set up controls so they stay put or maybe someone can look at the following and make a suggestion

<asp:Panel id="pnl4filter" runat="server" Height="46px" Width="169px" 
    position="absolute" BackColor="#FFFFCC">
<P>
        <asp:TextBox id="txtDateStart" runat="server" Height="16px"
            style="top:-6px; left:6px; z-index: 1; position: relative; width: 76px;"></asp:TextBox>
        &nbsp;            
        <asp:ImageButton ID="idCalendarS" runat="server" 
            style="top:-6px; left:10px; height:16px;  width: 18px; position: relative;" 
            ImageUrl="~/images/SmallCalendar.png" CausesValidation="False" />
        &nbsp;
        <asp:Button ID="cmdGO" runat="server" 
            style="z-index: 1; left: 13px; top: 12px; position: relative; height: 26px; width: 30px;" 
            Text="GO" />
        &nbsp;
..
<SNIP>
..
</P>
</asp:Panel>
 

thanks for looking

[Frinavale]

The problem is due to incorrect CSS or a HTML in your User Control.

From the images you've posted I see that the control has a TextBox followed by an ImageButton...then on the next line you have another TextBox followed by another ImageButton....Beside both of these (on the right) there is a button.

The code you've posted does not reflect this and so I cannot tell you where you've gone wrong.

You should have something like (Please note my comments):

<asp:Panel id="pnl4filter" runat="server" Height="46px" Width="169px" 
    position="absolute" BackColor="#FFFFCC">
 
 
<!--
   Grouping the date selection section into it's own <div> area.
   Setting it's style to float left so that it appears left of the rest of the content..
   which is the button
-->
<asp:Panel id="DateSelectionSection" runat="server" style="float:left">
 
<!--
  Adding the TextBox/ImageButton combination used to gather the
  Start Date
-->
  <asp:Panel id="firstGrouping" runat="server>
        <asp:TextBox id="txtDateStart" runat="server" Height="16px"
            style="top:-6px; left:6px; z-index: 1; position: relative; width: 76px;"></asp:TextBox>
        &nbsp;            
        <asp:ImageButton ID="idCalendarS" runat="server" 
            style="top:-6px; left:10px; height:16px;  width: 18px; position: relative;" 
            ImageUrl="~/images/SmallCalendar.png" CausesValidation="False" />
  </asp:Panel>
 
<!--
  Adding the second TextBox/ImageButton combination used to gather the
  End Date
 
  Please note that since these are in Panels they are rendered as <div>'s
  Because <div> elements are displayed as Blocks, these will appear 
  on top of one another...if you want them beside one another you have to
  float them.
-->
  <asp:Panel id="secondGrouping" runat="server>
        <asp:TextBox id="txtDateEnd" runat="server" Height="16px"
            style="top:-6px; left:6px; z-index: 1; position: relative; width: 76px;"></asp:TextBox>
        &nbsp;            
        <asp:ImageButton ID="idCalendarE" runat="server" 
            style="top:-6px; left:10px; height:16px;  width: 18px; position: relative;" 
            ImageUrl="~/images/SmallCalendar.png" CausesValidation="False" />
  </asp:Panel>
</asp:Panel>
 
<!--
     Hmmm...
     You had a position:relative style for the button,
     This could work but I think you want the button to actually be part of
     this control on the page.
     I've floated it left so that it appears flush next to the above content.
     It would be a good idea to set a Margin style on this as well so that 
     there's a bit of space between the button and the content....
    Or  you could just float the button to the right.....
 
-->
 
        <asp:Button ID="cmdGO" runat="server" 
            style="float:left; margin-left:2px;height: 26px; width: 30px;" 
            Text="GO" />
 
<!--
     Adding a <div> that will make sure that the elements appear 
     within the containing Panel....note that you need both <div> and </div>
     for this to work in all browsers.
-->
<div style="clear:both;"></div>
 
</asp:Panel>

[BeemerBiker]

Thanks Frinny!

I actually did not know I could put a panel inside a panel. I thought panels could only go on forms. Also, I see you got rid of that <P> which I thought was required by ascx as VS2008 put it in the page for me. I also was unaware of the existance of "float". I learned a lot.

I changed the DateSelectionPanel to 66% width and 100% height and changed the two inner panels to %50 height and 100% width then floated the button to the right in the %33 remaining space.

This seems to have solved all the alignment problems.

Unaccountably, I cannot set the height of the textbox when using pixels. I wanted the height to match the xx-small font, about "14px", but I found that I had to use "40%" for the height. The "14px" actually worked in the design view, but not at runtime.

So why was the "px" ignored at runtime, but the % worked fine?
Is there an equivalent float for the vertical?

I also plan to use a hovering clickable tooltip (eventually) for the sql filter selections instead of having those start/stop boxes next to the large report buttons. For now, I just want to get it to work and can add the hover stuff later.

thanks again

[Frinavale]

As far as I know there is no easy way to align things vertically.

You could do a cheat where you set the line-height the same as the height of the <div> (or Panel).....I don't know if this'll work with your button though.

All of your questions are better asked in the CSS forum :)


PS. How did you set the Height and Width of the TextBoxes?
Please post your asp code for this.

[drhowarddrfine]

Can this be translated into English...um...I mean HTML? :)

Actually, can someone show the generated markup without the asp stuff.

[Frinavale]

I've created a new thread for the second question.
It can be found here.

@BeemerBiker
An HTML <p> element is supposed to be used to indicate where a paragraph starts and ends. I'm not sure why you thought that this element would be required by a web user control.

Every ASP.NET control is translated into HTML when it is rendered in the browser:

• TextBox = <input type='text'>
• Panel = <div>
• Button = <input type='submit'> or <input type='button'>
• Label = <span>

Like any HTML, styles for these controls can be set using CSS to arrange the elements the way you'd like them.

A Panel is rendered as a <div>, which indicates a block/group of something...this is why you can place controls (including other Panels) within a Panel.