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

LVL 1
skaleem1Asked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
For what it's worth, the only way I can duplicate what you showed in the pic is to put td {text-align: center;} in the style section.
0
 
nicawCommented:
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

0
 
skaleem1Author Commented:
I am sorry but I could not see the difference between my code and your code, can you please identify and elaborate?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
nicawCommented:
There was a <space> right before "Not Sellable".
0
 
skaleem1Author Commented:
But that does not sole the alignment issue, see the attached screenshot:
Sellable.GIF
0
 
nicawCommented:
I see what you mean now. Please included more code.
0
 
a1aaitCommented:
Do you have an associated style sheet for this?
0
 
Dave BaldwinFixer of ProblemsCommented:
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?
0
 
skaleem1Author Commented:
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

0
 
LZ1Commented:
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

0
 
skaleem1Author Commented:
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
0
 
LZ1Commented:
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?
0
 
skaleem1Author Commented:
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">

0
 
LZ1Commented:
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

0
 
skaleem1Author Commented:
this does not work and it messes up the look and feel completely, see the screenshot below:
SellableCountries-1.GIF
0
 
LZ1Commented:
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

0
 
skaleem1Author Commented:
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
0
 
LZ1Commented:
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.
0
 
LZ1Connect With a Mentor Commented:
Like this:
<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table width="100%" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions" style="margin-left:50px;"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  style="margin-left:50px;" value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table width="100%" cellspacing="0" style="text-align:left;">  
            <tr>  
            <td>  
            <input type="radio" name="Sellable"  style="margin-left:50px;" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  style="margin-left:50px;" value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

0
 
skaleem1Author Commented:
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)
0
 
skaleem1Author Commented:
Thanks a lot to both DaveBaldwin and LZ1
0
All Courses

From novice to tech pro — start learning today.