Comments (15)
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.
Related Issues (20)
- Missing export HOT 2
- disable drag & drop?
- Implementation with multiple file pickers on the same form
- Remove Source-Maps for Production Builds
- Doesn't work with bootstrap 5 HOT 1
- Is it a problem if we call bsCustomFileInput.init() again after an ajaxSuccess event? HOT 2
- `destroy` should be able to specify a specific element, not wipe out the entire documents custom ones
- Label text overflows when uploading multiple files in iOS Safari HOT 1
- Bootstrap v5 compatibility HOT 1
- Add Bootstrap 5 support HOT 2
- Label descendants are removed or "concatenated" HOT 1
- When to call bsCustomFileInput.init() in a react app (when using in a Modal dialog)?
- How to use if( typeof $.fn.filestyle!== 'undefined' && $.isFunction($.fn.filestyle) ){
- How to remove selected file? HOT 3
- Drag and drop doesn't work if character size is changed in Safari
- Display number of items instead of their name on multiple inputs HOT 2
- Not able to make this work - no filename. Script and HOT 1
- ReferenceError: window is not defined
- Feature: file size validation
- Support Bootstrap 5 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bs-custom-file-input.