Bootstrap: v4 form input issues

[josephzidell]

Two separate issues noticed on Windows 10, in Chrome 60, Firefox 54.0.1, Edge 38. I noticed these in the docs

1. A <select class="form-control form-control-lg"> needs more height
   

2. Text color is inconsistent between a disabled input vs. select
   

[Yeswanth-JG]

I came to report this. For select element below styles might update as below...

Base Style for form-control-lg

.form-control-lg, .input-group-lg>.form-control,
.input-group-lg>.input-group-addon,
.input-group-lg>.input-group-btn>.btn {
    padding: 0.6rem 1rem; /* updated */
    font-size: 1.15rem; /* updated */
    line-height: 1.4; /* updated */
    border-radius: .3rem;
}

height update for form-control

select.form-control:not([size]):not([multiple]) {
    height: calc(2.45rem + 2px);
}

height update for form-control-lg

.input-group-lg>.input-group-btn>select.btn:not([size]):not([multiple]),
.input-group-lg>select.form-control:not([size]):not([multiple]),
.input-group-lg>select.input-group-addon:not([size]):not([multiple]), select.form-control-lg:not([size]):not([multiple]) {
    height: calc(3.1rem + 2px);
}

System Details --

Win 7
Chrome - 59.0.3071.115

Above changes update the controls as below.

[projct1]

Yea, text is cutting http://joxi.ru/LmG3P9GIRZJPom http://joxi.ru/eAO4PzGt4GpPbr

[jonnysp]

Not only the select, also the input, under line glyphs does not display correctly

[Johann-S]

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

[jonnysp]

@Johann-S
https://output.jsbin.com/moyujufara
on latest firefox win 10

[josephzidell]

Regular <select>s are also cutoff https://jsbin.com/sixiqaruxe/edit?html,output

[TravellerSam]

Firefox 55/Linux cuts the input with the standard 1.25 line-height. Here an example of a number field:

Setting the line-height slightly higher to 1.35 fixes the issue:

[kjdion84]

Stop closing issues that haven't been addressed or even mentioned in regards to fixing.

[patrickhlauke]

@kjdion84 please look at what is being closed, what is being kept open, and what's being cross-referenced and consolidated as a single issue (in this case, THIS one). all you're doing now is generating more noise for people to wade through.

[kjdion84]

Having fundamental issues such as text being cutoff in every single <select> is worth generating more noise about because its ridiculous that this hasn't been fixed yet.

[patrickhlauke]

you seem to misunderstand the idea of how open source run by volunteers works. feel free to send a pull request with fixes.

[jrysig]

Note that this problem can be reproduced with free Windows virtual machines from Microsoft, see https://github.com/twbs/bootstrap/issues/23769#issuecomment-331377830

[dracos]

Note I believe the issue of height cut off was fixed by https://github.com/twbs/bootstrap/pull/23150 as there is a bug with the form-control-lg height in the current beta (which the above examples are using). I'm afraid it's quite hard to work this out from the git history though. [EDIT: that only refers to the main issue with -lg, default ones are still cut-off.]

The padding issue of #24043 (marked as duplicate of this) is still present in current v4-dev. This has a couple of parts:

• Options have a little bit of unremovable magic left padding in Chrome, Firefox, (maybe Safari?);
• Padding on select is e.g. ignored on desktop Chrome and Safari (but is followed in Firefox), and (sort of) honoured on Android Chrome.
  So the left padding needs to be 3px(?) less for selects than inputs in order to align with text inputs, except it still won't in desktop Chrome/Safari as they ignore it whatever it is. The only way everything could always line up would be if the left-padding was fixed, at whatever size, at whatever desktop Chrome/Safari are using as their unchangeable value.

[Johann-S]

already fixed with our last dist files see for the <select> : https://codepen.io/Johann-S/pen/MEpBdR

[kjdion84]

It isn't fixed properly. The issue still exists for even normal selects in Chrome on Windows. Characters are still being cut off as the text is still not centered vertically properly.

Proof fiddle: https://codepen.io/anon/pen/WZpPPp
Proof image:

[dracos]

On IE11 on Windows, a <select class="custom-select"> is fine, whereas <select class="form-control"> is cut off. The custom-select has less top/bottom padding, but the same height. The padding on custom-select leaves 1.5rem for the text, the form-control leaves 1.25rem.

[mdo]

Can y'all test out the changes in #24199?

[jrysig]

24199 looks good! Tested with latest DEV Bootstrap version.

W7 and IE11:

W7 and Chrome:

[jrysig]

There is one problem in DEV Bootstrap version:

Windows 7, Internet Explorer 11, see different input and input-group-addon height

It works fine in latest Chrome and Firefox. Should I report it as a separate issue?

[dracos]

• #24199 does fix the default form-control being cut off at the bottom, yes :-)
• The disabled text colour being different for inputs/selects (original issue part 2) is still present
• The left-padding being different for different controls (#24043, closed as a dupe of this) is still present, but as I commented at https://github.com/twbs/bootstrap/issues/23347#issuecomment-332493174 it doesn't really sound easily fixable.

Thanks!

(@jrysig, my personal suggestion would be yes to a separate issue, makes it easier to track.)

[kjdion84]

@mdo it looks much better and also scales well with -lg. Please merge ASAP.

[mdo]

@jrysig That should be fixed as of #23810.

[mdo]

@josephzidell @dracos The different text color is because the <input> is using a placeholder vs the select menu showing an <option>. Selects don't support placeholder attributes.

[dracos]

@mdo Makes sense! The original text of this issue is fixed, therefore, yes, the only issue is the left padding.