PDA

View Full Version : TextToolItem and Button icon rendering is broken when there is no text


iterator
11 Mar 2009, 2:16 AM
A similar problem seemed to be recognized and fixed before:
http://www.extjs.com/forum/showthread.php?p=236630

But with GXT 1.2.2 there is still a problem with text free TextToolItems. If I use an empty string as text the icon is rendered fully but the button displays some space (ca. 50% exta) right to the icon. If I set no text at all (which I basically started with) the extra space is not shown and this is correct but the top line of the icon is cutted then.

Try to see a difference in a toolbar with the two alternatives (both are not satisfying):


// icon is displayed correctly but button has wrong extra space right beside the icon
TextToolItem item1 = new TextToolItem("","icon-example");

// button has the right size but the icon is displayed with a cutted first line
TextToolItem item2 = new TextToolItem();
item2.setIconStyle("icon-example");

ToolBar toolbar = new ToolBar();
toolbar.add(item1);
toolbar.add(item2);
Since toolbars with a lot of tools are better built with text free buttons and tooltips this issue seems to be worth handled.

Thanks for looking into this.
iterator
11 Mar 2009, 2:18 AM
Sorry forgot to mention:

I tested this with IE7 on Windows XP.
sven
11 Mar 2009, 4:08 AM
What does your css rule for "icon-example" look like? are you sure that you are using the latest gxt css files? I am unable to reproduce this.
iterator
11 Mar 2009, 4:24 AM
I attached the icon file actualSize.png which is only an example because it does not work with any icon.

And here is the css style I used in the code in my first post:


.icon-example {
background-image: url(actualSize.png) !important;
}The "actualSize.png" has to be place in the root of the public folder to get the css rule working.

thx for replying so fast
sven
11 Mar 2009, 4:25 AM
Your second approach to add textonly is correct and works quite well for me. Can you post a screenshot how it looks like for you? Also is your app online avaible that i can see the issue for myself?
iterator
11 Mar 2009, 4:41 AM
To be honest: no

I thought it would work like with ext-js where those styles were working. Sorry for that.

So I looked now and used the way it is shown in the javadoc:



.icon-example {
background: url("actualSize.png") no-repeat center left !important;
}The effect is the same. The icon is cutted.
iterator
11 Mar 2009, 4:46 AM
You can see that the upper borders of the icons are missing which is not the case if I have also text set for the TextToolItem.
sven
11 Mar 2009, 4:48 AM
Can you please give me a complete testcase?
iterator
11 Mar 2009, 4:57 AM
I managed to reproduce the effect with this little example on IE7 Windows XP:


public class TestStartup implements EntryPoint {
public void onModuleLoad() {
TextToolItem textToolItem = new TextToolItem();
textToolItem.setIconStyle("icon-example");

TextToolItem alternativeTextToolItem = new TextToolItem("Some Text");
alternativeTextToolItem .setIconStyle("icon-example");

ToolBar toolbar = new ToolBar();
toolbar.add(textToolItem);
toolbar.add(alternativeTextToolItem);


ContentPanel panel = new ContentPanel();
panel.setSize(400, 400);
panel.setHeading("Icon Example");
panel.setLayout(new FitLayout());
panel.setTopComponent(toolbar);

RootPanel.get().add(panel);
}
}
iterator
11 Mar 2009, 4:58 AM
Probably it is not easy to see the missing first line of the icon because the color of the border is not very contrastful. But it is definitly missing.
sven
11 Mar 2009, 5:01 AM
Works fine for me. Can you upload your compiled version somewhere that i can look into it?
iterator
11 Mar 2009, 5:32 AM
I tried this is IE7 and FF3.

- IE7 has the problem with the cutted first line.
- FF3 has not this problem but does not layout the both items align. They are vertically placed slightly different

I hope you can reproduce this with the IconExample