CODEWITHSUNDEEP
htmlcss
Adnane.T
Adnane.T

Reputation: 272

HTML SELECT resizes depending on chosen option

I have this problem that took me the hole day thinking, and I can't figure out what's the matter:
I have a SELECT element, with options of different sizes,
Obviously it takes the size of the longest option by default.
But when I choose one option or another the select box changes it's size,
I don't know what would cause this behaviour since it's happening only in Firefox, and in all the SELECT elements of my app. Is there any CSS property that would make this happen?
Have you guys any idea? Thanks in advance

Upvotes: 3

Views: 82

Answers (3)

Adnane.T
Adnane.T

Reputation: 272

I found what was the problem,
Actually as it's an oldish app, I found some reset css applying this rule: 

* {
 padding: 0;
}

Seems like only firefox doesn't like this, and so applying this to an element, makes this side effect.
I resolved it giving my tags a padding style to override the reset style.

Upvotes: 0

extols
extols

Reputation: 1772

It sounds like the lack of a CSS width is causing the box to size itself automatically. Try adding a CSS width or min-width.

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

You need to give your select a set width within your stylesheet. Without this, it will behave as you describe.

select{
    width:200px;
}

Alternatively, if you want to allow it to keep resizing, but only up to a certain size, you can use max-width instead.

select{
    max-width:200px;
}

Upvotes: 2

Related Questions