Align labels, textboxes, radiobuttonlist same line RSS

• • Reply
  

  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?
  
  

• • Reply
  

  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>

  Please 'Mark as Answer' if this post helps you.

  My Tech blog | My YouTube Channel
  • Marked as answer by slink8 on Aug 04, 2012 02:06 PM
• • Reply
  

  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.