CODEWITHSUNDEEP
asp.nethtmlcheckboxpositioning
Null Head
Null Head

Reputation: 2941

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>

Upvotes: 1

Views: 2565

Answers (3)

Null Head
Null Head

Reputation: 2941

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.

Upvotes: 4

user1432124
user1432124

Reputation:

Suppose you have code

<!--CheckboxCatering Order(PDF)--!>

Then update your code like

<div style="width:300px;"><!--checkboxCatering Order(PDF)--!></div>

It will solve your problem

Upvotes: 2

IrishChieftain
IrishChieftain

Reputation: 15253

If it's a CheckBoxList then the width must be constrained somehow? Set a fixed width to prevent the collapse.

<div style="min-width:600px;">
    <!-- check boxes ->
</div>

Note that this width is just arbitrary; play around with it...

UPDATE: now that I see your markup, just set a width on the repeater.

Upvotes: 2

Related Questions