Prevent text from wrapping around input

Question

I have a simple multi select drop down list where I'm trying to get the checkbox and label to stay inline with each other, without the label text wrapping around the checkbox. Below is the code that shows the issue I'm having. In this fiddle I tried wrapping the checkbox and label each in their own div and floating them, but that causes the label to break to the next line.

 $(document).ready(function() { var el = $(".msddl_selectItem"); el.find(".msddl_selectListToggle").on("click", function () { var container = $(this).parents(".msddl_selectItem"); var list = container.find("ul"); if (list.is(":visible")) { list.slideUp("fast"); } else { list.slideDown("fast"); } }); }); 

 body { background: #eee; } /*msddl*/ .msddlGroup { display: block; float: left; margin: 0 0 0 1.6%; width: 32.26%; } .msddlGroup:first-child { margin-left: 0; } @media only screen and (max-width: 480px) { .msddlGroup { margin: -13px 0 0 0; width: 100%; } .msddlGroup:first-child { margin-top: 0; } } .msddl_selectItem dd { margin: 0px; padding: 0px; } .msddl_selectItem dt { cursor: pointer; } .msddl_selectItem { font-family: Arial; font-size: 9pt; background-color: #fff; color: Black !important; /*margin-left: 5px !important;*/ vertical-align: top; margin: 0; padding-bottom: 1px; outline: none; border: 1px solid #c0c0c0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .msddl_selectListToggle { display: block; } .selectorCatcher { border: 0px; border-image: none; width: 1px; background-color: transparent } .msddl_selectListToggleIcon { display: none; } .msddl_selectedCount { display: inline-block; } .msddl_selectList ul { border: 0; display: none; padding: 5px; list-style: none; } .msddl_selectList li { padding: 2px 0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; } .msddl_selectList li:hover { background-color: rgba(81, 203, 238, 1); } .msddl_selectListFlyout .msddl_selectList { position: relative; } .msddl_selectListFlyout ul { background-color: #fff; margin: 0; display: none; position: absolute; top: 2px; min-width: 95%; max-height: 200px; overflow-y: auto; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="msddlGroup"> <dl class="msddl_selectItem"> <dt> <a class="msddl_selectListToggle defaultSelected"> <input class="selectorCatcher" type="text"> <span class="msddl_selectedItems"></span> </a> </dt> <dd class="msddl_selectListFlyout"> <div class="msddl_selectList"> <ul> <li> <input type="checkbox" /> <label> Lorem ipsum dolor sit amet, consectetur adipiscing elit </label> </li> <li> <label> <input type="checkbox" /> Morbi porttitor nulla ut risus ultricies molestie. </label> </li> <li> <input type="checkbox" /> <label> Pellentesque eget egestas lorem, quis tincidunt justo </label> </li> <li> <input type="checkbox" /> <label> Fusce aliquam convallis ligula, et sagittis quam pellentesque ut </label> </li> <li> <input type="checkbox" /> <label> Nullam vel dapibus lacus </label> </li> <li> <input type="checkbox" /> <label> Nulla lectus metus, semper id libero quis, interdum efficitur quam </label> </li> <li> <input type="checkbox" /> <label> Nullam augue purus, aliquam vel odio at, fermentum pellentesque lectus </label> </li> </ul> </div> </dd> </dl> </div> 

Answer 1

You can add display: inline-block to the label elements, then limit their width so they don't wrap around:

.msddl_selectList label {
  display: inline-block;
  max-width: 80%;
  vertical-align: top;
}

 $(document).ready(function() { var el = $(".msddl_selectItem"); el.find(".msddl_selectListToggle").on("click", function() { var container = $(this).parents(".msddl_selectItem"); var list = container.find("ul"); if (list.is(":visible")) { list.slideUp("fast"); } else { list.slideDown("fast"); } }); }); 

 body { background: #eee; } /*msddl*/ .msddlGroup { display: block; float: left; margin: 0 0 0 1.6%; width: 32.26%; } .msddlGroup:first-child { margin-left: 0; } @media only screen and (max-width: 480px) { .msddlGroup { margin: -13px 0 0 0; width: 100%; } .msddlGroup:first-child { margin-top: 0; } } .msddl_selectItem dd { margin: 0px; padding: 0px; } .msddl_selectItem dt { cursor: pointer; } .msddl_selectItem { font-family: Arial; font-size: 9pt; background-color: #fff; color: Black !important; /*margin-left: 5px !important;*/ vertical-align: top; margin: 0; padding-bottom: 1px; outline: none; border: 1px solid #c0c0c0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .msddl_selectListToggle { display: block; } .selectorCatcher { border: 0px; border-image: none; width: 1px; background-color: transparent } .msddl_selectListToggleIcon { display: none; } .msddl_selectedCount { display: inline-block; } .msddl_selectList ul { border: 0; display: none; padding: 5px; list-style: none; } .msddl_selectList li { padding: 2px 0; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; } .msddl_selectList li:hover { background-color: rgba(81, 203, 238, 1); } .msddl_selectListFlyout .msddl_selectList { position: relative; } .msddl_selectListFlyout ul { background-color: #fff; margin: 0; display: none; position: absolute; top: 2px; min-width: 95%; max-height: 200px; overflow-y: auto; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } .msddl_selectList label { display: inline-block; max-width: 80%; vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="msddlGroup"> <dl class="msddl_selectItem"> <dt> <a class="msddl_selectListToggle defaultSelected"> <input class="selectorCatcher" type="text"> <span class="msddl_selectedItems"></span> </a> </dt> <dd class="msddl_selectListFlyout"> <div class="msddl_selectList"> <ul> <li> <input type="checkbox" /> <label> Lorem ipsum dolor sit amet, consectetur adipiscing elit </label> </li> <li> <input type="checkbox" /> <label> Morbi porttitor nulla ut risus ultricies molestie. </label> </li> <li> <input type="checkbox" /> <label> Pellentesque eget egestas lorem, quis tincidunt justo </label> </li> <li> <input type="checkbox" /> <label> Fusce aliquam convallis ligula, et sagittis quam pellentesque ut </label> </li> <li> <input type="checkbox" /> <label> Nullam vel dapibus lacus </label> </li> <li> <input type="checkbox" /> <label> Nulla lectus metus, semper id libero quis, interdum efficitur quam </label> </li> <li> <input type="checkbox" /> <label> Nullam augue purus, aliquam vel odio at, fermentum pellentesque lectus </label> </li> </ul> </div> </dd> </dl> </div> 

Answer 2

Wrap the input with the label like this:

 <label>
 <input type="checkbox"/>Nulla lectus metus, semper id libero quis, interdum efficitur quam
 </label>

add this to your css

label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}

and it will look like this http://jsfiddle.net/DIRTY_SMITH/k7z7sqay/20/

Answer 3

Here's a fiddle that seems to do the trick: https://jsfiddle.net/jessikwa/k7z7sqay/5/

Changes I made:

Within the li, the checkbox and label elements are wrapped in their own divs and class:

<li>
  <div class="msddl_checkbox">
    <input type="checkbox" />
  </div>
  <div class="msddl_label">
    <label>
      Nulla lectus metus, semper id libero quis, interdum efficitur quam
    </label>
  </div>
 </li>

Then, in the CSS I removed the styles for .msddl_selectListFlyout li div and added the following styles to the checkbox and label classes:

.msddl_label {
  clear: none;
  padding-left: 25px;
}
.msddl_checkbox {
  float: left;
}

Answer 4

You can float the elements themselves and then us the margin on the label to space it out from the checkbox:

.msddl_selectListFlyout li input {
    float: left;
    display: block;
}
.msddl_selectListFlyout li label {
    display: block;
    margin-left: 25px;
}

JSFIDDLE