CODEWITHSUNDEEP
twitter-bootstrap
pwaring
pwaring

Reputation: 3074

Line up labels and read only text in Twitter Bootstrap 2.0

I have a form with a mixture of editable and read-only fields which I want to style using Bootstrap. The editable fields are aligned correctly, but the read-only fields are not, as shown in this screenshot:

readonly field

The HTML I'm using is:

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

I don't want to show a read-only input for the fields which can't be edited, as users get confused/frustrated when they can't click in the box, and these are fields which can never be edited so it doesn't really make sense to show them as disabled/read-only. I just want the text to be displayed and aligned correctly with the label. Is there a way I can do this, either by using something in Bootstrap or overriding the default styles?

My question is similar to this one, which wasn't answered (at least not an answer to the original question), and as Bootstrap has had multiple releases in the past 7 months I thought it would be worth asking again in case anything had changed.

Upvotes: 47

Views: 41525

Answers (7)

IvanD
IvanD

Reputation: 8311

This is using chris vdp's answer and providing full HTML for people that did not find chris's answer blindingly obvious (like me and Eduardo in Norway).

I am potentially showing more code than needed, but I found that the above solutions were not at the 'copy-paste level' which I need most of the time. :-) I wanted to provide you with something I know works and can by pasted into your code in a blindingly obvious fashion. Just plunk this structure anywhere in the of your HTML.

Note: This works with and requires Bootstrap 3.

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>

Upvotes: 0

d512
d512

Reputation: 34233

If you're using Bootstrap 3, definitely use the form-control-static class. If that's not an option, you could use the control-label class and have another class that removes the bold font weight.

in your html:

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

in your css:

.static-text {
    font-weight: normal;
}

Just make sure you list the static-text class after control-label on the class attribute in your html. That is so that it will override the font-weight established by control-label.

In your case you might also want to adjust the font size.

Of course, if bootstrap ever changes the CSS properties on the control-label class, you might have to go back and adjust your static-text class.

Upvotes: 2

Sincere
Sincere

Reputation: 477

To add to Simon's post, I added display: inline-block; to the CSS.

This is to match the display of the label and the text.

Upvotes: 1

Nino van Hooff
Nino van Hooff

Reputation: 3893

Like @pwaring said, for me more styling was needed as well:

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>

Upvotes: 1

chris vdp
chris vdp

Reputation: 2842

As of bootstrap 3.0 a class has been added to handle this

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-static class on a <p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>

Upvotes: 114

000
000

Reputation: 3950

You can extend the controls class:

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

and then using it like this:

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>

Upvotes: -1

Simon Cunningham
Simon Cunningham

Reputation: 5550

Create your own style and apply it as below -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap doesn't cover every eventuality and you will need to make your own styles.

Upvotes: 22

Related Questions