I have an interesting issue. What really makes it interesting is the GUI preview versus the actual output. I am creating a screen inside of a masterpage content area and I have two labels, two textboxes, and two radiobuttonlists. In design view it shows
all of these on the same line. When viewing in browser (FF and IE) it displays as if there is a <BR> after the second textbox. These are styled with CSS and I have selected CSS3. The code is
Radio button lists render as a table in the browser. So it goes down to a new line. If you need those to be on the same line. Include the controls in divs and make those divs
float:left as below
Thank you much.. I had taken a bicycle ride (maybe not so smart in 85 degree heat, but it will be getting worse soon) and came up with the idea of using a DIV. What I did not think of is the floatleft attribute. It looks excellent now.
slink8
Member
50 Points
41 Posts
Align labels, textboxes, radiobuttonlist same line
Aug 04, 2012 12:30 PM|LINK
I have an interesting issue. What really makes it interesting is the GUI preview versus the actual output. I am creating a screen inside of a masterpage content area and I have two labels, two textboxes, and two radiobuttonlists. In design view it shows all of these on the same line. When viewing in browser (FF and IE) it displays as if there is a <BR> after the second textbox. These are styled with CSS and I have selected CSS3. The code is
<p> <asp:Label ID="lblOrigin" runat="server" Text="Origin" CssClass="LabelOrigin"></asp:Label> <asp:TextBox ID="txtOrigin" runat="server" CssClass="txtOrigin"></asp:TextBox> <asp:Label ID="lblDest" runat="server" Text="Destination" CssClass="labeldest"></asp:Label> <asp:TextBox ID="txtDest" runat="server" CssClass="txtOrigin"></asp:TextBox> <asp:RadioButtonList ID="rbShipCons" runat="server" CssClass="rbshipcons"> <asp:ListItem>Shipper</asp:ListItem> <asp:ListItem>Consignee</asp:ListItem> </asp:RadioButtonList> <asp:RadioButtonList ID="rbPPColl" runat="server" CssClass="rbppcol"> <asp:ListItem>Prepaid</asp:ListItem> <asp:ListItem>Collect</asp:ListItem> </asp:RadioButtonList> </p>and the css is
.rbshipcons { margin-left: 45px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; display: inline; position: relative; } .rbppcol { margin-left: 45px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; display: inline; position: relative; } .txtOrigin { margin-left: 15px; font-family: Arial; font-size: 14px; text-decoration: none; max-width: 73px; }Any idea why the browser refuses to display these on the same line?
Ruchira
All-Star
44283 Points
7185 Posts
MVP
Re: Align labels, textboxes, radiobuttonlist same line
Aug 04, 2012 01:37 PM|LINK
Hello,
Radio button lists render as a table in the browser. So it goes down to a new line. If you need those to be on the same line. Include the controls in divs and make those divs float:left as below
<p> <div style="float: left"> <asp:Label ID="lblOrigin" runat="server" Text="Origin" CssClass="LabelOrigin"></asp:Label> <asp:TextBox ID="txtOrigin" runat="server" CssClass="txtOrigin"></asp:TextBox> <asp:Label ID="lblDest" runat="server" Text="Destination" CssClass="labeldest"></asp:Label> <asp:TextBox ID="txtDest" runat="server" CssClass="txtOrigin"></asp:TextBox> </div> <div style="float: left"> <asp:RadioButtonList ID="rbShipCons" runat="server" CssClass="rbshipcons"> <asp:ListItem>Shipper</asp:ListItem> <asp:ListItem>Consignee</asp:ListItem> </asp:RadioButtonList> </div> <asp:RadioButtonList ID="rbPPColl" runat="server" CssClass="rbppcol"> <asp:ListItem>Prepaid</asp:ListItem> <asp:ListItem>Collect</asp:ListItem> </asp:RadioButtonList> </p>
My Tech blog | My YouTube ChannelPlease 'Mark as Answer' if this post helps you.slink8
Member
50 Points
41 Posts
Re: Align labels, textboxes, radiobuttonlist same line
Aug 04, 2012 02:09 PM|LINK
Thank you much.. I had taken a bicycle ride (maybe not so smart in 85 degree heat, but it will be getting worse soon) and came up with the idea of using a DIV. What I did not think of is the floatleft attribute. It looks excellent now.