PDA

View Full Version : [FIXED-1484] Input height problem in tbar - Chrome/Safari (Strict Mode)


gby
4 Jan 2011, 8:37 AM
Ext version tested:


Ext 3.2.1



Adapter used:


ext



css used:


only default ext-all.css



Browser versions tested against:


Chrome 8.0.552.224
IE8



Operating System:


WinXP Pro



Description:


When there is some input field (for example ComboBox) inside Toolbar, then Chrome browser renders wrong input height (2px too much).
This makes tbar look really bad.



Test Case:



var panel = new Ext.Panel({
title: 'test',
width: 200,
tbar: [{
xtype: 'combo',
store: [1]
}],
renderTo: Ext.getBody()
});
Screenshot or Video:


attached



Possible fix:


If I deacitvate "padding-top: 3px;" in this CSS:

.ext-webkit .x-small-editor .x-form-text {
font-size: 100%;
padding-top: 3px;
}

inputs look fine.
meroy
4 Jan 2011, 10:52 AM
This has been addressed some time back in SVN (3.3.x branch) revision 7250 for bug #1321 in Trac.
gby
4 Jan 2011, 2:25 PM
Can you advise me on how to correct that error on Ext 3.2.1? I'm working on some pretty big app and there is no chance of moving to newest Ext version right now... I can override padding on chosen controls, but maybe there is some more generic solution?
meroy
4 Jan 2011, 8:19 PM
Remove the following 3 lines from resources/css/ext-all.css and refresh your browser. That was the fix applied to the 3.3.x branch.



.ext-webkit .x-small-editor .x-form-field-wrap .x-form-trigger{
height:21px;
}
gby
5 Jan 2011, 12:50 AM
ext-all.css from version 3.2.1 does not contain those lines.

The only lines with ext-webkit class as part of the selector are:
Line 860: .ext-webkit *:focus{
Line 1171: .ext-webkit .x-small-editor .x-form-text{padding-top:3px;font-size:100%;}
Line 1308: .ext-webkit .x-fieldset-header {
Line 1434: .ext-gecko .x-btn button, .ext-webkit .x-btn button {
Line 2649: .ext-webkit .x-grid-panel .x-panel-bwrap{
Line 2652: .ext-webkit .x-tbar-page-number{
Line 3012: .ext-webkit table.x-date-inner{
Line 4427: .ext-webkit .x-dlg-focus{
Line 5445: .ext-webkit .x-small-editor .x-form-field {
meroy
5 Jan 2011, 9:22 AM
I downloaded a fresh copy of Ext JS 3.2.1. The 3.2.x branch does not contain the 3 lines mentioned above. I'm not able to reproduce the problem using Chrome 8.0.552.x. The combo box in a toolbar is displaying correctly due to not having the 3 lines.
gby
6 Jan 2011, 4:41 AM
As uwolfer suggested in another thread, the issue may appear only when some DOCTYPE is used.
When I remove DOCTYPE completely, the inputs are rendered fine.

I've tested those declarations:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

They all produce input height problem on Chrome 8.0.552.224.
meroy
6 Jan 2011, 7:43 AM
The following is needed to address the form field, actually, when a DOCTYPE is specified for webkit.



.ext-strict .ext-webkit .x-small-editor .x-form-text {
height:14px !important;
}
meroy
6 Jan 2011, 8:13 AM
The fix above was applied in SVN (3.3.x branch).
gby
7 Jan 2011, 12:59 AM
That seems to work, thanks!