form-check-inline and invalid-feedback rendering issue

[GBH]

This is a valid way to render inline inputs. In order to show invalid feedback we need to cram it on the last container there or it will be display: none. Obviously it renders like hell. (can't get JS bin to work, sorry)

<div class="form-check form-check-inline">
  <input class="form-check-input is-invalid" type="checkbox" value="x" name="user[test][]" id="user_test_x" />
  <label class="form-check-label" for="user_test_x">X</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input is-invalid" type="checkbox" value="y" name="user[test][]" id="user_test_y" />
  <label class="form-check-label" for="user_test_y">Y</label>
  <div class="invalid-feedback">is invalid</div>
</div>

I don't have a solution, just providing an example.

For server-side validations it's easy to override css and add display: block for invalid-feedback.

Demo: https://codepen.io/anon/pen/vdGNWo

[mdo]

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

---

This is a saved reply.

[GBH]

Sorry. Edited to add the demo: https://codepen.io/anon/pen/vdGNWo

[MindfulPol]

Encountered same issue, was looking if standard solution worked but I guess not since it's not in the documentation, with some css it can be fixed but it would be really nice if it was solved by default

[mlindberg2]

What was the fix with the css?

[GBH]

As long as invalid feedback is generated by the server. You can just add this css rule and everything should render acceptably:

.form-check.form-check-inline .invalid-feedback {
  display: block;
}

[mlindberg2]

Didn't work. Still shows up awkwardly within the div of the inline checkbox. :(

[mlindberg2]

If anyone is interested in one solution, I ended up using some javascript in the form validation,

if (!$("input:radio[name='multipleradiobuttonsetname']").is(":checked")) { $("#idforinvalidsmessage").css("display", "block"); } form.classList.add('was-validated');

and also at the bottom of the page,

`<script>

$(document).ready(function(){

$("input:radio[name='multipleradiobuttonsetname']").click(function(){
    $("#idforinvalidsmessage").css("display", "none");
	
});

});

</script>`

Not exactly elegant, but at least now the invalid feedback can be placed anywhere on the page and outside a radio div.

[mdo]

Might have to punt this as a can't fix—our options are extremely limited by styling based off the input (that's on purpose btw). Best case would be manually changing the display, but that's difficult with the flex styles we have on the inline form components. Other option would be using tooltips instead of plain text feedback.

Thoughts @twbs/css-review?