CODEWITHSUNDEEP
htmlcsslayoutcheckbox
Fillip Peyton
Fillip Peyton

Reputation: 3657

Prevent text from wrapping under a checkbox

I'm laying out a set of checkboxes and I am running across the age-old issue of text wrapping underneath a checkbox if the text is too long.

My HTML:

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
            <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
            <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
        </fieldset>
    </form>
</div>

My CSS:

div.right{width:580px;}

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 33%;
}

See my fiddle here: http://jsfiddle.net/fmpeyton/7WmGr/

After much searching on different sites, I can't seem to find a reasonable solution. I am open for suggestions on changing my markup/styles, but I would like to keep the code as clean and semantic as possible.

Thanks!

Upvotes: 40

Views: 61010

Answers (9)

Dgloria
Dgloria

Reputation: 301

I've wrapped the checkbox and the label in a div and added display:flex. That has left alignment by default.

<div class="checkFlex">
   <input
   type="checkbox"
   class="form-check-input"
   name="..."
   id="..."
   v-model="..."
   @change="..."
   />
   <label for="...">This is a label</label>
</div>

.checkFlex{
  display:flex;
}

Upvotes: 0

Vincent
Vincent

Reputation: 2159

The easiest solution is to use a table for layout in this case. Rather than fiddling with a thousand different possible permutations of css because supposedly tables are evil, this just works 100% of the time.

<table>
  <tr>
    <td><input type=checkbox id=blah><label ='blah'></label></td>
    <td><label for='blah'>Long label here...</td>
   </tr>
</table>

And if you need a label next to your checkbox for styling purposes then just use an empty label tag there and use the real label in the second table cell. (Yes, you can use multiple labels for the same checkbox)

Upvotes: 0

Ivan
Ivan

Reputation: 209

The simplest option

HTML:

<form id="updateProfile">
    <fieldset class="checkboxes">
        <p>4. What is your favorite type of vacation?</p>
        <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
        <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
        <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
        <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
        <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
        <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
        <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
        <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
        <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
        <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
        <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
</form>

CSS:

label {
    display:flex;
    align-items: baseline;
}

input[type=checkbox] {
    margin-right: 8px;
}

Upvotes: 7

Fillip Peyton
Fillip Peyton

Reputation: 3657

This seems to work:

http://jsfiddle.net/7WmGr/5/

I gave the label a margin-left of 18px and the checkboxes a margin-left of -18px.

Seems to work in Chrome & IE9.

div.right {
  width: 598px;
}

form#updateProfile fieldset label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  float: left;
  width: 30%;
  margin-left: 18px;
}

form#updateProfile fieldset label input[type='checkbox'] {
  margin-left: -18px;
}
<div class="right">
  <form id="updateProfile">
    <fieldset class="checkboxes">
      <p>4. What is your favorite type of vacation?</p>
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
  </form>
</div>

Upvotes: 36

Rafael Perozin
Rafael Perozin

Reputation: 663

I'd tried all the options and the best solution for was:

<div>
  <label><input type="checkbox"><span>Text</span></label>
  <label><input type="checkbox"><span>Text</span></label>
</div>

HTML like Pudica and Fillip suggested.

And the CSS you only set the float:left to the checkboxes and to prevent the text wrap around the checkbox you can simply use overflow:hidden on the span.

[type="checkbox] {
   float: left;
}
span {
   overflow: hidden;
}

You can use margin-left to give desired space from text to checkbox.

Upvotes: 1

Pudica
Pudica

Reputation: 188

Here's one that's less reliant on the size of the input elements.

div {width: 12em;}

label {
  display: block;
  white-space: nowrap;
  margin: 10px;
}

label input {
  vertical-align: middle;
}

label span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  position: relative;
  top: 2px;
}
<div>

<label><input type="radio"><span>I won't wrap</span></label>
<label><input type="checkbox"><span>I won't wrap</span></label>

<label><input type="radio"><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label>

</div>

Upvotes: 4

Christian Michael
Christian Michael

Reputation: 2316

I like this ...

HTML: 

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS:

input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

Upvotes: 16

Lexus de Vinco
Lexus de Vinco

Reputation: 447

This is another option. It's very simple yet effective. You take the part that's wrapping. <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label> and you add a span with a class. I called the class antiWrap. Then you use css to add a left margin to it like. .antiWrap { margin-left: 18px; } Here's myfiddle based using your code. http://jsfiddle.net/alexhram/7WmGr/3/ I think that's what your going for? Let me know.

Upvotes: 0

gotohales
gotohales

Reputation: 3695

One option would be something like this.

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    padding-left: 3%;
    position: relative;
}

input {
    position: absolute;
    left: -5px;
}

Demo here: http://jsbin.com/opoqon/1/edit

The way I tend to do it is different, which is not wrapping inputs with labels, rather doing something like 

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

which then allows for easier styling.

Here is an example of that way: http://jsbin.com/otezut/1/edit

But either way would work.

Upvotes: 5

Related Questions