Bootstrap: readonly-plain-text with button addon

[caiquecastro]

The readonly plain text doesnt work with button addon.

Live example: https://codepen.io/caiquecastro/pen/eMdmYo

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>

[patrickhlauke]

why would you use it this way? simply dropping the .input-group-prepend solves this of course. it's not really possible, to my knowledge, to rewrite styles so that the button takes account of an element that comes after it.

[patrickhlauke]

ah, i thought you meant the right-hand border of the button not being rounded, and missed the email showing on a new line...doh

[caiquecastro]

On the PR, maybe it's better if a padding is added to the .form-control-plaintext, but I didn't known the variable name responsible for this spacing.

[mdo]

I understand the desired affect here, but why would you do this? An input group is intended to visually connect button/text and form control.

[patrickhlauke]

i'd imagine for consistency if the form is read/write at one point/for certain users, but some of the fields are read-only after submission/for other users, so you can keep the scaffolding the same

[caiquecastro]

I have it readonly, but if I click it. I should remove its readonly state, and enable change the value.

[mdo]

Why not use only the readonly attribute then? If the idea is that at some point a user could interact with that field, I would think it should be a field from the beginning.

[patrickhlauke]

regardless of the specific use case here, though, i'd say the fix (or something similar to it) seems legit to me.

[Defatul]

Line 3316
append -> .input-group > .form-control-plaintext,

Line 3353
append -> .input-group > .form-control-plaintext:not(:last-child),

Line 3361
.input-group > .form-control-plaintext:not(:first-child),

Line 3441
.input-group-lg > .form-control-plaintext,

Line 3460
.input-group-sm > .form-control-plaintext,