PDA

View Full Version : Button with icon on Toolbar issue



jjczopek
24 Aug 2010, 7:08 AM
Hi!
I encountered serious problem. I have a toolbar with button. It looks good, and works good but when I add icon to the button, it overlays button text:
2210222103
Non-toolbar button looks ok.
22104
Any ideas what may be the cause and how to solve this issue?

micgala
24 Aug 2010, 7:39 AM
1- What version are you using?
2 - Are you sure you are using correct css files for the versions in #1?
3 - Can you update to the latest version, if not using right now?
4 - If on latest version, can you provide a sample code that demonstrates the issue?

jjczopek
24 Aug 2010, 8:30 AM
I'm using version 2.1.1 and tried the 2.2.0 RC without any modifications in CSS files.
I have ClientBundle with icons. Below is a code snippet for creating button:


public class BlogView extends LayoutContainer implements BlogViewInterface{

private ToolBar managerToolbar = new ToolBar();
...
private Button btn = new Button("Nowy wpis");
...

private TracMedResources resources;

@Inject
public BlogView(TracMedResources resources) {
this.resources = resources;
this.setLayout(new RowLayout(Orientation.VERTICAL));
this.setAutoWidth(true);
this.setAutoHeight(true);

this.itemsWrap.setWidth("100%");
this.itemsWrap.setSpacing(10);
this.managerToolbar.setBorders(true);

this.btn.setScale(ButtonScale.MEDIUM);
this.btn.setIconAlign(IconAlign.LEFT);
this.btn.setIcon(AbstractImagePrototype.create(resources.createIcon()));

this.managerToolbar.add(this.btn);
this.managerToolbar.add(this.manageEntriesButton);

this.add(this.managerToolbar);
this.add(this.itemsWrap);
}

jjczopek
25 Aug 2010, 1:09 AM
I found why button text is overlapped with icon, but I don't know how to solve the issue.
Using firebug, I expanded one of the button with icon and it's content look like this:

<Button Text><img border="0"
style="width: 16px;
height: 16px;
background: url(&quot;data:image/png;<lots of image data>;) no-repeat scroll 0px 0px transparent;
position: absolute;
left: -19px;
top: -2px;"
src="http://localhost:8080/..."
role="presentation" class=" x-btn-image">The position is set explicitly (left and top attributes), but when I expanded the tag of button which I added to a toolbar, it looks like that:


<Button Text><img border="0"
style="width: 16px;
height: 16px;
background: url(&quot;data:image/png;<lots of image data>;) no-repeat scroll 0px 0px transparent;
position: absolute;
left: 0px;
top: 0px;"
src="http://localhost:8080/..."
role="presentation" class=" x-btn-image">When I manually modified the left and top values for the button I added to toolbar, it looks ok.
Now, the question is: why left and top icon css attributes of button which is then added to toolbar are 0? How can I fix that? Is this a common issue or it's only me with the problem?

sven
25 Aug 2010, 1:10 AM
You should try to post a fully working testcase that implements EntryPoint of your problem. With this testcase people can help you what might be wrong and how to fix it.