Question

Mine checkboxlist is very ugly. the Box doesn't align properly. See the screenshot.

Was it helpful?

Solution

I would like to mention that your checkbox list will be stick to the Width="195px". So suggestion from my side is either increase the width as per your design or remove it as mentioned below :

<asp:CheckBoxList runat="server" ID="cblType" 
                        OnSelectedIndexChanged="cblType_OnSelectedIndexChanged" AutoPostBack="True" 
                        RepeatDirection="Horizontal">
    <Items>
        <asp:ListItem Text="IPP Stories" Value="IPP Stories"></asp:ListItem>
        <asp:ListItem Text="OutReach Activities " Value="OutReach Activities"></asp:ListItem>
        <asp:ListItem Text="CCA" Value="CCA"></asp:ListItem>
        <asp:ListItem Text="Community Work" Value="Community Work"></asp:ListItem>
        <asp:ListItem Text="Competition" Value="Competition"></asp:ListItem>
        <asp:ListItem Text="Overseas Experience" Value="Overseas Experience"></asp:ListItem>
        <asp:ListItem Text="FYPJ" Value="FYPJ"></asp:ListItem>
    </Items>
</asp:CheckBoxList>

Suggestion :

If I am facing this situation then I would make it in two rows by adding RepeatColumns="3" or RepeatColumns="4" in CheckboxList property.

OTHER TIPS

I don't think you need to specify any width here, try not to and perhaps it will do the job. If not, please post the pertinent css style (if any)...

<asp:CheckBoxList runat="server" ID="cblType" 
                    OnSelectedIndexChanged="cblType_OnSelectedIndexChanged" AutoPostBack="True" 
                    RepeatDirection="Horizontal">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top