CSS styles for stackpanel

[amye93]

I am trying to use two different StackPanels inside my app, with
different styles on each. For the first one, I just used the standard
CSS style names (gwt-StackPanel, etc.). I have not been able to figure
out how to get the styles to change on my other StackPanel. I tried
calling addStyle("myStackPanel") and then creating CSS entries as
follows:

.myStackPanel .gwt-StackPanel {
background-color: white;
border: 1px solid #AAAAAA;
width: 15em;
}

.myStackPanel .gwt-StackPanel .gwt-StackPanelItem {
border: 1px solid #AAAAAA;
background-color: #CCCCCC;
cursor: pointer;
cursor: hand;
}

.myStackPanel .gwt-StackPanel .gwt-StackPanelItem-selected {
background-color: #999999;
}

This didn't work. I am definitely not a CSS expert. If anyone can help
me figure this out, I would really appreciate it. Thanks in advance!!

Amy

[Adam T]

just try using setStyleName("myStackPanel") - the addStyle adds
additional CSS classes to the widget whereas setStyleName clears all
the previous ones (so the code gets no opportunity for confusion).

Then you just need to use that name in the CSS definitions e.g.:

> .myStackPanel {

> background-color: white;
> border: 1px solid #AAAAAA;
> width: 15em;
>
> }
>

> .myStackPanel .gwt-StackPanelItem {

> border: 1px solid #AAAAAA;
> background-color: #CCCCCC;
> cursor: pointer;
> cursor: hand;
>
> }
>

> .myStackPanel .gwt-StackPanelItem-selected {
> background-color: #999999;
>
> }

Hope that helps!

//Adam

[amye93]

But there are three different CSS rules, one for the StackPanel
itself, one for the items, and one for the selected items. How do I
set the styles appropriately? I assume that the StackPanel object must
be dynamically changing the styles based on whether an item is
selected or not. If I follow your suggestion, won't that just change
the style for the overall StackPanel, and leave out the styles for the
items and selected items? I am probably making this way too hard...

[amye93]

After thinking some more, I thought I understood how your suggestion
would work, so I tried it out. However, it doesn't appear to work
correctly. The styles I defined for the second StackPanel
('myStackPanel', following your hints above on the CSS definitions) do
not take effect. If I use the IE developer toolbar to inspect the DOM,
the class 'myStackPanel' does appear on the table element that
represents the StackPanel itself, so I would have thought that the CSS
definitions would apply. Any more thoughts?

Just to add another wrinkle, the second StackPanel is actually nested
inside an element of the first StackPanel. If the nested StackPanel is
the selected element, and I click on one of its elements, I get some
weird behavior. If I click on the second element in the nested
StackPanel, the outer StackPanel actually opens up to its second
element. Is this due to event bubbling or something? Is there a simple
way to fix this problem?

Thanks again for any help!

[amye93]

OK, so I just realized that the nesting thing was messing up my styles
also. So if I take the CSS definitions you gave me, but add '.gwt-
StackPanel' at the beginning of each, then the styles are applied
appropriately.

So now my only problem is the weird behavior on the click. Any
thoughts here would be appreciated. Thanks a lot for the CSS hints!!

[Adam T]

Hej Amye93,

Glad you managed to get the styling working. As for the strange
behaviour on clicking, that seems to be a known bug:

http://code.google.com/p/google-web-toolkit/issues/detail?id=834

which looks like it is slated to be fixed in Release 1.4.

If you can't wait till then and you're comfortable with GWT I guess
you could always try fixing the panel issue yourself by subclassing
the StackPanel and preventing the event bubbling. I've not tried the
following code, but it might be one approach:

class MyStackPanel extends StackPanel{
public void onBrowserEvent(Event event){
super.onBrowserEvent(event);
DOM.eventCancelBubble(event,true);
}
}

Hope that helps in some way!

//Adam
Co-author of GWT In Action http://www.manning.com/hanson
GWT Example http://dashboard.manning-sandbox.com

[amye93]

Thanks a lot Adam! I may try that, but we are still relatively early
in development, so I will probably wait until 1.4 and see if it fixes
things for me. In the meantime, I will probably just replace the
nested StackPanel with a Tree or something just to get functionality
going.

Thanks again for your help!

Amy