Skip to content

Form validation labels not coloring #20535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
hiddewie opened this issue Aug 17, 2016 · 3 comments
Closed

Form validation labels not coloring #20535

hiddewie opened this issue Aug 17, 2016 · 3 comments
Labels
css feature

Comments

@hiddewie
Copy link

Required behaviour:

The labels of a form element with a validation class, like has-danger, are highlighted in the validation colour, like red.

Observed behaviour:

There is no colour change. It seems .has-danger .col-form-label has no associated styles.

Screenshot:
2

Details:

BS 4: Alpha 3
OS: Windows 10, x64 (10.0.10586 Build 10586)
Browser: Chrome 52.0.2743.116 m, Firefox 48.0, Microsoft Edge 25.10586.0.0

CodePen: http://codepen.io/anon/pen/XKGVaR
@twbs-lmvtfy
Copy link

Hi @hiddewie!

You appear to have posted a live example (http://codepen.io/anon/pen/XKGVaR.html), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 8, column 1 thru column 6: Stray start tag html.
  • line 10, column 1 thru column 6: Stray start tag head.
  • line 11, column 3 thru column 26: Attribute charset not allowed on element meta at this point.
  • line 11, column 3 thru column 26: Element meta is missing one or more of the following attributes: content, itemprop, property.
  • line 11, column 3 thru column 26: A document must not include more than one meta element with a charset attribute.
  • line 12, column 3 thru column 9: Element title not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
  • line 15, column 3 thru column 9: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
  • line 20, column 1 thru column 7: Stray end tag head.
  • line 22, column 1 thru column 6: Start tag body seen but an element of the same type was already open.
  • line 41, column 109 thru column 117: Element option without attribute label must not be empty.
  • line 92, column 139 thru column 147: Element option without attribute label must not be empty.
  • line 95, column 34 thru column 42: Element option without attribute label must not be empty.
  • line 127, column 112 thru column 120: Element option without attribute label must not be empty.
  • line 143, column 1 thru column 7: Stray end tag body.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@hiddewie hiddewie mentioned this issue Aug 17, 2016
Closed
@mdo
Copy link
Member

mdo commented Oct 9, 2016

Apply .form-control-label to the label and you'll be set. I missed this in our docs, but it's coming in #20872.

@mdo mdo closed this as completed Oct 9, 2016
@hiddewie
Copy link
Author

Thank you!

@hiddewie hiddewie mentioned this issue Feb 24, 2017
Merged
fabpot added a commit to symfony/symfony that referenced this issue Oct 1, 2017
@fabpot
feature #21751 Bootstrap4 support for Twig form theme (hiddewie, javi…
8c35d91 
…ereguiluz)

This PR was merged into the 3.4 branch.

Discussion
----------

Bootstrap4 support for Twig form theme

**This PR is a followup from #19648. That PR was closed because GitHub thought my branch contained no commits after a force push...**

| Q | A |
| --- | --- |
| Branch? | master |
| Bug fix? | no |
| New feature? | yes |
| BC breaks? | no |
| Deprecations? | no |
| Tests pass? | yes |
| Fixed tickets | #16289 |
| License | MIT |
| Doc PR | - |

I have made a port of the Twig form theming code for Bootstrap 3 to the α-5 version of Bootstrap 4.
- The (inheritance) structure of the form theming files has changed because a number of blocks are the same between BS 3 and 4. They have been migrated to `bootstrap_base_layout.html.twig`.
  The new tree is as follows:

```
bootstrap_base_layout.html.twig
|-- bootstrap_3_layout.html.twig
|   `-- bootstrap_3_horizontal_layout.html.twig
`-- bootstrap_4_layout.html.twig
    `-- bootstrap_4_horizontal_layout.html.twig
```
- Any occurances of `.form-horizontal` have been removed from the BS 4 code.
- Checkboxes and radio buttons have been stacked using the `.form-check`, `.form-check-label` and `.form-check-input` classes. There is now no distinction between checkboxes and radio buttons in the markdown.
- All layout tests have been added and updated for BS4. The inheritance tree is as follows:

```
AbstractLayoutTest
`-- AbstractBootstrap3LayoutTest
    |-- AbstractBootstrap3HorizontalLayoutTest
    `-- AbstractBootstrap4LayoutTest
        `-- AbstractBootstrap4HorizontalLayoutTest
```

