StackLayoutPanel Shows white ends at the rounded corners

Question

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.

Answer 1

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!

Answer 2

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: