question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Non-horizontal form-group using fieldset renders legend font-size different than label

See original GitHub issue

When using a <fieldset> as the root element of a non-horizontal .form-group (i.e. no .form-row or .row), the <legend> element renders differently than a <label> (specifically the font-size being set to 1.5rem via reboot)

<div class="form-group">
  <label for="input">Label</label>
  <input type="text" class="form-control">
</div>

<fieldset class="form-group">
  <legend>Foobar</legend>
  <div role="group">
    <div class="form-check form-check-inline">
      <input id="check1" class="form-check-input" type="checkbox" name="checks" value="A">
      <label for="check1" class="form-check-label">Radio A</label> 
    </div>
    <div class="form-check form-check-inline">
      <input id="check2" class="form-check-input" type="checkbox" name="checks" value="B">
      <label for="check2" class="form-check-label">Radio B</label> 
    </div>
  </div>
</fieldset>

Renders: image

Manually adding a style font-size: inherit; or font-size: 1rem; to the <legend> appears to fix this issue, but it would be preferential not to have to add the additional styling.

Proposed solution (to mimic <label> default) in /scss/_forms.scss before the .col-form-label rule definition:

.form-group legend {
  font-size: inherit;
}

Which renders the following (using the same above HTML): image

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
mdocommented, Dec 15, 2018

Oh I agree it should be improved, but overriding like that could cause issues for folks who’ve built around this existing behavior.

Since it is suggested it can be used on fieldsets, the form-group component should probably treat labels and legends the same stylistically.

Eh, just because a particular HTML element can have a class doesn’t mean something nested within that element should change. Again, I agree there should be some control here, just not in the solution offered here thus far.

In all likelihood, we should move from general label { ... } rulesets to .form-label { ... } to help avoid issues like this as we could just apply that class. Perhaps for now v4 should have label, .form-label { ... } or something akin?

0reactions
akrawchykcommented, Dec 4, 2019

@tmorehouse looks like a $legend-font-size variable was added to allow theming the default <legend> element: https://github.com/twbs/bootstrap/commit/855d763ae57fd1dea1c26af1f197d3d84002dc55#diff-d8ee409a461718bfb6240710c8c73382R345

Can this be backported to v4?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Form Group | Components - BootstrapVue
Easily add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text...
Read more >
Use Fieldset Legend with bootstrap - html - Stack Overflow
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with ......
Read more >
Forms - Bootstrap
Bootstrap's form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more...
Read more >
<fieldset>: The Field Set element - HTML - MDN Web Docs
The HTML element is used to group several controls as well as labels ( ) within a web form.
Read more >
Forms · Bootstrap - NC State Brand
form-inline as needed. Use it with <fieldset> s, <div> s, or nearly any other element. Example label.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found