Long file name -> broken UI about bs-custom-file-input HOT 15 CLOSED

You'll find a solution to that here: https://bs-custom-file-input.netlify.com/
See the example: Example with label containing a child

bsCustomFileInput accept one child in the label which will allow you to fix that 😉

<div class="custom-file">
  <input id="inputGroupFile04" type="file" class="custom-file-input" multiple="">
  <label class="custom-file-label" for="inputGroupFile04">
    <span class="d-inline-block text-truncate w-75">Choose several files</span>
  </label>
</div>

from bs-custom-file-input.

Hm, is there a way to truncate the text dynamically according to the current input fields width? We have a responsive page (thanks to Bootstrap) and don't really know the number of characters beforehand...

from bs-custom-file-input.

Yep you can detect the width of your image (with getBoundingClientRect) and set a fixed with for the custom input file label

from bs-custom-file-input.

I'm not following you, would you be so kind and adjust my jsFiddle accordingly?

from bs-custom-file-input.

Like that it can work, but I don't think it's your use case: https://jsfiddle.net/gvfmo3rz/

Can you create a jsfiddle with your use case (with the image) ?

from bs-custom-file-input.

There is no image, I don't know where you get the idea from :-) Your jsFiddle has w-75 which is limited to a fixed number of characters. We're looking for a solution which "just fits" regardless of the actual width of the file input control / label, as we don't know its width beforehand.

from bs-custom-file-input.

Don't think it's doable because you fixed a width at 500px, that's why I added .text-truncate to truncate the file name when it's to long

from bs-custom-file-input.

I just added the 500px for demonstration purposes. In our real page there is no given width, the input box is resized with the page size (it's a responsive page, smaller on small displays, bigger on big displays). So the content's width should be dynamically adjusted as well.

from bs-custom-file-input.

So you can use my JSFiddle, and it'll works because w-75 is equal to width: 75% so it'll be responsive

from bs-custom-file-input.

It only works if the page is not too small. If the "Browse" button takes more than 25% of the space it doesn't work anymore.

(sorry for all the confusion, I hope it's clear now - thanks for your efforts!)

from bs-custom-file-input.

You mean like that:

I think with some media query, you can override w-75 to fit your needs.

from bs-custom-file-input.

In my opinion all this stuff should be part of the bs-custom-file-input out-of-the-box-experience. I can't imagine anyone who wants to have long text overflowing the control. Every user of this extension needs to rework this so it doesn't wrap accidentally.

from bs-custom-file-input.

That's not the purpose of this plugin, this plugin dynamize bootstrap custom file input that's all.

If you have issues with Bootstrap custom file input responsiveness or the HTML Markup, you should try to find an open issue on Bootstrap repo or creating a new one.

from bs-custom-file-input.

Ah, now I understand. That's already a problem of the underlying Bootstrap file input control. Didn't realize that parts of that are already part of Bootstrap itself! Will report it at Bootstrap, thank you for your patience.

from bs-custom-file-input.

Bug created @ twbs/bootstrap#28897

from bs-custom-file-input.