ASP.NET - checkboxlist are not aligning properly

Asked By Anjali agarwal on 05-Oct-11 05:57 PM
Hi All,

I am binding a checkboxlist with data. Everything is working fine except that chkList_MetricsSeverity and chkList_MetricsAvgMedian are not aligned properly so if the chkList_MetricsSeverity has checkbox A B and C and chkList_MetricsAvgMedian has checkboxes D, E and F then I want D coming direclty underneatch A and E coming directly underneatch B and F coming underneatch C, but this is not happening right now. Right now the checkbox of each panel are aligned properly, but checkboxed under different panel are not. Is their any way. I can align them properly. In gui, it looks really bad if they are not aligned properly.

<asp:Panel ID="panel8" runat="server" CssClass="cis_edit_pnl" GroupingText="Casrep Metrics Options">
       <table>
         <tr>
           <td>
             <div>
               <asp:Panel ID="panel1" runat="server" CssClass="cis_edit_pnl" GroupingText="Severity"
                 Width="1240px">
                 <asp:CheckBoxList ID="chkList_MetricsSeverity" runat="server" RepeatDirection="Horizontal"
                   RepeatColumns="3" >
                 </asp:CheckBoxList>
               </asp:Panel>
             </div>
             <div>
               <asp:Panel ID="panel2" runat="server" CssClass="cis_edit_pnl" GroupingText="Average & Median"
                 Width="1240px">
                 <asp:CheckBoxList ID="chkList_MetricsAvgMedian" runat="server" RepeatDirection="Horizontal"
                  RepeatColumns="3">
                 </asp:CheckBoxList>
               </asp:Panel>
             </div>
             <div>
               <asp:Panel ID="panel3" runat="server" CssClass="cis_edit_pnl" GroupingText="report Counts"
                 Width="1240px">
                 <asp:CheckBoxList ID="chkList_reportCounts" runat="server" RepeatDirection="Horizontal"
                   RepeatColumns="3" >
                 </asp:CheckBoxList>
               </asp:Panel>
             </div>
       </td>
         </tr>
       </table>
     </asp:Panel>

any help will be appreciated.
Riley K replied to Anjali agarwal on 05-Oct-11 09:50 PM


You have just placed the DIV's, set some alignment for the DIV where you have placed the checkbpoxes,

I could not check how your display looks right now,

you could try like this

<div style="text-align: center;">
  <p>Here you will tell..</p>
  <div style="text-align: left; width: 50%; margin: auto;">
    <asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
  </div>
  <input type="button" id="next_3" value="Next Page" />
</div>


Regards
aneesa replied to Anjali agarwal on 05-Oct-11 11:42 PM
<div>
         <asp:Panel ID="panel1" runat="server" CssClass="cis_edit_pnl" GroupingText="Severity"
         Width="1240px">
         <asp:CheckBoxList ID="chkList_MetricsSeverity" runat="server" RepeatDirection="Horizontal"
           RepeatColumns="3" Width="400px" >
         </asp:CheckBoxList>
         </asp:Panel>
       </div>
       <div>
         <asp:Panel ID="panel2" runat="server" CssClass="cis_edit_pnl" GroupingText="Average & Median"
         Width="1240px">
         <asp:CheckBoxList ID="chkList_MetricsAvgMedian" runat="server" RepeatDirection="Horizontal"
          RepeatColumns="3"  Width="400px" >
         </asp:CheckBoxList>
         </asp:Panel>
       </div>
       <div>
         <asp:Panel ID="panel3" runat="server" CssClass="cis_edit_pnl" GroupingText="report Counts"
         Width="1240px">
         <asp:CheckBoxList ID="chkList_reportCounts" runat="server" RepeatDirection="Horizontal"
           RepeatColumns="3"  Width="400px"  >
         </asp:CheckBoxList>
         </asp:Panel>
       </div>
Anjali agarwal replied to aneesa on 06-Oct-11 01:02 PM
Thanks Aneesa!!
Setting the width solved my problem.