Question

I want to use a stacklayoutpanel for the menu but i have a problem with the g:stack heights

Here’s my code :

<g:StackLayoutPanel unit="PX" width="100%" height="200px" >
  <g:stack>
    <g:header size="30">Menu 1</g:header>
    <g:HTMLPanel></g:HTMLPanel>
  </g:stack>
  <g:stack>
    <g:header size="30">Menu2</g:header>
    <g:HTMLPanel>
      <ul style="list-style:none;">
        <li>Elt 1</li>
        <li>Elt 2</li>
        <li>Elt 3</li>
        <li>Elt 4</li>
      </ul>
    </g:HTMLPanel>
  </g:stack>
<g/StackLayoutPanel>

My problem is that the two stacks have the same height of 80px. I’d like to show only the header for the first one and the four lines for the second one.

How can i do that in the uibinder ?

Thanks.

Answer 1

Unfortunately, it’s not possible to do this in UiBinder. The way StackLayoutPanel was designed, you define only a height for the entire object. Each individual stack cannot be sized independently.

That being said, you could potentially resize the entire widget based on which of its children was selected, but that isn’t going to be as “pretty” as the current design, because the headers would jump around when swapping between stacks.