Skip to content
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

Select2 css width override #1032

Open
phillmac opened this issue Sep 7, 2019 · 7 comments
Open

Select2 css width override #1032

phillmac opened this issue Sep 7, 2019 · 7 comments
Labels
frontend The frontend interface
Milestone

Comments

@phillmac
Copy link
Contributor

phillmac commented Sep 7, 2019

The !important on this line makes it incredibly hard to dynamically set a smaller width. This CSS file has the most priority over the other standard included CSS files, so the !important is effectively redundant.

E.g. $(".select2-container").css("width", "8%") doesn't work because the !important overrides the inline style. It's almost impossible to add a !important with jQuery, see: https://bugs.jquery.com/ticket/11173

To get around this problem, one has to resort to this sort of ugliness:
$(".select2-container")[0].style.setProperty("width", "8%", "important")

@phillmac
Copy link
Contributor Author

phillmac commented Sep 7, 2019

Just noticed that it's there to override the default inline style added by select2. Still, it's generally considered a code smell to have to use !important, especially like this in a framework because of this kind of situation

@lcharette lcharette added the frontend The frontend interface label Sep 7, 2019
@ritesh-pandey
Copy link

Hi @phillmac! I want to contribute to this project.

I tried to understand the problem statement.

If I am correct, the default inline style added by select2 is width: 100% which is same as what we have in our stylesheet. So what are we overriding? Am I missing something?
Screenshot 2019-10-13 at 6 16 09 PM

@phillmac
Copy link
Contributor Author

In some cases 100% width is not desireable.
I found it really hard to force a smaller width for e.g. with inline text.

@phillmac
Copy link
Contributor Author

If you look at the bottom of your screenshot there is a width 100% !important rule. My problem is with the presence of the !important making it hard to change.

@ritesh-pandey
Copy link

I agree to your point that we shouldn't have !important in our stylesheet. It is a bad practice.

But can you please give me an example where we have set width anything other than 100%? In current example (screenshot), the width in our stylesheet and default in-line width of select2-container--default is same i.e. 100%. So I am unable to understand the change in layout.

Also, select2 provides options to configure container width

@phillmac
Copy link
Contributor Author

Thats exactly my point, the link you mentioned for the config option does not work because the !important takes precidence. I wanted to use an 8% width to fit the element inline with some text. I'll try and make some screenshots & example html

@amosfolz
Copy link
Contributor

It looks like that line was changed 3 years ago. The problem it was intended to fix may not be an issue anymore. Have you tried removing it to see what happens?

@lcharette lcharette added this to the 6.0.0 milestone Nov 25, 2023
@lcharette lcharette moved this from Todo 6.0 to Not Started in UserFrosting Task Planner Apr 13, 2024
@lcharette lcharette moved this from Not Started to References in UserFrosting Task Planner Apr 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend The frontend interface
Projects
Status: References
Development

No branches or pull requests

4 participants