Skip to main content

Bug Tracker

Side navigation

#10595 closed bug (invalid)

Opened October 27, 2011 11:13AM UTC

Closed November 02, 2011 12:51AM UTC

Selectbox width() and css('width') discrepancies

Reported by: Adam Owned by:
Priority: low Milestone: None
Component: css Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

See JS fiddle at: http://jsfiddle.net/8MW4u/3/

CSS:

width: 100px

border: 1px

padding: 5px

The jQuery width() method incorrectly subtracts the borders width (2px) of a 100px width selectbox in Chrome, reporting the width as 98px instead. This does not happen with an input field of type text with the exact same CSS.

In Firefox the discrepancy is even worse, since there the padding is also subtracted, reporting a width of 88px. Again, for a text input everything works fine.

The exact same problem occurs with css('width'), which reports the same values.

Why are the reported widths of a selectbox not consistent with the reported widths of a text input? And why not cross-browser consistent at least?

Attachments (0)
Change History (1)

Changed November 02, 2011 12:51AM UTC by timmywil comment:1

component: unfiledcss
priority: undecidedlow
resolution: → invalid
status: newclosed

This is due to a combination of the nature of the box model and the different default styles for select boxes and inputs. What you are retrieving is the real and correct _computed_ values, even if they are different across browsers. To unify them, all of the necessary css properties need to match across browsers in order to get the same behaviors.

Something like this:

http://jsfiddle.net/timmywil/8MW4u/6/