How to horz. center a shrinkwrapped FlowPanel in a FlowPanel?

[David Lee]

I've had success centering a FlowPanel (lets call it contentPanel) in a FlowPanel (lets call it containerPanel).

The container panel expands to 100%:

.containerPanelStyle {

width: 100%;

height: 30px;

background-color: purple;

}

Then we can center the contentPanel easily by using css to set the left and right margins to auto:

.contentPanelStyle {

width: 600px;

height: 30px;

margin-left: auto;

margin-right: auto;

background-color: red;

}

Cool.

However, I find myself needing to shrinkwrap (I found that some css guys were calling it this) the FlowPanel.

By shrinkwrapping I just mean autosizing. The contentPanel will contain things that change width throughout runtime

and I want it to remain centered within the containerPanel.

No problem. I just put 'float' in the css:

.contentPanelStyle {

height: 30px;

margin-left: auto;

margin-right: auto;

background-color: red;

float:left;

}

Yayyy. Now the contentPanel's width shrinks to match the width of its contents (things like labels, drop down boxes).

Boooo. Now the contentPanel is left justified in the containerPanel, ignoring the fact I've set the margins to auto.

What gives?

How do I center a FlowPanel that employs float:left in order to auto-size itself?

David

[Jens]

If you don't want to set the width through GWT, I guess your best chance will be text-align:center along with display:inline / display:inline-block

See: http://jsfiddle.net/F2fPN/

I am not sure if this will work in every browser. You'll have to test it against your supported target browsers.

-- J.

[David Lee]

Thanks for the reply Jens.

The jsfiddle code does not solve my problem.

You removed the float:left in the contentPanel, so I no longer get an auto-sizing FloatPanel.

Tell me more about setting the width and margins through GWT.

My question is: When, in the the timing of things, do I know that the FlowPanels have been rendered, so that I

can fetch theirs widths, do my calculations, and set margins?

Cheers,

David

PS: I often see web sites that render their content. Then 500ms later, all the margins are corrected. Might this

be what they are doing?

[Jens]

The jsfiddle code does not solve my problem.

You removed the float:left in the contentPanel, so I no longer get an auto-sizing FloatPanel.

I modified the previous jsfiddle: http://jsfiddle.net/F2fPN/3/

 

Tell me more about setting the width and margins through GWT.

My question is: When, in the the timing of things, do I know that the FlowPanels have been rendered, so that I

can fetch theirs widths, do my calculations, and set margins?

You can give the browser enough time to render it by using GWT's Scheduler class and executing a deferred command. In the deferred command you can do your calculations. 

-- J.

[David Lee]

Jens,

I do not say this lightly.

You rock.

You have saved me from tremendous frustration. Thank you.

David

PS, If you find yourself in Boulder, CO in need of beer, I'm buying, and you must tell how you solved this.