Opened 6 years ago

Closed 6 years ago

#16346 closed defect (wontfix)

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

Reported by: Paul Christopher Owned by: Douglas Hays
Priority: undecided Milestone: tbd
Component: Dijit - LnF Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description

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.

Attachments (3)

testTextBox.htm (711 bytes) - added by Paul Christopher 6 years ago.
IE8.png (8.7 KB) - added by Paul Christopher 6 years ago.
IE9.png (8.9 KB) - added by Paul Christopher 6 years ago.

Download all attachments as: .zip

Change History (7)

Changed 6 years ago by Paul Christopher

Attachment: testTextBox.htm added

Changed 6 years ago by Paul Christopher

Attachment: IE8.png added

Changed 6 years ago by Paul Christopher

Attachment: IE9.png added

comment:1 Changed 6 years ago by 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.

comment:2 Changed 6 years ago by bill

Owner: changed from bill to Douglas Hays
Status: newassigned

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.

comment:3 Changed 6 years ago by 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.

comment:4 Changed 6 years ago by Douglas Hays

Resolution: wontfix
Status: assignedclosed

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.

Note: See TracTickets for help on using tickets.