CODEWITHSUNDEEP
asp.net
Nate Pet
Nate Pet

Reputation: 46222

asp:CheckBox - prevent text from wrapping below checkbox

I have a Checkbox with text that is fairly lengthy as shown below. One thing we don't want is for the text to wrap below the checkbox. What I have done to fix this is to put spaces. Also not that part of the text is bold as well:

     <asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ample time will be provided for individual discussions during breaks and at the networking reception.

Is there a way for the text not to wrap below the checkbox and still have the boldness in the text I need?

Note that I still want the text to wrap but not below the checkbox. Meaning it should wrap below the previous line's text.

Upvotes: 5

Views: 5900

Answers (3)

seguso
seguso

Reputation: 2273

I just found a solution: the key is to use display:table and display:table-cell.

Here is the asp.net code:

<asp:CheckBox ID="..." runat="server" CssClass="mobilesubtitle" />

and here is the html code produced (relevant parts):

<span class="mobilesubtitle">

  <input type="checkbox" name="..." id="...">

  <label for="...">text</label>

</span>

All you need to do in css is:

span.mobilesubtitle {
    display: table;

}
span.mobilesubtitle > input{
    display: table-cell;

}


span.mobilesubtitle > label {
    display: table-cell;
    vertical-align: top;
}

inline-table also seems to work.

Upvotes: 0

dirkj
dirkj

Reputation: 38

This link describes a solution. In short:

  • do not use the CheckBox Text
  • rather, use an extra Label
  • set the CheckBox style float: left
  • set the Label style display: table

Upvotes: 2

Aristos
Aristos

Reputation: 66641

From the moment you have the text outside of your check box you can warp it with a span and nowrap style as:

<span style="white-space: nowrap;">
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Att ........
</span>

if you place your text inside the text of your check box, you can use the style attribute as:

<asp:CheckBox runat="server" ID="chkOption1" style="white-space: nowrap;" Text="too long text" />

The render html is the same.

Upvotes: 7

Related Questions