PDA

View Full Version : Why is ContentPanel in Portlet white?



MickeyMiner
27 Nov 2009, 7:33 AM
Hi,

I have some ContentPanels in Portlets. Their background is white.
If they are stand alone, they are blue:

http://kybernetika.de/portlet.jpg

Why is that?
How can I get a Portlet to have "normal" background color?

Many thanks!

mm


package de.mm.client;

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

public class ExtGWT implements EntryPoint {

public void onModuleLoad() {

Portal box_1 = new Portal(1);
box_1.setBorders(true);
box_1.setWidth(315);
box_1.setSpacing(5);
Portlet mini_1;
ContentPanel mini_1b;
for (int i = 1; i < 3; i++) {
mini_1 = new Portlet();
mini_1.setHeading("I am Portlet #" + i);
mini_1.addText("Hello world: " + i);
mini_1.setWidth(300);
mini_1.setFrame(true);

mini_1b = new ContentPanel();
mini_1b.setHeading("I am ContentPanel in Portlet #" + i);
mini_1b.addText("Hello world: " + i);
mini_1b.setWidth(200);
mini_1b.setFrame(true);

mini_1.add(mini_1b);
box_1.add(mini_1, 0);
}

VerticalPanel box_2 = new VerticalPanel();
box_2.setBorders(true);
box_2.setWidth(315);
box_2.setSpacing(5);
ContentPanel mini_2;
for (int i = 1; i < 3; i++) {
mini_2 = new ContentPanel();
mini_2.setHeading("I am ContentPanel #" + i);
mini_2.addText("Hello world: " + i);
mini_2.setWidth(200);
mini_2.setFrame(true);
box_2.add(mini_2);
}

RootPanel.get().add(box_1);
RootPanel.get().add(box_2);

}
}
PS: I am using GXT 2.1

Martin.Trummer
30 Nov 2009, 2:02 AM
AFAIK the default panel background in gxt-all.css is transparent,
so the content-panels background color will depend on its container(s)

if you stuff it into an protlet, you can see in the .css file, that the portlet defines a white background:

.x-portlet .x-panel-body {
background-color: white !important;
}

so, your choices are:


explicitly assign a style to your panels
stuff them into a container and style the container
maybe you want to style your applications main container
maybe you want to change other default css styles

MickeyMiner
30 Nov 2009, 4:43 AM
Thank you,

I have added following to my myApp.css (and I had to change the order of css files in myApp.html):

.x-portlet .x-panel-body {
background-color: transparent !important;
}Now are the Portlets rendered correctly.
I hope it won't have other negative effects though. :-/

Thank you for your help!

mm