Bootstrap 4 Framework uses wrong classes for input group & no classes for checkbox

[marvinschroeder]

There were currently two bugs with the Bootstrap 4 framework. Tested in Bootstrap v4.1.3 and v4.3.1 (latest) and used in Laravel 5.7.*

Input Group with Append

Problem: appended/prepended text is not displaying correctly because of wrong class "input-group-addon".

Line used:

Former::text('test')->append('€');

Renders:

<div class="form-group">
 <div class="input-group">
  <input class="form-control" id="test" type="text" name="test">
  <span class="input-group-addon">€</span>
 </div>
</div>

Expected:

<div class="form-group">
  <div class="input-group">
    <input class="form-control" id="test" type="text" name="test">
    <div class="input-group-append">
      <span class="input-group-text">€</span>
    </div>
  </div>
</div>

Checkbox

Problem: small displaying tweaks because of missing classes for input and label.

Line used:

Former::checkbox('test')->text('Test');

Renders:

<div class="form-group">
  <div class="form-check">
    <input id="test" type="checkbox" name="test" value="1">
    <label for="test" class="">Test</label>
  </div>
</div>

Expected:

<div class="form-group">
  <div class="form-check">
    <input class="form-check-input" id="test" type="checkbox" name="test" value="1">
    <label for="test" class="form-check-label">Test</label>
  </div>
</div>

[claar]

Thanks so much! Any chance you'd be willing to submit a PR?

[marvinschroeder]

Unfortunately, I currently do not have the time to submit a PR. In the meantime i found another bug with the Bootstrap 4 checkbox:

Line used:

Former::checkbox('test')->text('Test');

Rendered with invalid feedback:

<div class="form-group is-invalid">
  <div class="form-check">
    <input id="test" type="checkbox" name="test" value="1">
    <label for="test" class="">Test</label>
  </div>
  <div class="invalid-feedback">Error message.</div>
</div>

Expected with invalid feedback:

<div class="form-group is-invalid">
  <div class="form-check">
    <input class="form-check-input" id="test" type="checkbox" name="test" value="1">
    <label for="test" class="form-check-label">Test</label>
    <div class="invalid-feedback">Error message.</div>
  </div>
</div>

Solution: place .valid-/.invalid-feedback inside .form-check to actually display the feedback message.

[mrextreme]

I ran into the same issue. Hacked the code, it works nicely so i can continue developing our app while this gets fixed the proper way, and released.

in Former/Form/Group.php, find protected function placeAround($items, $place) at the bottom of the file, and replace this line $item = $this->app['former.framework']->placeAround($item); with this $item = $this->app['former.framework']->placeAround($item, $place);

in Former/Framework/TwitterBootstrap4.php, find public function placeAround($item) and replace it with public function placeAround($item, $place=null) and the last line of the function return Element::create( ... with return Element::create('div', "<div class=\"input-group-text\">{$item}</div>")->addClass('input-group-'.$place);

edit: actually, it should be addClass( 'input-group-' . $place ?? $class );

[claar]

Thanks, @mrextreme ! Now we just need someone to package up the above into a PR with tests -- any takers?

[mrextreme]

edited my comment above to be backwards-compatible

[CedNet]

Can I please ask that you merge my PR to fix the issue with the wrong class for checkboxes and radios?

Fine if the code is altered. Just need the checkbox styling to work properly for Bootstrap 4.

[claar]

@CedNet Done.

[darrencoutts118]

Has there been any movement on getting a PR together for fixing this?