Alignment of FocusPanel with PCT?

[membersound]

Hi,

I want to create some inner FocusPanels, and align them in percent (PCT).
But I can even not align just 2 Panels to a PCT size:

<g:DockLayoutPanel unit='EM'>
    <g:north size='20'>
    <g:HorizontalPanel>
        <g:FocusPanel width='90%'><g:Label>Left</g:Label></g:FocusPanel>
        <g:FocusPanel><g:Label>Right</g:Label></g:FocusPanel>
    </g:HorizontalPanel>
    </g:north>
</g:DockLayoutPanel>

Result: Both labels are align to the left one ofter another. Why is the 1st panel not taking 90% of the screen?

[Jens]

HorizontalPanel uses HTML table to align its children. In your case you probably end up having two HTML table cells (<td>) each with 50% width. The first cell contains your first FocusPanel with 90% width of the 50% cell width.

So what you really want is that the first cell of the used HTML table has a width of 90% and the widget inside that cell should take up the whole space. To do so you have to call

horizontalPanel.setCellWidth(firstFocusPanel, "90%");

and remove the width from your first FocusPanel.

-- J.

[membersound]

Can't I do this plain in uibinder?

Thanks

Am Donnerstag, 27. Dezember 2012 13:56:14 UTC+1 schrieb Jens:

horizontalPanel.setCellWidth(firstFocusPanel, "90%");

[RyanZA]

You can (and should) just use plain html and css for this. Remove your horizontal panel, and then layout the child focuspanels using css styles (that you either declare inside the uibinder.xml or in a cssresource). Relying on tables for layout usually doesn't work that great in the long run.

[membersound]

What I just found out:
<g:HorizontalPanel width="100%">
  <g:cell width='90%'>
    <g:FocusPanel>...

What do you think of aligment with g:cell to wrapp the focus panels?