bootstrap Input group rendering problem

[stloc]

Describe the bug bootstrap Input group rendering problem

To Reproduce easyadmin v3.2.9

https://getbootstrap.com/docs/5.1/forms/input-group/

[cedricgeffroy]

I asked the question some time ago on Slack without success. This is what I was working with at that time. But I ended up removing them for now.

<div class="field-number form-group">
    {{ form_label(edit_form.weight) }}
    <div class="input-group form-widget" style="display: contents">
        {{ form_widget(edit_form.weight) }}
        <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">Kg</span>
        </div>
    </div>
    {{ form_errors(edit_form.weight) }}
</div>

[cedricgeffroy]

More info here : https://github.com/EasyCorp/EasyAdminBundle/pull/2843

[fdiedler]

Hello,

Same problem with EA v4.0.6 with Bootstrap 5 layout :(

[fdiedler]

@javiereguiluz I investigated and found the issue with Bootstrap rendering input groups. You need to set the height property of "input-group-text" to "auto" (or remove the property).

As a workaround :

.input-group-text {
   height: auto;
}

[webbird]

Same here. (Just saying to get updates from this issue.)

[AmProsius]

I can't reproduce this as of v4.6.5:

@javiereguiluz This issue can possibly be closed.