PDA

View Full Version : Button rendering issue in FireFox



manjushrestha
2 Sep 2009, 9:26 AM
I have GXT 2.0.1 and GWT 1.7.

I have a button in a content panel. The button is rendered correctly in IE7, but in FireFox, I can not see the top-center and bottom-center horizontal lines.




ContentPanel cp = new ContentPanel();
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setFrame(true);
cp.setLayout(new FitLayout());
cp.addButton(new Button("Cancel"));


I will attach the screen-shots of both IE and FF.

I appreciate any help.

Thanks in advance.

Arno.Nyhm
2 Sep 2009, 9:43 AM
in firefox you can inspect this with firebug. maybe one own css overwrite it. check if you have the right "css all" file from the same gxt-2.0.1.zip and not an older one and not one from extjs.

manjushrestha
2 Sep 2009, 10:34 AM
I made sure I have gxt-all.css in my .html file.
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css" />

I am not overridding any of the button related css. I inspected in FireBug and the innerHTML is:

<table cellspacing="0" role="presentation" class="x-btn x-btn-noicon" id="x-auto-67" style="width: 75px; margin-right: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"/><td class="x-btn-tr"><i> </i></td></tr><tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em unselectable="on" class=""><button style="position: relative;" type="button" class="x-btn-text" tabindex="0">Cancel</button></em></td><td class="x-btn-mr"><i> </i></td></tr><tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"/><td class="x-btn-br"><i> </i></td></tr></tbody></table>

The innerHTML for both IE7 (IE Developer ToolBar) and FireFox look same. Is there anything else that I can check?

Thanks in advance.

Arno.Nyhm
2 Sep 2009, 12:24 PM
check with firebug:

you can put this in the search field x-btn-tc (to look for more just hit again enter in this field) then you find the top button elements.


the applied css styles you can see on the right side ... then you see as background for this item ...

then it shoud display this lines:



.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {

background-image:url(../images/default/button/btn.gif);}

manjushrestha
2 Sep 2009, 1:08 PM
Thank you so much for your quick response.

Searching through css in FireBug,
for x-btn-tc, I see:
gxt-all.css (line 1390)
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
background-image:url(../images/default/button/btn.gif);
}
gxt-all.css (line 5842)
.x-btn-tc {
background:transparent none repeat-x scroll 0 -6px;
height:3px;
}

for x-btn-tl, I see (trying to see the difference)
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
background-image:url(../images/default/button/btn.gif);
}
gxt-all.css (line 5842)
.x-btn-tl {
background:transparent none no-repeat scroll 0 0;
height:3px;
width:3px;
}

Any recommendation for me? Anything that I can change in CSS. BTW, the button rendering was working in GXT 1.2.4 and did not work after the migration to GXT 2.0.1.

Thanks in advance.

Arno.Nyhm
2 Sep 2009, 1:13 PM
my css for this is in line 5828


maybe one own css overwrite it. check if you have the right "css all" file from the same gxt-2.0.1.zip and not an older one and not one from extjs.

manjushrestha
2 Sep 2009, 2:57 PM
I have gxt-all.css class from GXT 2.0.1. I compared the lines in the gxt-all.css in GXT 2.0 and GXT 2.0.1.

It looks like GXT 2.0.1 has those lines in 5842, however GXT 2.0 has those lines in 5828.

Thanks in advance for all the help.

Arno.Nyhm
3 Sep 2009, 12:00 AM
for x-btn-tc, I see:
gxt-all.css (line 1390)
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
background-image:url(../images/default/button/btn.gif);
}

but where this line 1390 comes from which version? i did not found this in 2.0.1 / 2.0 / 1.2.4 at this line.

manjushrestha
3 Sep 2009, 5:32 AM
For GXT 2.0.1, in line#1309, you should have:
.x-btn td {
padding:0 !important;


}

Somehow, when I copied and pasted, the line number didn't show up correctly.

For x-btn-tc, there is one more CSS entry at line#1509:

.x-btn-tc{
height:3px;
background:repeat-x 0 -6px;
}
In FireFox, the same CSS entry shows up as:
.x-btn-tc {
background:transparent none repeat-x scroll 0 -6px;
height:3px;


}

I have no idea how and where this particular CSS is being overridden, as I am not manually overridden it.

Any suggestion for me?

Thanks in advance.

manjushrestha
3 Sep 2009, 7:34 AM
If I change the button class's onRender method as:


protected void onRender(Element target, int index) {
if (template == null) {
if (buttonTemplate == null) {
StringBuffer sb = new StringBuffer();
sb.append("<table cellspacing=\"0\" class=\"x-btn\" role=\"presentation\"><tbody class=\"{2}\" >");
sb.append("<tr><td class=\"x-btn-tl\"><i>&#160;</i></td><td class=\"x-btn-tc\"><i>&#160;</i></td><td class=\"x-btn-tr\"><i>&#160;</i></td></tr>");
sb.append("<tr><td class=\"x-btn-ml\"><i>&#160;</i></td><td class=\"x-btn-mc\"><em class=\"{3}\" unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\" style='position: static'>{0}</button></em></td><td class=\"x-btn-mr\"><i>&#160;</i></td></tr>");
sb.append("<tr><td class=\"x-btn-bl\"><i>&#160;</i></td><td class=\"x-btn-bc\"><i>&#160;</i></td><td class=\"x-btn-br\"><i>&#160;</i></td></tr>");
sb.append("</tbody></table>");

buttonTemplate = new Template(sb.toString());
}
template = buttonTemplate;
}

The button is displayed correctly both in IE and FF.

Thanks in advance.

sunshinerain
13 Nov 2009, 1:30 PM
Any luck yet with this issue? I'm getting exactly the same buttons as you are.
The top center and bottom center are missing. It looks like brackets around the
button rather than a border. I get the same result with Firefox, Safari and Chrome.
This started, I believe at 2.0.1. I tried 2.0.2, didn't solve the problem but had to back out.

Thanks!

manjushrestha
17 Nov 2009, 12:54 PM
It was one of our CSS conflicting with gxt.css. We have different projects using GXT. It was only one project having issue.

I do not remember exactly which CSS was causing the issue.