user1861065 user1861065 - 7 days ago 7
CSS Question

Bootstrap input Group

I have a checkbox with a label in a input-group. And when I have a long text in the label it looks like

enter image description here

What can I do, that the input-group will resize, that the text will fit into it?

This is my code:

<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<label type="text" class="form-control">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label>
</div>
</div>




Thanks for help...

Answer

You could do like this:

.noFloat {
  float: none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
    <div class="col-xs-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
            <label type="text" class="form-control noFloat">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label>
        </div>
    </div>
</div>

Close the "row" div

Remove float property from the label, adding the noFloat class

This is not the best solution but maybe fits what you need.

Comments