Skip to content
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.

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

Validation error for inline radios #26407

Closed
vpratfr opened this issue Apr 27, 2018 · 6 comments
Closed

Validation error for inline radios #26407

vpratfr opened this issue Apr 27, 2018 · 6 comments
Labels

Comments

@vpratfr
Copy link

vpratfr commented Apr 27, 2018

I have a group of radio buttons displayed inline.

Problem is that the error message shows up right after the last option.

It should instead display below the inlined radios.

Below is the snippet to reproduce :

<div class="form-group">
    <div class="radio-group" id="inline_radio_field_radio_group" aria-describedby="inline_radio_field_helptext">
        <div class="custom-control-inline custom-control custom-radio">
            <input class="custom-control-input is-invalid" type="radio" name="inline_radio_field"
                   id="inline_radio_field_choice_1" value="choice_1">
            <label class="custom-control-label" for="inline_radio_field_choice_1">Choice 1</label>
        </div>
        <div class="custom-control-inline custom-control custom-radio">
            <input class="custom-control-input is-invalid" type="radio" checked="checked" name="inline_radio_field"
                   id="inline_radio_field_choice_2" value="choice_2">
            <label class="custom-control-label" for="inline_radio_field_choice_2">Choice 2</label>
        </div>
        <div class="custom-control-inline custom-control custom-radio">
            <div class="invalid-feedback">This is an error below the inline radio group</div>
            <input class="custom-control-input is-invalid" type="radio" name="inline_radio_field"
                   id="inline_radio_field_choice_3" value="choice_3">
            <label class="custom-control-label" for="inline_radio_field_choice_3">Choice 3</label>
            <div class="invalid-feedback">This is an error below the inline radio group</div>
        </div>
    </div>
    <small class="text-muted" id="inline_radio_field_helptext">... and another radio group, shown inline this time
    </small>
</div>
@Johann-S
Copy link
Member

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

@vpratfr
Copy link
Author

vpratfr commented Apr 27, 2018

Here you go: https://jsfiddle.net/pd5w2ha8/

Thanks :)

@mdo
Copy link
Member

mdo commented Apr 29, 2018

We could look at providing a demo for this, but essentially you need to hack flexbox into submission with a random width: 100% element between the last input and the feedback message.

@anumalasri
Copy link

anumalasri commented Sep 19, 2018

As it's been few months, we would like to know what is road map and when can we expect an update ?

@mdo
Copy link
Member

mdo commented Sep 19, 2018

Not to be too snarky, but if there was an update, you'd see it reflected here :).

@mdo
Copy link
Member

mdo commented Jul 10, 2019

Duplicate of #25540.

@mdo mdo closed this as completed Jul 10, 2019
mdo added a commit that referenced this issue Jul 10, 2019
mdo added a commit that referenced this issue Jul 12, 2019
* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too
patrickhlauke pushed a commit that referenced this issue Jul 13, 2019
* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants