Search code examples
asp.nethtmlcheckboxpositioning

HTML: Keep checkbox and associated text together while its container is resized

I have an ASP.Net page which renders checkboxes as below

Elements on same line

But when I re-size the screen, the controls are crammed together and the checkboxes & their associated text move into different lines and it wouldn't make much sense.

Elements on different line

I would like to know if there is a way to keep the checkboxes together.

Heres the Code:

<asp:Repeater ID="rpFiles" runat="server" DataSource='<%# Eval("Files") %>' OnPreRender="rpFiles_PreRender" >
    <ItemTemplate>
       <asp:PlaceHolder ID="phFile" runat="server">
        <asp:CheckBox ID="cbVisibility" AutoPostBack="false" runat="server" Text='<%# string.Format("{0} ({1})", Eval("FileName"), Eval("FileType").ToString().ToUpper()) %>' Checked='<%# !((bool)DataBinder.Eval(Container.DataItem, "IsHidden")) %>' />
              <asp:HiddenField ID="hfFileID" Value='<%# Eval("FileID") %>' runat="server" />
       </asp:PlaceHolder>                            
    </ItemTemplate>
</asp:Repeater>
Solution

  • Thanks for your input guys. Tried working on your lines. width and min-width were not working but the idea of div was important, +1 for that.
    I have used this instead

    <asp:PlaceHolder ID="phFile" runat="server">
    <div style="display:inline-block; padding-right:15px"><asp:CheckBox ID=...

    and that fixes it.