PDA

View Full Version : CSS of TabPanel and TabItem of Ext-Gwt are not working in Firefox



rameshr
16 Nov 2009, 10:51 PM
Hi all, im trying to add css for TabPanel and TabItem in Ext-Gwt. Its working fine in Internet Explorer but not working in firefox and chrome why?.

This is my java code
-----------------------------
final VerticalPanel vp = new VerticalPanel();
vp.setAutoHeight(true);
vp.setAutoWidth(true);
TabPanel tp = new TabPanel();
TabItem dashboard = new TabItem("DashBoard");
TabItem advertise = new TabItem("Advertise");
TabItem market = new TabItem("Market");
TabItem analyze = new TabItem("Analyze");
dashboard.removeStyleName(dashboard.getBaseStyle());
dashboard.setHeight(31);
dashboard.setStyleAttribute("backgroundColor", "#a5d512");
advertise.setHeight(31);
advertise.setStyleAttribute("backgroundColor", "#a5d512");
market.setHeight(31);
market.setStyleAttribute("backgroundColor", "#a5d512");
analyze.setHeight(31);
analyze.setStyleAttribute("backgroundColor", "#a5d512");
dashboard.setStylePrimaryName("dashboard");
advertise.setStylePrimaryName("advertise");
tp.add(dashboard);
tp.add(advertise);
tp.add(market);
tp.add(analyze);
tp.setStylePrimaryName("mytabpanel");
tp.setStyleAttribute("backgroundColor", "red");
vp.setStyleName("vp");
tp.setAutoHeight(true);
tp.setAutoWidth(true);
vp.add(tp);
RootPanel.get().add(vp);


This is my CSS code
-------------------------------
.button-link .x-btn-text {
cursor: pointer !important;
cursor: hand !important;
border: none !important;
/* Disable the button-style */
background-color: transparent !important;
background:none !important;
background-image:none !important;
padding: 0px !important;
color: #4784C3 !important;
text-decoration: underline !important;
}

.button-links .x-btn-text {

background-color: blue !important;
color:white;
height:25px;



}
.button-links .x-btn button
{
padding-left:3px;
padding-right:103px;
}

/* remove images */
.button-link .x-btn-tl,
.button-link .x-btn-tr,
.button-link .x-btn-tc,
.button-link .x-btn-ml,
.button-link .x-btn-mr,
.button-link .x-btn-mc,
.button-link .x-btn-bl,
.button-link .x-btn-br,
.button-link .x-btn-bc {
background-image: none !important;
}

/* remove little dots in FF */

.button-link .x-btn-tl i,
.button-link .x-btn-tr i,
.button-link .x-btn-tc i,
.button-link .x-btn-ml i,
.button-link .x-btn-mr i,
.button-link .x-btn-mc i,
.button-link .x-btn-bl i,
.button-link .x-btn-br i,
.button-link .x-btn-bc i {
font-size: 0px;
}
.button-links .x-btn-tl,
.button-links .x-btn-tr,
.button-links .x-btn-tc,
.button-links .x-btn-ml,
.button-links .x-btn-mr,
.button-links .x-btn-mc,
.button-links .x-btn-bl,
.button-links .x-btn-br,
.button-links .x-btn-bc {
background-image: none !important;
}

/* remove little dots in FF */

.button-links .x-btn-tl i,
.button-links .x-btn-tr i,
.button-links .x-btn-tc i,
.button-links .x-btn-ml i,
.button-links .x-btn-mr i,
.button-links .x-btn-mc i,
.button-links .x-btn-bl i,
.button-links .x-btn-br i,
.button-links .x-btn-bc i {
font-size: 0px;
}


.advertise.x-tab-strip-inner {
overflow:hidden;
text-overflow: ellipsis;
width:121px !important;
height:30px !important;
}
.advertise.x-tab-strip span.x-tab-strip-text {
white-space: nowrap;
cursor:pointer;
padding-left:12px;
font-family:Verdana;
font-size:13pt;
color:608908;
}
.advertise.x-tab-strip-top .x-tab-right {
background: none !important;
padding-left:2px;
}
.advertise.x-tab-strip-top .x-tab-right {
background: none !important
padding-left:1px;

}
.advertise.x-tab-strip-top .x-tab-left {
background: none !important
padding-right:1px;
}
.advertise.x-tab-strip-top .x-tab-strip-inner {
background: none !important;
background-color:#c9c9c9;
}
.advertise.x-tab-strip-top .x-tab-strip-active .x-tab-right {
background-position: 0 0;
background-color:#a5d512;

}
.advertise.x-tab-strip-top .x-tab-strip-active .x-tab-left {
background-position: right -301px;
background-color:#a5d512;

}
.advertise.x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
background-position: 0 -151px;
background-color:#a5d512;
}
.advertise.x-tab-strip-active span.x-tab-strip-text {
cursor:default;
color:#ffffff;
font-family:Verdana;
}
.mytabpanel.x-tab-panel-header {
border: 1px solid;
padding-bottom: 2px;
background-color:#a5d512;
border-color:#a5d512;

}
.mytabpanel.x-tab-panel-footer {
border: 1px solid;
padding-top: 2px;
border-color:#a5d512;

}
.mytabpanel.x-tab-panel-body {
border: 1px solid;
border-color:#a5d512;

}
.vp
{
border-top-style:solid;
border-top-color:#6d9440;
border-width:2px;
background-image: url(images/OhanaLogo/header_back_repeat.png);
background-repeat:repeat;

}


Thanks
R.Ramesh

Arno.Nyhm
17 Nov 2009, 8:02 AM
can you place also your code in
myCode or in
mycode to prevent the indent of code for more readability.

Arno.Nyhm
17 Nov 2009, 8:04 AM
did you look with firebug into the html code to see where is your css style gone?