Hi I am using the following CSS script to align the checkboxes in my ASP.NET Project-
.checkbox-grid td
{
text-align: left !important;
display: inline-table !important;
float: left !important;
width: 25% !important;
}
The Image of the page before Distortion
There is a control on the page called open record that opens the selected record on to a new tab. Whenever I select a record and open it the rendering of checkboxs in the current page gets distorted as shown in the Image below
The image of the page after distortion
I have set the max-width of the table and the row to 800px yet it breaks.
Any clue where am i going wrong?
Here are the lines used by me..
<table>
<tr>
<td>The controls on the left side</td>
<td style="max-width:800px !important;>
<div style="margin:15px 15px !important;">
<asp:CheckBoxList runat="server" ID="valArea" RepeatDirection="Horizontal" CssClass="checkbox-grid" Width="800px">
<asp:ListItem Value="Anupam Nagar">Anupam Nagar</asp:ListItem>
<asp:ListItem Value="Atulbaug">Atulbaug</asp:ListItem>
. . . and so on
</asp:CheckBoxList>
</div>
</td>
</tr>
</table>