Opened 8 years ago
Closed 8 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)
Change History (7)
Changed 8 years ago by
Attachment: | testTextBox.htm added |
---|
Changed 8 years ago by
Changed 8 years ago by
comment:1 Changed 8 years ago by
comment:2 Changed 8 years ago by
Owner: | changed from bill to Douglas Hays |
---|---|
Status: | new → assigned |
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 8 years ago by
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 8 years ago by
Resolution: | → wontfix |
---|---|
Status: | assigned → closed |
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.
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:
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.