jonjanisch
23 Oct 2008, 7:42 AM
Hi Darrell,
One of the requirements in our application is to have all toolbars a certain height in pixels.
So naturally, I tried toolbar.setHeight(toolbarheight). In IE due to box model issues, the toolbar is a different size than a more standards compliant browser like Firefox. So I immediately tried setting the doctype to strict (to ensure IE uses the correct box model) to get the proper height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Closer! Unfortunately, there was a 1 pixel difference in height. The culprit was this IE specific style in ext-all.css that changes the bottom padding from 2 pixels to 1 pixel:
.ext-ie .x-toolbar { PADDING-BOTTOM: 1px}
Also, my code is fragile because I'm specifying the style padding and border directly in the class like this:
int height = DEFAULT_TOOLBAR_BAR_HEIGHT_PX;
height -= DEFAULT_TOOLBAR_PADDING_PX * 2;
height -= DEFAULT_TOOLBAR_BORDER_PX;
If the style changes in the future, my toolbar will break. If there was a way to get the style properties "before" the page is rendered, that would be one possible solution. However, all of the methods I tried (such as getElement().getStyle().getProperty("border-bottom-width") returned "null". The only way I found I could obtain the proper borders/padding is using the methods in el() "after" the element is added to the page, for example:
el().getBorderWidth("tb")
After all of this, I found out that strict mode is not currently supported (http://extjs.com/forum/showthread.php?t=38334&highlight=doctype) and the proper doctype (as shown in setup.txt) is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Now I'm back to square one. While setting the doctype to strict in my small test example gets me closer to proper result, I don't want it to break things in our large application since it's not supported by GXT. So, I looked into the ToolBar class and noticed it extends BoxComponent. BoxComponent's Javadoc says: "BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly within the Component rendering model." However, the setHeight method does not seem to respect the box model (I would have expected it to adjust for padding/margins in IE).
So I guess my question is, is it possible to set the height of a toolbar (or any component) without writing hackish Java code that will most probably break sometime in the future? Is there any reason why strict mode isn't the standard supported doctype?
Thanks
Jonathan
One of the requirements in our application is to have all toolbars a certain height in pixels.
So naturally, I tried toolbar.setHeight(toolbarheight). In IE due to box model issues, the toolbar is a different size than a more standards compliant browser like Firefox. So I immediately tried setting the doctype to strict (to ensure IE uses the correct box model) to get the proper height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Closer! Unfortunately, there was a 1 pixel difference in height. The culprit was this IE specific style in ext-all.css that changes the bottom padding from 2 pixels to 1 pixel:
.ext-ie .x-toolbar { PADDING-BOTTOM: 1px}
Also, my code is fragile because I'm specifying the style padding and border directly in the class like this:
int height = DEFAULT_TOOLBAR_BAR_HEIGHT_PX;
height -= DEFAULT_TOOLBAR_PADDING_PX * 2;
height -= DEFAULT_TOOLBAR_BORDER_PX;
If the style changes in the future, my toolbar will break. If there was a way to get the style properties "before" the page is rendered, that would be one possible solution. However, all of the methods I tried (such as getElement().getStyle().getProperty("border-bottom-width") returned "null". The only way I found I could obtain the proper borders/padding is using the methods in el() "after" the element is added to the page, for example:
el().getBorderWidth("tb")
After all of this, I found out that strict mode is not currently supported (http://extjs.com/forum/showthread.php?t=38334&highlight=doctype) and the proper doctype (as shown in setup.txt) is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Now I'm back to square one. While setting the doctype to strict in my small test example gets me closer to proper result, I don't want it to break things in our large application since it's not supported by GXT. So, I looked into the ToolBar class and noticed it extends BoxComponent. BoxComponent's Javadoc says: "BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly within the Component rendering model." However, the setHeight method does not seem to respect the box model (I would have expected it to adjust for padding/margins in IE).
So I guess my question is, is it possible to set the height of a toolbar (or any component) without writing hackish Java code that will most probably break sometime in the future? Is there any reason why strict mode isn't the standard supported doctype?
Thanks
Jonathan