Re: VerticalPanel in DockLayoutPanel

As Luke said - you have to provide explicit sizes for north/south/east/west widgets.

Here are 3 ways to do it when you want your widgets to be naturally sized and the center widget to take the available space.

1) Use a div with style='display: table-row;' with 3 children style='display: table-cell;'. Make the center child to have width: 100%;

cons: It generally works but you have to fight/test in all browsers to make it sure

2)
 a) Copy the HeaderPanel widget to the same classpath (com.google....) on your project. Rename it to HorizontalHeaderPanel.

 b) Make sure it compliles

 c) Change its logic from vertical to horizontal. The patch is minimal. The source is around 350 linesand the changes are easy to make and test.

Voila you have a widget that takes 3 widgets and naturally sizes left and rigth.

cons: It requires javascript

3) Generally what you are trying to do is called the Holy grail. You can achieve it by using flexbox. See all about it here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

cons: It works on ever green browsers and requires some cursing^H^H^H^H tweaking to get it right but it is the recommended way.

Hope that helps

    Vassilis

On Fri, Dec 11, 2015 at 6:32 PM, Roberto Attias <rattias2217@gmail.com> wrote:

Hi,

I have a VerticalPanel containing 100 buttons with label "Component"+idx wrapped by a ScrollPanel. the ScrollPanel is added as West component of a DockLayoutPanel, and a canvas is added to the center. 

I would have expected the LayoutPanel to automatically size the ScrollPanel so that the entire horizontal extent of the vertical panel is visible, but that's not the case and my button are cut. is there a way to automatically size horizontally the vertical panel to fit the entire horizontal extent of its content?

Thanks!

--
You received this message because you are subscribed to the Google Groups "GWT Users" 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.

--

Vassilis Virvilis

--
You received this message because you are subscribed to the Google Groups "GWT Users" 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 https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.