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

.form-control-static is not styled according to Patternfly #752

Open
vkrizan opened this issue Sep 18, 2017 · 3 comments
Open

.form-control-static is not styled according to Patternfly #752

vkrizan opened this issue Sep 18, 2017 · 3 comments
Assignees
Labels

Comments

@vkrizan
Copy link
Contributor

vkrizan commented Sep 18, 2017

.form-control-static CSS class does not seems to be styled according ti Patternfly standards. The class exists, but inherits values from Bootstrap. The problem is that the min-height is too high (32px). It leads to mismatched rows in case of horizontal forms in two or more columns. To fix this issue the min-height rule could be removed or set to auto.

.form-control-static is already included in Test Pages (see Static Control).

Example with .control-label:

<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-4">Text:</label>
        <span class="col-sm-6 form-control-static">
            Static Text
        </span>
    </div>
</form>

Thank you!

@andresgalante
Copy link
Member

Hi @vkrizan Thanks for reporting this.

Do have time to create an instance of that in the test pages and send a PR with a fix?

@andresgalante
Copy link
Member

Hey @vkrizan this has been open for ever, sorry.

I don't think there was ever a clear solution for it, would you mind putting together a codepen or a preview so we can see the problem and fix it?

@vkrizan
Copy link
Contributor Author

vkrizan commented Aug 24, 2018

Hi @andresgalante, the solution should be to match properties of a label next to .form-control-static. On [Test Pages[(https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/forms.html) you can see that p.form-control-static does not match the height of the label: has higher min-height set, and has a bottom padding set.

screenshot_2018-08-24 forms - patternfly

These are the changes, that should fix it:

.form-control-static {
   min-height: auto;  /* or remove */
   padding-bottom: 0;  /* or remove */
}

Result:
screenshot_2018-08-24 forms - patternfly 1

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

Successfully merging a pull request may close this issue.

2 participants