CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
TastyCode
TastyCode

Reputation: 5799

Label and text not aligning properly on text overflow in bootstrap

I have an inline label and readonly text. When readonly text overflows it goes under the label. I would like text to not go under label.

This is what i am getting:

incorrect overflow

Where as i would like:

ok

 <div class="row">
        <div class="col-md-4">
                <h4 class="text-muted">Employer Information</h4>
                <div class="form-inline word-wrap">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong><bean:write name="myform" property="name" /></strong>
                </div>
            .........
         </div>
       </div>

word-wrap class is as follows:

.word-wrap {
    word-wrap: break-word;
}

Upvotes: 0

Views: 1798

Answers (4)

Kristen Waite
Kristen Waite

Reputation: 1465

If you want the text to wrap but are not concerned with the <strong> content indenting to another column, you should change your .word-wrap class to contain word-break: break-all; (and that's all you need):

.word-wrap {
    word-break: break-all;
}

And then enclose your elements with the .form-group class (you need to use .control-label for your label): 

 <div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
            <div class="form-inline word-wrap">
                <div class="form-group">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
                </div>
            </div>
        .........
     </div>
 </div>

http://www.bootply.com/ST1AlByo4g

However, if you want the entire contents of <strong> indented, you are better off creating another set of columns - and then apply .word-wrap class to the <strong> element or a wrapper:

<div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
    </div>
</div>
<div class="row">
    <div class="col-md-1 col-xs-1">
        <label class="control-label label-normalWeight">Name</label>
    </div>
    <div class="col-md-3 col-xs-3">
        <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
    </div>
</div>

http://www.bootply.com/JLnvtz9o4i

Upvotes: 3

Deja Vu
Deja Vu

Reputation: 731

<div class="row">
  <form class="form-horizontal">
    <div class="col-md-4">
      <h4 class="text-muted">Employer Information</h4>
      <div class="form-group">
        <label class="control-label col-sm-2" for="your_id_here">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="your_id_here">
        </div>
      </div>
    </div>
<!-- more fields -->      
  </form>
</div>

Bootply.

If you decide to stay with <strong>, just add form-control class to it and it shall align properly.

Upvotes: 2

Keerthi
Keerthi

Reputation: 923

<div class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    dsfdsfdsfdfdsfASSs
  </div>

</div>

http://www.bootply.com/KK1MlNLy5V

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

If word-break: break-all or word-wrap:break-word doesn't work, probably your white-space is set to nowrap.

Try setting:

white-space:normal;

Upvotes: 0

Related Questions