How to set column width in a CheckBoxList in an ASP.NET page

Maybe this is common problem since CheckBoxList control doesn't have set of parameters for obtaining column width and row height. But we always can use CSS for styling this control getting in mind he is rendered as html table or floated div tag.


<asp:checkboxlist runat="server" id="chkBoxList1" cssclass="chkBoxList" repeatcolumns="4" repeatlayout="Table">
</asp:checkboxlist>


Here we explicitly define the layout to be rendered as table (which is by default) and also need to define the css class "chkBoxList" in current page or web site theme.


<style>
.chkBoxList tr
{
height:24px;
}

.chkBoxList td
{
width:120px; /* or percent value: 25% */
}
</style>

Of course any other css styles can be attached here.

Only ASP.NET :)

14 comments:

  1. It works!!!! Thank you :)

    ReplyDelete
  2. it's not working.. i'm using dynamic CheckboxList

    ReplyDelete
  3. What do you mean with "dynamic". The final HTML output of the CheckBoxList control consist of table cells and they can be easily manipulated via css td classes. Use firbug or other tool so inspect the control outpus and check the css associated to the table cell.

    ReplyDelete
    Replies
    1. Yup. Now it's working. the problem is that i am using repeat Layout "FLOW" instead of "TABLE".

      Thanks..

      Delete
  4. Thanks. Worked for me.

    ReplyDelete
  5. It works!!!! Thank you :)

    ReplyDelete
  6. Awesome. Lots of wrong information on the web about this, thanks for getting it right.

    ReplyDelete
  7. Fantastic and EASY solution posted in a quick and easy way ... no twelve pages of text to explain the checkbox list rendering a table which like any other, can be manipulated with CSS. Great, works, is clear and simple. Kudos & Thanks!

    ReplyDelete
  8. It works !!! Thanks !!!

    ReplyDelete
  9. Simple and very helpful Thanks!

    ReplyDelete
  10. Thanks a lot !!!!!!!! Very helpful

    ReplyDelete