plain text misaligned in .form-horizontal>.form-group #8150

Closed
JensRantil opened this Issue Jun 12, 2013 · 10 comments

Comments

Projects
None yet
3 participants
@JensRantil

I am a big user of .form-horizontal <form>s. They allow me to beautifully present slightly longer forms in a table-like visual structure.

A common pattern that I use is that I would like to present static/constant data within my form. A use case is that I have an account page where I don't allow changing the username, but would allow the user to change the password. Other examples are database ID:s, UUID:s etc. My guess that this is also a common use case for other Bootstrap users.

One solution to overcome the above issue would be to simply set disabled="disabled" or readonly="readonly". My issue with these solutions is twofold:

  • By the look of them, they both hint to my user that there is a way to edit the username. They both kinda look like input boxes, but are grayed out and inmodifiable.
  • As of semantics, they are both contained in <input> tags. As a developer, it feels weird putting constants in <input> tags. They are clearly not input.

Another possible solution (modified from the documentation) is

<form class="bs-docs-example form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputUsername">Username</label>
    <div class="controls">
      JensRantil
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

which yields

screenshot3
. As you can see, form.form-horizontal has artefacts for constant text.

I've been visiting reading the W3C spec for disabled/readonly to understand their semantic intent, but the description is very technical. So far, I haven't understood whether any of them should cover my case.

If disabled is for the case of presenting constants, then I would propose Boostrap would style input:disabled as regular text without borders etc. However since I can't defer that from the spec, my proposal is a class that avoids the artefact in the screenshot, a .controls.controls-static class with correct margin..

I'd love to hear your input on this.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jun 12, 2013

Member

My approach in such cases has been to just use an input[disabled] with a special class and tweak the styling slightly:

input[disabled].uneditable,
input[readonly].uneditable {
  background-color: transparent;
  border-color: transparent;
  .box-shadow(none);
  cursor: auto;
}
Member

cvrebert commented Jun 12, 2013

My approach in such cases has been to just use an input[disabled] with a special class and tweak the styling slightly:

input[disabled].uneditable,
input[readonly].uneditable {
  background-color: transparent;
  border-color: transparent;
  .box-shadow(none);
  cursor: auto;
}
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jun 18, 2013

Member

If you can, please check out v3's new forms approach. There's no more dedicated .form-horizontal structure, but rather an extension of our new grid system. Let me know if you think we still need that new class and we can revisit.

Member

mdo commented Jun 18, 2013

If you can, please check out v3's new forms approach. There's no more dedicated .form-horizontal structure, but rather an extension of our new grid system. Let me know if you think we still need that new class and we can revisit.

@mdo mdo closed this Jul 2, 2013

@JensRantil

This comment has been minimized.

Show comment
Hide comment
@JensRantil

JensRantil Jul 25, 2013

If you can, please check out v3's new forms approach.

Is there a link somewhere on the web that has a previs of Bootstrap v. 3?

If you can, please check out v3's new forms approach.

Is there a link somewhere on the web that has a previs of Bootstrap v. 3?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 25, 2013

Member

@JensRantil No, not yet. You can clone the branch and view the docs locally though.

Member

cvrebert commented Jul 25, 2013

@JensRantil No, not yet. You can clone the branch and view the docs locally though.

@JensRantil

This comment has been minimized.

Show comment
Hide comment
@JensRantil

JensRantil Aug 2, 2013

@mdo Let me know if you think we still need that new class and we can revisit.

Now that getbootstrap.com is up I've had the opportunity to revisit this issue and I propose it it reoponed.

This is what I did: I scrolled down to the new .form-horizontal construct and replaced the e-mail <input ...> field with regular text. This was the result:
screen shot 2013-08-03 at 00 48 48

Adding the same padding-top as for the .control-label (9px) yields:
screen shot 2013-08-03 at 00 52 18
which looks much more balanced.

@cvrebert My approach in such cases has been to just use an input[disabled] with a special class and tweak the styling slightly: [...]

While your class construct works for simple cases, it does not handle cases when you would like to style your text in any way, such as

<span color="color: blue;">text</span> <span color="color: yellow;">in</span> <span color="color: red;">different color</span>

. Not mention adding images and other tags.

@mdo Let me know if you think we still need that new class and we can revisit.

Now that getbootstrap.com is up I've had the opportunity to revisit this issue and I propose it it reoponed.

This is what I did: I scrolled down to the new .form-horizontal construct and replaced the e-mail <input ...> field with regular text. This was the result:
screen shot 2013-08-03 at 00 48 48

Adding the same padding-top as for the .control-label (9px) yields:
screen shot 2013-08-03 at 00 52 18
which looks much more balanced.

@cvrebert My approach in such cases has been to just use an input[disabled] with a special class and tweak the styling slightly: [...]

While your class construct works for simple cases, it does not handle cases when you would like to style your text in any way, such as

<span color="color: blue;">text</span> <span color="color: yellow;">in</span> <span color="color: red;">different color</span>

. Not mention adding images and other tags.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 2, 2013

Member

It is fairly annoying that the grid doesn't currently "just work" here.

Member

cvrebert commented Aug 2, 2013

It is fairly annoying that the grid doesn't currently "just work" here.

@cvrebert cvrebert reopened this Aug 2, 2013

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 3, 2013

Member

This is less about the grid and more about the ability to have ready-to-go placeholder content in a form layout. I'm not sure I have a good solution because it depends entirely on whatever content you add. Open to suggestions, but aside from a generic margin or padding on some wrapper element to go within the form group, there's not much to do.

Member

mdo commented Aug 3, 2013

This is less about the grid and more about the ability to have ready-to-go placeholder content in a form layout. I'm not sure I have a good solution because it depends entirely on whatever content you add. Open to suggestions, but aside from a generic margin or padding on some wrapper element to go within the form group, there's not much to do.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 3, 2013

Member

Wrapper element seems reasonable, IMO. Just handling lightly marked-up text would probably cover quite a few use cases.
Finding a way to get the alignment right on just plain non-editable text in forms was a pain point in my last Bootstrap app.

Member

cvrebert commented Aug 3, 2013

Wrapper element seems reasonable, IMO. Just handling lightly marked-up text would probably cover quite a few use cases.
Finding a way to get the alignment right on just plain non-editable text in forms was a pain point in my last Bootstrap app.

@mdo mdo closed this in e23906f Aug 5, 2013

@cvrebert

This comment has been minimized.

Show comment
Hide comment
Member

cvrebert commented Aug 5, 2013

@mdo <3

@JensRantil

This comment has been minimized.

Show comment
Hide comment
@JensRantil

JensRantil Aug 5, 2013

👍 Thanks!

👍 Thanks!

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) Fixes #8150: add `.static-form-control` for vertical alignment…
… of static form text

- Also fixes the vertical alignment of labels in horizontal layouts on
account of the recent button and input padding changes
- Also changes the vertical alignment of the checkboxes and radios in
horizontal forms

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) Fixes #8150: add `.static-form-control` for vertical alignment…
… of static form text

- Also fixes the vertical alignment of labels in horizontal layouts on
account of the recent button and input padding changes
- Also changes the vertical alignment of the checkboxes and radios in
horizontal forms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment