type ajax resize

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 21
I have a form that I want to resize, depending on the options selected.

When fb.resize is called, the firts DIV within DIV class=fbx fbContent gets style=position:absolute;height:auto

Problem is when content is not very long, DIV with absolute position is shrinked.

I created test sample on https://www.igmat.si/floatbox_750/

I think the problem is position:absolute.
Can this be solved somehow?
Administrator
Registered: Aug 2008
Posts: 3382
Nothing to do with the containing div or its styles. What appears to be happening is that the long paragraph is laid out slightly differently while being measured by the fb.resize() request than it is when it's displayed in the floatbox. In particular, it has one additional line wrap while being measured. The extra height seen in the floatbox is the space that is unused when the paragraph uses one less line break to display.

Evidence of that behaviour can be seen by just dropping a couple of words out of the long text. In my experiments, this is sufficient to cause the line counts to match during measurement and display. I can also get consistent measuring by dropping the padding:5px style that is applied to the paragraph.

I've got a new Floatbox release coming out 'real soon now', and I'll spend some time trying to figure out why that particular paragraph is one line taller while being measured. I may not be successful as it can be a real challenge to predict, let alone control, exactly where browsers insert line breaks into wrapping paragraphs.

By the way, thanks for the clear example. There's no way I could have guessed what was going on without it.
Administrator
Registered: Aug 2008
Posts: 3382
I found something more useful.

The vertical scrollbar is present when measuring but not while displaying. Hence the paragraph is narrower and taller while being measured. Set contentScroll:false in the options and it should behave well.
Member
Registered: Jan 2012
Posts: 21
OK. I understand.

I have updated my sample with forms.

In my webapp content of floatbox is a form. I'm using class with margin: auto so that controls are in the center of form. The behaviour on select change is not what I want. I guess I will have to style it with fixed size.

With type iframe the result is much better, but I prefer ajax.
Administrator
Registered: Aug 2008
Posts: 3382
Have we moved on to a different issue? Did contentScroll:false make your height measurement successful?

If you're now talking about centering your ajax content width-wise, why not try not removing the explicit width set in your floatbox options, put a px valued margin left and right on your form, and let the floatbox size itself to that marginalized content?
Member
Registered: Jan 2012
Posts: 21
I've tried the contentScrool setting and the resize is much better.

For the form, I will use the width of the div, and let the floatbox adjust itself.

Thank you for your time and suggestions.

Page: 1