Thursday, October 2, 2014

dynamic show/hide a panel using LayoutPanel

Hi there,

With LayoutPanel and its family components, I find it very difficult to show/hide dynamically a panel in the middle of the screen. 

I have the following layout vertically.  I need to show/hide MessagePanel depends on whether there is a message for user. If message panel is hidden, the body will fill up its space. Otherwise, the body will show after the message. But, I am having real trouble to do that.

<HeaderPanel>
<MessagePanel>
<BodyPanel>


The reason is because all LayoutPanel require explicitly specifying size and height, etc. 

The following is what I come up with, but the problem is, after I set my message panel to be visible, it does not push down the content panel underneath it, the message is overlapping with the content. 

Any suggestion?  I could use FlowPanel or HTMLPanel, but that will prevent me from using DockLayoutPanel in the UI body, which is what I need to show a 50/50 split.

Yan


<g:LayoutPanel>
<g:layer height='30px'> 
<g:Widget ui:field="header" />
</g:layer>
<g:layer top='31px' height='30px'> 
<g:Widget ui:field="messageBox"/>
</g:layer>
<g:layer>
<g:SimpleLayoutPanel ui:field="body" />
</g:layer>
</g:LayoutPanel>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment