asked on

html radio buttons alignment inside a panel

I have two html radio buttons and I want to align both of them vertically at the same vertical position within the panel. However, the two buttons are always misaligned, the top radio button a little on the left of the bottom one (Please see the code below). Can someone please help?

<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td>
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)"> Not Sellable<br>
            </td> </tr></table>
            </asp:Panel>

Open in new window

nicaw

Heh, if this helps it's the easiest question I answered so far.

<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
<table cellspacing="0"> 
<tr> 
<td> 
<input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
<tr><td>
<input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable<br>
</td> </tr></table>
</asp:Panel>

Open in new window

skaleem1

ASKER

I am sorry but I could not see the difference between my code and your code, can you please identify and elaborate?

nicaw

There was a <space> right before "Not Sellable".

skaleem1

ASKER

But that does not sole the alignment issue, see the attached screenshot:
Sellable.GIF

nicaw

I see what you mean now. Please included more code.

a1aait

Do you have an associated style sheet for this?

Dave Baldwin

It looks like your sample is enclosed by a block that is 'centered'. Also, what browser are you viewing it in and capturing the sample?

skaleem1

ASKER

a1aait:
As you can see in the code above, I am not referencing any stylesheet or style with both the enclosing panel as well as the inner table, so the answer is no.

DaveBaldwin:
Well, as far as know, there is no block of code that is enclosing this panel and the contained table. I am using IE.

nicaw, and all,

Please see detailed code below:

aspx:

<div class="OuterListBox">
        <asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="CountriesRegions" align="middle" value="Countries" onclick="LoadCountriesRegions(this)" checked="checked">Countries Based Restrictions</td> </tr>
            <tr><td>
            <input type="radio" name="CountriesRegions" align="middle" value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions
            </td> </tr></table>
            </asp:Panel>
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td>
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable
            </td> </tr></table>
            </asp:Panel>
        <div class="InnerLeftListBox">            
            <table style="width: 260px">
                <tr><td><asp:Label ID="lblForThisPartRestric" runat="server" Text="Sellable In" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr>
                <tr><td style="width: 150px"><p><select id="lstForThisPartRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true" 
                onchange='OnChange("btnlstItemRestricRemove", "btnlstItemRestricAdd","lstForThisPartRestric", "lstAllRestric");'>          
        </select></p></td>
                <td style="width: 80px">
            <button id="btnlstItemRestricAdd" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricAdd', 'btnlstItemRestricRemove', 'lstAllRestric','lstForThisPartRestric');">&lt&ltAdd</button>
            <button id="btnlstItemRestricRemove" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricRemove', 'btnlstItemRestricAdd', 'lstForThisPartRestric','lstAllRestric');">Remove>></button>            
            <asp:Button ID="btnlstItemRestricReset" runat="server" Enabled="false" OnClick="btnlstItemRestricReset_Click" Text="Reset" Width="80px"/>
            
            </td></tr>
            </table>
        </div>
        <div class="InnerRightListBox">
            <asp:Panel ID="RestricEditPanelRight" runat="server" Visible="false">
            </asp:Panel>
            <asp:Panel ID="RestricAddPanel" runat="server">
                <table style="width: 180px">
                    <tr><td><asp:Label ID="lblAllRestric" runat="server" Text="Rest of World" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr>
                    <tr><td style="width: 150px"><p><select id="lstAllRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true" 
                onchange='OnChange("btnlstItemRestricAdd", "btnlstItemRestricRemove","lstAllRestric", "lstForThisPartRestric");'>          
        </select></p></td>
                    </tr>
                </table>
                
            </asp:Panel>
        </div></div>

styles:

div.OuterListBox {

        width: 350px;

        border:none;

        position: relative;

        clear: both;

        }
        
        div.InnerLeftListBox {

        width: 70%;

        position: relative;

        background: none;        

        float: left;

        }

 

        div.InnerRightListBox {

        width: 30%;

        position: relative;

        background: none;        

        float: right;
            top: 0px;
            left: 36px;
            height: 80px;
        }

Open in new window

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

Like this?

<style> 
div.OuterListBox { 
 
        width: 350px; 
 
        border:none; 
 
        position: relative; 
 
        clear: both; 
 
        } 
         
        div.InnerLeftListBox { 
 
        width: 70%; 
 
        position: relative; 
 
        background: none;         
 
        float: left; 
 
        } 
 
  
 
        div.InnerRightListBox { 
 
        width: 30%; 
 
        position: relative; 
 
        background: none;         
 
        float: right; 
            top: 0px; 
            left: 36px; 
            height: 80px; 
        }</style>
</head>

<body>
<div class="OuterListBox"> 
        <asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td>  
            <input type="radio" name="CountriesRegions" align="middle" value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" style="text-align:left;">Countries Based Restrictions</td> </tr> 
            <tr><td> 
            <input type="radio" name="CountriesRegions" align="middle" value="Regions" onclick="LoadCountriesRegions(this)" style="text-align:left;">Regions Based Restrictions 
            </td> </tr></table> 
            </asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td>  
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td> 
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable 
            </td> </tr></table> 
  </asp:Panel> 
        <div class="InnerLeftListBox">             
            <table style="width: 260px"> 
                <tr><td><asp:Label ID="lblForThisPartRestric" runat="server" Text="Sellable In" ForeColor="#3366CC"  
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr> 
                <tr><td style="width: 150px"><p><select id="lstForThisPartRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true"  
                onchange='OnChange("btnlstItemRestricRemove", "btnlstItemRestricAdd","lstForThisPartRestric", "lstAllRestric");'>           
        </select></p></td> 
                <td style="width: 80px"> 
            <button id="btnlstItemRestricAdd" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricAdd', 'btnlstItemRestricRemove', 'lstAllRestric','lstForThisPartRestric');">&lt&ltAdd</button> 
            <button id="btnlstItemRestricRemove" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricRemove', 'btnlstItemRestricAdd', 'lstForThisPartRestric','lstAllRestric');">Remove>></button>             
            <asp:Button ID="btnlstItemRestricReset" runat="server" Enabled="false" OnClick="btnlstItemRestricReset_Click" Text="Reset" Width="80px"/> 
             
            </td></tr> 
            </table> 
        </div> 
        <div class="InnerRightListBox"> 
            <asp:Panel ID="RestricEditPanelRight" runat="server" Visible="false"> 
            </asp:Panel> 
            <asp:Panel ID="RestricAddPanel" runat="server"> 
                <table style="width: 180px"> 
                    <tr><td><asp:Label ID="lblAllRestric" runat="server" Text="Rest of World" ForeColor="#3366CC"  
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr> 
                    <tr><td style="width: 150px"><p><select id="lstAllRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true"  
                onchange='OnChange("btnlstItemRestricAdd", "btnlstItemRestricRemove","lstAllRestric", "lstForThisPartRestric");'>           
        </select></p></td> 
                    </tr> 
                </table> 
                 
            </asp:Panel> 
        </div></div>

Open in new window

skaleem1

ASKER

DaveBaldwin:

I tried your idea and style="text-align:center;" did not work however style="text-align:left;" worked (the two radio buttons in each panel are vertically aligned, nice). However, there is one issue left. Please see the code below as well as the screenshot. In the screenshot, as you can see, how can I vertically align the radio buttons in the lower panel (sellable/not sellable) with the radio buttons in the upper panel (Countries/Regions)?

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr>
            <tr><td style="text-align:left;">
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions
            </td> </tr></table>
            </asp:Panel>
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td style="text-align:left;">
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable
            </td> </tr></table>
            </asp:Panel>

Open in new window

SellableCountries.GIF

LZ1

To get them to line up exactly your going to have to play with the margin-left style inside of the table. Ideally you could just add
text-align:left;
to both cells and you'd be fine. I'm not sure this would work though, as I'm not testing with a live source.
How wide are both of those boxes containing the buttons?

skaleem1

ASKER

well, as the code suggests, there is no width set for the two panels enclosing the two tables:

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">

<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">

LZ1

And you can't use text-align:left in the td or you'd prefer to have them both centered?

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table align="left" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table align="left" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

skaleem1

ASKER

this does not work and it messes up the look and feel completely, see the screenshot below:
SellableCountries-1.GIF

LZ1

Sorry about that one..

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table style="text-align:left;" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

skaleem1

ASKER

This does not help as the vertical alignment of radiobox between the two panels is still off as shown in the screenshot below:

The only way to make it work in terms of having the same vertical alignment is to set the style="text-align:left;" style inside both panels. However, in this case, all four radio buttons are aligned vertically to the extreme left of both panels, something I don't want. I want all of the radio buttons in the two panels aligned vertically but in the center...
SellableCountries.GIF

LZ1

Here's the thing. If we want to align that way, we'll have to know the width or set the width. In that case, we can align using the margin-left. The table and text alignment are not going to work properly.

SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

skaleem1

ASKER

Thanks LZ1, that worked perferctly. I will split the points between you and DaveBaldwin as he answered the first part of the question i.e aligning between the radio buttons within each individual panel (see 29883520)

skaleem1

ASKER

Thanks a lot to both DaveBaldwin and LZ1