New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issues with responsive width #3278
Comments
What I was seeing, is that the 100% width is being converted into 100px. Hence the loss in responsiveness. Are your element initially hidden ? I was setting the option width to 100% |
No, they are not initially hidden. I will look at that options.width to see if it works for me. |
I've found that if you have select 2 in a hidden div, when you later reveal that div the width is wrong, is there a method to re-initialise the positioning? |
Temporary workaround is to specify width in the init() I can get away with this as all mine happen to work fine 100% width.
|
Also having this issue. Have a select2 (v4) in a Bootstrap v3 accordion panel that is closed on page load. When I expand the panel for the first time, the width of the placeholder text is set to 100px even though the select2 element is much wider based on the markup and the browser window size. After I enter one or two values and then delete them, the placeholder displays correctly. My HTML markup is The select2 is getting remote data via Ajax, in case it matters. Also using the bootstrap theme for select2. This is happening on a desktop (IE 11), and I am not changing the display/window size, so I don't think this can be dismissed by saying select2 is not responsive. Setting width to 100% as recommended above does not seem to fix this. |
I have the same problem using https://github.com/select2/select2-bootstrap-theme // Select2
$('#mySelect').select2({
theme: "bootstrap",
placeholder: 'Categorias...',
allowClear: true,
tags: true,
maximumSelectionLength: 3,
width: '100%'
}); html <div class="form-group">
<label class="sr-only" for="categorias">Categorias</label>
<select id="mySelect" class="form-control" style="width: 100%;" multiple="multiple">
<option>Tour de Compras</option>
<option>Guia</option>
<option>Internacional</option>
<option>Desayuno</option>
<option>Traslados</option>
</select>
</div> |
I have problem with select tag .i.e when i resize the windows , it doesn't work, doesn't show the options list. |
I use the select2-bootstrap-theme and with this simple hack why not allow a an option Select2.prototype._resolveWidth = function ($element, method) {
var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i;
// +++
if (method == 'none') {
return null;
}
// end +++
if (method == 'resolve') {
var styleWidth = this._resolveWidth($element, 'style');
if (styleWidth != null) {
return styleWidth;
}
return this._resolveWidth($element, 'element');
} Only the css will be responsible on width on the select2 container. |
Hello, I add custom.css
and solved |
I tried adding the media query that seanjamu suggested but it's still not working. I'm lost what is the real solution for not breaking on window resize with bootstrap? it still breaks even on the demo page when you zoom in and out. Also using the theme above didn't solve it. Any advice would be really appreciated. Thx. |
Using Bootstrap theme I have the same issue. @seanjamu 's CSS override works well enough for now, but why on earth are they defining the width of an input using an inline style with pixels? |
@tchiotludo props for this method. I think it would be nice to have this implemented for "more advanced" users. I had css widths set since select2 3.5 and now I either need to either add !important to every class (which is lame) or have a width: 'none' solution, which is pretty neat. @kevin-brown could you consider this? |
@tchiotludo solution worked for me with Angular 2.
|
It was probably not the case when @tchiotludo commented on his lines of code, but now you can just pass a To be more precise, here is how I call my code: |
In the HTML5 data-* attribute, you can solve this by setting <select id="customer" name="customer" class="form-control select2"
data-width="100%" required>
</select> |
Thanks @tchiotludo , your comment was really useful. It seems like the problem is select2-bootstrap-theme setting a fixed with on the select container; this solves the problem for me:
|
I do the following to accomplish @alexcroox's suggestion in a global scope: $.fn.select2.defaults.set( "width", "100%" ); |
You're the real MVP @alexcroox |
solved with: https://stackoverflow.com/questions/50540292/responsive-fix-input-group-with-select2-and-other-form-control-element-or-input You can adapt this solution to the original select2. |
Thanks @alexcroox! My instance was with the select being initially hidden, then upon display the width would reset to 100px versus what I set as 100%. It's a bit of a shotgun solution, but hey it works for my case. Update: |
We don't have immediate plans to provide this. We are focused to fix some major UI bugs (that are majority of issues and PR's). But if you open a PR with unit tests, I will be glad to review and approve if everything is ok 👍 |
correctly fixed with sass code (for long placeholder) :
|
Finally Solved this issue, -> Create a js function function chsize() { -> Call the function on page load inside body tag -> Here is my CSS file override.css Enjoy :) |
Using @alexcroox method I added the following CSS to my page
and removed placeholder option during initialization in JavaScript. This is the only hack which has worked for me so far after spending many hours searching for a work around using CSS and JavaScript. I am using 4.0.2 version of select2. |
Hi, I had same issue in table element and managed to solve the issue with this code :
|
This allows for more accurate resolution of the width when compared to the `resolve` method. This is more relevant for jQuery 1.x, where the `resolve` method cannot find the width of a hidden select box, but it also applies to newer versions of jQuery where the `width()` method provided by jQuery doesn't fully match `getComputedStyle()`. Fixes #3278 Fixes #5502 Closes #5259
This allows for more accurate resolution of the width when compared to the `resolve` method. This is more relevant for jQuery 1.x, where the `resolve` method cannot find the width of a hidden select box, but it also applies to newer versions of jQuery where the `width()` method provided by jQuery doesn't fully match `getComputedStyle()`. Fixes #3278 Fixes #5502 Closes #5259
I had the same issue in angular. I added and it's working |
This is a better solution than using css |
This was by far the best solution with minimal cognitive load. Thumbs up |
Thanks! |
Found a simple and hassle-free solution, without the need to manually set any styles or anything like that. window.addEventListener('resize', fleetFiltersResize);
function fleetFiltersResize() {
setTimeout(function() {
for (let i = 1; i <= filtersItem.length; i++) {
$(`.fleet-filters__item.${i}`).select2('destroy');
}
fleetFiltersInitialize();
}, 300);
} |
Unless I am missing something (I apologize if I have), select2 is not fully responsive. Look at this code:
The original select has 100% width from the form-control class. Select2 is creating a fixed width container. Thus, when I resize the window the select2 container does not resize as it should since the col-sm-6 class is a percentage.
So did I miss something in my initialization or is this an issue?
EDIT: OK. I looked throught the code and I noticed that the _resolveWidth doesn't even attempt to get a percentage width from CSS and only works with an inline style. I can live with that. How did it work in 3.5.2 without the inline style?
The text was updated successfully, but these errors were encountered: