Claro: Cross-browser layout issues with varying height of dijit.form.TextBox

[Paul Christopher]

Description

The width of a TextBox is the same on all browsers, but the height differs by some pixels. IE7 and IE8 displays a form like this:

One and the same form is displayed in IE9 like this:

There are even differences between Safari 5.1 on Win7 and Safari 6.0 on MacOS.

The dimensions of textbox/focusNode are:

IE9: 236*18.4

IE8: 236*21

IE7: 236*21

FF16: 236*20

Chrome23: 236*20

Safari 5.1 (Win7): 236*20

Safari 6.0 (MacOS): 236*18

Opera12: 236*19

Steps to reproduce the issue

Run the attached test case on different browsers and analyze the height of <input data-dojo-attach-point="textbox, focusNode"/>

Discussion

Unfortunately I have no idea, why this happens but as you can see in the screenshot above, you can run into quite some layout issues with bigger forms.

Moreover, I have no idea what's the root of the problem. Even setting a fixed font-size .claro { font-size: 16px; } does not have any effect on the above issue.

[Paul Christopher]

See ​http://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome, the issue can be fixed by specifying a fixed height for the textbox at the end of the cascade:

.dijitInputInner, .dijitValidationTextBoxError input.dijitValidationInner, .dijitSelect input, .dijitTextBox input.dijitArrowButtonInner {
	        height: 14px !important;
}

However having to specify an explicit height is not nice since the height needs to fit the claro base font-size.

It would be better if specifying the font-size is enough. But I don't know how to achieve this with CSS rules only.

[bill]

I don't consider this a bug, just a difference in behavior between browsers that you don't like. I'm assuming it's caused by different font sizes on the different browsers. But passing to Doug to see what he thinks.

[Paul Christopher]

The user - or at least myself - expect that all widgets look the same in all browsers and that all widgets have the same dimensions. That's why dijit does a css reset/normalization with dijitReset I guess? However this reset seems to fail with the texbox height - it still differs across browsers and causes you trouble when layouting a page.

[Douglas Hays]

I think since claro explicitly only uses em units, it's allowing external influences to determine actual pixel sizes. It's up to the web page author to try to corral the browsers if desired. I'll be glad to consider adding additional default font information in dojo.css that seems to work better if you find a combination that works everywhere.