-1

I'm using GWT's StackLayoutPanel and trying to round the corners of its headers by applying border-radius attribute in the following CSS rule:

.mm-StackPanelHeader {
  padding-left: 7px;
  font-weight: bold;
  font-size: 1.4em;
  width: 200px;
  border-radius: 5px 5px 0px 0px;
  background: #d3def6;
  border: 0.5px solid #bbbbdd;
}

When collapsing the header items, the borders don't cover over each other completely, showing ugly white cornered ends.

How to fix this?

Here's the output's snapshot, for a reference.

GingerHead
  • 8,130
  • 15
  • 59
  • 93
  • 1
    the rounded corners are created using the headers's background image. try to use [`StackPanel`](http://gwt.google.com/samples/Showcase/Showcase.html#!CwStackPanel) instead. it seems to provide the looks you're after out-of-the-box. – Eliran Malka Jul 25 '12 at 11:27
  • 2
    @EliranMalka Thanks I know about `StackPanel`, but it's the old version of `StackLayoutPanel`, and has less methods where the latter one has the news methods and improvements – GingerHead Jul 25 '12 at 12:01

2 Answers2

1

Assuming you're going for the old widgets' look n' feel, achieving the exact same result will inevitably involve replacing images and messing with the widgets' layout properties (e.g applying negative margins, altering offsets).

Having said that, I managed to get a quick CSS-based solution that seem to target your needs, and is free of further manipulations. I'm sure a more accurate solution is available, as this attempt is far from perfect, but it should provide you with a good starting point.

Abstract

To simulate the old widgets' looks:

  • Round up the top corners for the item headers.
  • Apply a background color to the underling container, to avoid those ugly white corners.
  • Use top round corners on that container as well, to avoid ugly blue corners on it as a result of the background color applied.
  • Reset the bottom padding of the header items to re-center their content.

Implementation

Add the following rules to your stylesheet:

.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    background-color: #D3DEF6;
    border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    padding-bottom: 0;
}

Illustration

Here's an snapshot of the final result, as created by manipulating the CSS properties on the GWT showcase live example:

stack layout panel modified

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
  • 2
    Can you link the final result again? – GingerHead Jul 26 '12 at 06:07
  • there's no link to a final result, as - sadly enough - no gwtFiddle exists (yet), but you surely can open the [`StackLayoutPanel` example in the GWT showcase](http://gwt.google.com/samples/Showcase/Showcase.html#!CwStackLayoutPanel) and mess with the CSS inside the browsers' developer tools. – Eliran Malka Jul 26 '12 at 06:48
  • 3
    Haha! Yeah, messing up is the right combination of words to utter out regarding *GWT* coding coming right out of in-lab Google experiments... – GingerHead Jul 26 '12 at 07:15
0

Well, StackLayoutPanel was a definitely a newer version than StackPanel.

But I used the latter in this case because there was no other way, and it worked like a charm!

Thanks to all!

GingerHead
  • 8,130
  • 15
  • 59
  • 93