PDA

View Full Version : fitToForm in a TabPanelItem in a Region



Animal
29 Nov 2006, 6:04 AM
I have a strange problem when a form is too deep for a page. Obviously, I want scrollbars so that the user can access the form.

But the width seems to be explicitly set too wide by the fitToForm algorithm:

Here is what it's like with the region expaned enough to fit the form's depth:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/form_noscroll.jpg

Then when I pull the splitter down a little:

You can see the width which must be set as an explicit CSS style on the element does not take the presence of the vertical scrollbar into account.

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/form_scroll.jpg

If I go into DOM Inspector and knock 20px off the width of the yui-ext-tabitembody element, it's fine, but move the splitter again, and the width jumps back up.

Animal
29 Nov 2006, 6:24 AM
This fixes it for me in ContentPanel:



setSize : function(width, height){
if(this.fitToFrame){
var size = this.adjustForComponents(width, height);
this.resizeEl.setSize("auto", size.height);
}
},

jack.slocum
29 Nov 2006, 7:18 AM
I added:

this.resizeEl.setSize(this.autoWidth ? 'auto' : size.width, size.height);

So autoWidth + fitToFrame will do what you have described.

Animal
29 Nov 2006, 1:00 PM
Are you sure that's right?

I think that fitToFrame means that it must use width:"auto". I mean that's what auto width does on a div: fits the width to the container's width. Height must be calculated to fit the frame, but width should be auto.

jbowman
29 Nov 2006, 3:01 PM
Actually, this is happening in spots of my code as well. My best guess so far is that autoWidth is in fact working. It's just not taking into account that it needs to make itself smaller to make up for the fact that a vertical scrollbar exists.

jack.slocum
29 Nov 2006, 3:04 PM
Width auto only expands on some elements. For example, an iframe needs to be fit (width and height) because auto width won't expand.

With fitToFrame on, ideally the child would have the overflow auto, not the parent (the region). This would prevent the scrollbar problem you are having.

Animal
29 Nov 2006, 11:55 PM
Yes, it's the ContentPanel's div element that's being set to the width of the region. The Region may display scroll bars if the ContentPanel's div is too deep.

Perhaps the fitToFrame method could see if the ContentPanel is an iframe or a div, and always use width:"auto" if it's a div?

@jbowman, Jack means he just added the autoWidth config option to his development code. It's not in .33RC2.

jack.slocum
30 Nov 2006, 4:52 AM
If the container region is handling scrolling then the child content panel should not be fitToFrame, it should be auto sized (height too). There's nothing gained by fitting a child content panel to a parent region that is overflow auto. Make sense?

Think of it as two separate options:

LayoutRegion: autoScroll: true. All children (ContentPanels) should be fitToFrame: false. Obviously exceptions can be made, but this is the case in general. This model works well when the region just contains normal markup and you always want overflow to scroll on every panel.

LayoutRegion: autoScroll:false. Children (ContentPanels) manage their own scrolling (overflow:auto) and require fitToFrame: true on the ones that will scroll. Not all children have to scroll. This is more flexible and is better when the region may contain a GridPanel or something that should manage it's on scroll.

This should probably be in a doc somewhere as even I get it messed up all the time.