PDA

View Full Version : CSS Problems



rameshr
19 Nov 2009, 11:19 PM
Hi all. im trying to apply two different CSS styles for two different ContentPanels .But its not working,the second CSS style class of ContentPanel is overwriting by the first CSS style class.why?

Im facing same issue with Ext-Gwt tabs also.please help me. Im attaching the my sample code and my sample application image



-------------------------------------------------------------------------------------

<following is my html code>


<link type="text/css" rel="stylesheet" href="Ext_tabs.css">
<link type="text/css" rel="stylesheet" href="css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="css/test.css">


-------------------------------------------------------------------------------------

<my java code>


ContentPanel cp = new ContentPanel();
cp.addStyleName("content");
cp.setBorders(false);
ContentPanel cp1 = new ContentPanel();
cp1.addStyleName("content1");
RootPanel.get().add(cp);
RootPanel.get().add(cp1);


------------------------------------------------------------------------------------
<my css code>

my css file name is test.css(this is overwriting the gxt-all.css)


.content.x-panel-header {
overflow:hidden;
zoom:1;
padding:5px 3px 4px 5px;
border:1px solid;
line-height: 15px;
background:none !important;
background-color:blue;
}


.content1.x-panel-header
{
overflow:hidden;
zoom:1;
padding:5px 3px 4px 5px;
border:1px solid;
line-height: 15px;
background:none !important;
background-color:red;
}

-------------------------------------------------------------------------------------


Thanks in advance
R.Ramesh

Love Yao
20 Nov 2009, 12:57 AM
your question is so intresting.
i try your code:

i remove the code :
cp.addStyleName("content");
cp1.addStyleName("content1");

even to rename the ".content" to just".fdsfdsfdss"
the effect is the same:

IN IE6.0 the header of the contentPanel become NONE(white)
chrome and FI not change(blue).

i am confused.

(what different is I add the css IN Ext_tabs.css not your css/test.css"
and if i add the css to css/test.css,no effect at all.
)
ARE we use the same version?

rameshr
20 Nov 2009, 1:04 AM
HI, im using GXT 2.0.1

Arno.Nyhm
20 Nov 2009, 1:44 AM
where you find ext_tabs.css ? there are no such file in gxt package. so please post it also or remove it.

rameshr
20 Nov 2009, 1:55 AM
Hi Arno.Nyhm, can you tell me answer for my problem(first question in this thread)


Thanks,
R.Ramesh

Arno.Nyhm
20 Nov 2009, 1:59 AM
at first you need to answer to my question: "where comes your ext_tabs.css?"

please post the content of it here!

rameshr
20 Nov 2009, 2:25 AM
Hi Arno.Nyhm, i didn't mentioned Ext_tabs.css, it was mentioned by Love Yao.

Arno.Nyhm
20 Nov 2009, 2:27 AM
and where this comes from?

thats your code!



<following is my html code>


<link type="text/css" rel="stylesheet" href="Ext_tabs.css">
<link type="text/css" rel="stylesheet" href="css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="css/test.css">

rameshr
20 Nov 2009, 2:34 AM
<link type="text/css" rel="stylesheet" href="Ext_tabs.css">
<link type="text/css" rel="stylesheet" href="css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="css/test.css">



Actually my project name is Ext_tabs. it contains Ext_tabs.css file and this is Gwt css file.

and the second css file is GXT default CSS file

and the third one is my own css file(test.css)

is this Ext_tabs.css not required .

rameshr
20 Nov 2009, 2:37 AM
Actually my problem is i want two different css styles for two different TABS,CONTENTPANLES but at a time only one css style is working for widgets.Why this is my problem



Thanks,
R.Ramesh

Arno.Nyhm
20 Nov 2009, 2:48 AM
i know your problem.

but it a css problem. and thats why it is good to know all possible reasons whats going on with your code.

i suggest you:

- include only gxt-all.css and AFTER this file your own changes.

- but adding the project special css before the gxt-all.css makes no sense because then it is overwritten by gxt-all.css

Arno.Nyhm
20 Nov 2009, 2:49 AM
my working example:

try to avoid to place to much code in your own css - this makes it later complicated if you update your code



package com.mycompany.myapplication.client.forumsnippets;

import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
*
* @author Arno.Nyhm
*/
public class ForumThread410912PanelColor implements EntryPoint {

public void onModuleLoad() {

ContentPanel cp = new ContentPanel();
cp.addStyleName("my-panel-blue");
cp.setBorders(false);
ContentPanel cp1 = new ContentPanel();
cp1.addStyleName("my-panel-red");
RootPanel.get().add(cp);

RootPanel.get().add(cp1);
}
}
TabColors.css



.my-panel-blue .x-panel-header {
background-image:none !important;
background-color:blue;
}

.my-panel-red .x-panel-header
{
background-image:none !important;
background-color:red;
}includings in the welcomeGWT.html:



<title>Main</title>
<link rel="stylesheet" type="text/css" href="lib/gxt-2.0/resources/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="TabColors.css" />

rameshr
20 Nov 2009, 8:30 PM
Hi Arno.Nyhm, im tested with your code. now CSS is working fine for ContentPanels but its not working for TabPanels and even default gxt-all.css is also not working for TabPanels why?

Im using gxt 2.0.1

<here is my html code>
---------------------------
<link type="text/css" rel="stylesheet" href="lib/gxt-2.0/resources/css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="css/test.css">

----------------------------------------------------------------------------------------




<my java code>
-----------------------------------------------------------------------------
ContentPanel cp = new ContentPanel();
cp.addStyleName("my-panel-blue");
ContentPanel cp1 = new ContentPanel();
cp1.addStyleName("my-panel-red");
TabPanel tp = new TabPanel();
TabItem ti1 = new TabItem("item1");
TabItem ti2 = new TabItem("item2");
tp.add(ti1);
tp.add(ti2);
tp.addStyleName("my-tab-panel-blue");
TabPanel tp1 = new TabPanel();
TabItem ti4 = new TabItem("item3");
TabItem ti5 = new TabItem("item4");
tp1.add(ti4);
tp1.add(ti5);
tp1.addStyleName("my-tab-panel-red");
RootPanel.get().add(cp);
RootPanel.get().add(cp1);
RootPanel.get().add(tp);
RootPanel.get().add(tp1);
---------------------------------------------------------------------------------------



my CSS code
---------------------------

.my-panel-blue .x-panel-header {
background-image:none !important;
background-color:blue;
}

.my-panel-red .x-panel-header
{
background-image:none !important;
background-color:red;
}
.my-tab-panel-blue .x-tab-panel-header-plain {
background:none !important;
background-color:blue;
border-width:0 !important;
padding-bottom:0 !important;
}
.my-tab-panel-red .x-tab-panel-header-plain {
background:none !important;
background-color:red;
border-width:0 !important;
padding-bottom:0 !important;
}

------------------------------------------------------------------------------------

Thanks,
R.Ramesh