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

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -