Custom file input label overflows input

[bbbenji]

• 4.18.16-arch1-1-ARCH adding o/ms gradient and unprefixed one #1 SMP PREEMPT Sat Oct 20 22:06:45 UTC 2018 x86_64 GNU/Linux
• Google Chrome Version 70.0.3538.77 (Official Build) (64-bit)
• Reduced test case

When the label for a custom file input is too long, it overflows the input.

A quick solution is to set label {overflow: hidden;}

However this presents a new problem when label {font-size: <1rem;}

You might ask why you would put such a long label if no one is going to see the whole thing anyway. But this use case can apply when the window is resized horizontally or a script is used which updates the label with the name of the selected file.

EDIT: Looks like best solution is to add the .text-truncate to the given label.

[Johann-S]

There is another solution you can add for example a span inside the label see my example: https://codepen.io/Johann-S/pen/ZmWGpM

To dynamize my input file I use : https://www.npmjs.com/package/bs-custom-file-input

[bbbenji]

You can just add .text-truncate to the label, no need for the span.

Thanks for showing me that class.

However, I believe this still to be a bug. We should not have to add an additional class.

[Johann-S]

Closed as duplicate of: #26933