Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

fix(forms): Fixes static form control #802

Closed

Conversation

andresgalante
Copy link
Member

This PR fixes static form control line-height for a correct alignment to labels

Closes #752

@vkrizan can you please confirm that this fixes the issue?

This Pr fixes static form control lineheight for a correct alignment to labels

752
@vkrizan
Copy link
Contributor

vkrizan commented Oct 24, 2017

Unfortunately no.

The form control static should match the height of its label in horizontal form and align with the label. Current fix (dea1a72) only touches sm/lg form groups, but it do not fixes the regular group.

Try adding this to form tests:

<h3 id="controls_static-controls">Static Control</h3>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-lg-2 control-label">Password</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="form-group-sm">
    <label for="inputPassword" class="col-lg-2 control-label">Form Group Small</label>
    <div class="col-lg-10">
      <p class="form-control-static">Static Control</p>
    </div>
  </div>
  <div class="form-group-lg">
    <label for="inputPassword" class="col-lg-2 control-label">Form Group Large</label>
    <div class="col-lg-10">
      <p class="form-control-static">Static Control</p>
    </div>
  </div>
</form>

From top:

  1. "Email" label has height of 20px and top padding of 3px vs. static control has height 23px and padding 3px on top and bottom.
  2. "Password" (regular form) depends on the input, which height is 26 px in total and the text in input and control label are aligned correctly.
  3. "Form Group Small" label has ~18px height with top padding of 3px. The form-group-sm does not behave as .row in .form-horizontal, but .form-group (without sm/lg) does! The static control has height of 25px and padding 3px on top and bottom.
  4. "Form Group Large" seems to be aligned correctly with your fix (line-height: @line-height-base;), but it still does not behave as .row.

I am not sure if the sm/lg form groups were designed for horizontal forms, since they do not have correct CSS. If we would fix the first static control for normal form group, I'd be very glad. Basically the .form-group .form-control.static should behave similar to the input. I am also not sure if it should also have a side padding as the inner value of the input and as the sm/lg groups have.

Thank you for looking into this!

@LHinson
Copy link
Member

LHinson commented Jul 6, 2018

Just wanted to make a note as I know this one has been sitting her awhile. @andresgalante will be picking this back up to see how we can get this one resolved.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

.form-control-static is not styled according to Patternfly
3 participants