All tests pass. The classes `FormExtensionBootstrap4LayoutTest` and `FormExtensionBootstrap4HorizontalLayoutTest` have been created similarly to the BS 3 versions.
- ~~The label coloring on an validation is not correct. I've made an issue (twbs/bootstrap#20535) of the problem.~~
- No [custom form elements](http://v4-alpha.getbootstrap.com/components/forms/#custom-forms) have been used.
- A docs PR can be created if this PR is accepted.
- The new code might have to be updated if large changes occur in the BS 4 α.

Screenshot of BS3 and 4 comparison for the same form:

![1](https://cloud.githubusercontent.com/assets/1073881/17732594/dfcb50d6-6472-11e6-8e96-c46987809322.PNG)

Commits
-------

f12e588 Removed unneeded wrapping quotes around a Twig key
709f134 Removed unneeded wrapping quotes around a Twig key
4222d54 Initial commit for Bootstrap 4 form theme, based on Bootstrap 3 form theme
symfony-splitter pushed a commit to symfony/form that referenced this issue Oct 1, 2017
@fabpot
feature #21751 Bootstrap4 support for Twig form theme (hiddewie, javi…
7286f94 
…ereguiluz)

This PR was merged into the 3.4 branch.

Discussion
----------

Bootstrap4 support for Twig form theme

**This PR is a followup from #19648. That PR was closed because GitHub thought my branch contained no commits after a force push...**

| Q | A |
| --- | --- |
| Branch? | master |
| Bug fix? | no |
| New feature? | yes |
| BC breaks? | no |
| Deprecations? | no |
| Tests pass? | yes |
| Fixed tickets | #16289 |
| License | MIT |
| Doc PR | - |

I have made a port of the Twig form theming code for Bootstrap 3 to the α-5 version of Bootstrap 4.
- The (inheritance) structure of the form theming files has changed because a number of blocks are the same between BS 3 and 4. They have been migrated to `bootstrap_base_layout.html.twig`.
  The new tree is as follows:

```
bootstrap_base_layout.html.twig
|-- bootstrap_3_layout.html.twig
|   `-- bootstrap_3_horizontal_layout.html.twig
`-- bootstrap_4_layout.html.twig
    `-- bootstrap_4_horizontal_layout.html.twig
```
- Any occurances of `.form-horizontal` have been removed from the BS 4 code.
- Checkboxes and radio buttons have been stacked using the `.form-check`, `.form-check-label` and `.form-check-input` classes. There is now no distinction between checkboxes and radio buttons in the markdown.
- All layout tests have been added and updated for BS4. The inheritance tree is as follows:

```
AbstractLayoutTest
`-- AbstractBootstrap3LayoutTest
    |-- AbstractBootstrap3HorizontalLayoutTest
    `-- AbstractBootstrap4LayoutTest
        `-- AbstractBootstrap4HorizontalLayoutTest
```

All tests pass. The classes `FormExtensionBootstrap4LayoutTest` and `FormExtensionBootstrap4HorizontalLayoutTest` have been created similarly to the BS 3 versions.
- ~~The label coloring on an validation is not correct. I've made an issue (twbs/bootstrap#20535) of the problem.~~
- No [custom form elements](http://v4-alpha.getbootstrap.com/components/forms/#custom-forms) have been used.
- A docs PR can be created if this PR is accepted.
- The new code might have to be updated if large changes occur in the BS 4 α.

Screenshot of BS3 and 4 comparison for the same form:

![1](https://cloud.githubusercontent.com/assets/1073881/17732594/dfcb50d6-6472-11e6-8e96-c46987809322.PNG)

Commits
-------

f12e5887ff Removed unneeded wrapping quotes around a Twig key
709f134dc8 Removed unneeded wrapping quotes around a Twig key
4222d54a53 Initial commit for Bootstrap 4 form theme, based on Bootstrap 3 form theme
symfony-splitter pushed a commit to symfony/twig-bridge that referenced this issue Oct 1, 2017
@fabpot
feature #21751 Bootstrap4 support for Twig form theme (hiddewie, javi…
20e4150 
…ereguiluz)

This PR was merged into the 3.4 branch.

Discussion
----------

Bootstrap4 support for Twig form theme

**This PR is a followup from #19648. That PR was closed because GitHub thought my branch contained no commits after a force push...**

| Q | A |
| --- | --- |
| Branch? | master |
| Bug fix? | no |
| New feature? | yes |
| BC breaks? | no |
| Deprecations? | no |
| Tests pass? | yes |
| Fixed tickets | #16289 |
| License | MIT |
| Doc PR | - |

I have made a port of the Twig form theming code for Bootstrap 3 to the α-5 version of Bootstrap 4.
- The (inheritance) structure of the form theming files has changed because a number of blocks are the same between BS 3 and 4. They have been migrated to `bootstrap_base_layout.html.twig`.
  The new tree is as follows:

```
bootstrap_base_layout.html.twig
|-- bootstrap_3_layout.html.twig
|   `-- bootstrap_3_horizontal_layout.html.twig
`-- bootstrap_4_layout.html.twig
    `-- bootstrap_4_horizontal_layout.html.twig
```
- Any occurances of `.form-horizontal` have been removed from the BS 4 code.
- Checkboxes and radio buttons have been stacked using the `.form-check`, `.form-check-label` and `.form-check-input` classes. There is now no distinction between checkboxes and radio buttons in the markdown.
- All layout tests have been added and updated for BS4. The inheritance tree is as follows:

```
AbstractLayoutTest
`-- AbstractBootstrap3LayoutTest
    |-- AbstractBootstrap3HorizontalLayoutTest
    `-- AbstractBootstrap4LayoutTest
        `-- AbstractBootstrap4HorizontalLayoutTest
```

All tests pass. The classes `FormExtensionBootstrap4LayoutTest` and `FormExtensionBootstrap4HorizontalLayoutTest` have been created similarly to the BS 3 versions.
- ~~The label coloring on an validation is not correct. I've made an issue (twbs/bootstrap#20535) of the problem.~~
- No [custom form elements](http://v4-alpha.getbootstrap.com/components/forms/#custom-forms) have been used.
- A docs PR can be created if this PR is accepted.
- The new code might have to be updated if large changes occur in the BS 4 α.

Screenshot of BS3 and 4 comparison for the same form:

![1](https://cloud.githubusercontent.com/assets/1073881/17732594/dfcb50d6-6472-11e6-8e96-c46987809322.PNG)

Commits
-------

f12e5887ff Removed unneeded wrapping quotes around a Twig key
709f134dc8 Removed unneeded wrapping quotes around a Twig key
4222d54a53 Initial commit for Bootstrap 4 form theme, based on Bootstrap 3 form theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mdo @hiddewie @twbs-lmvtfy