jquery - Prevent text from wrapping around input -
i have simple multi select drop down list i'm trying checkbox , label stay inline each other, without label text wrapping around checkbox. below code shows issue i'm having. in this fiddle tried wrapping checkbox , label each in own div , floating them, causes label break 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 screen , (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: 0.1s ease; -moz-transition: 0.1s ease; -ms-transition: 0.1s ease; -o-transition: 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>
you can add display: inline-block
label
elements, limit width 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 screen , (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: 0.1s ease; -moz-transition: 0.1s ease; -ms-transition: 0.1s ease; -o-transition: 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>
Comments
Post a Comment