PDA

View Full Version : layout problems in IE



zquirm
23 Dec 2006, 12:14 AM
I know this is a problem that I caused and not the code...

but every time i shrink the window size, the layout leaves about a 20px margin on the south side. this isn't a problem when I increase the browser size.

I've been messing with this for a few hours and thought it was time to ask the forum.

anybody ever get anything like this?

jack.slocum
23 Dec 2006, 4:20 AM
Do you have this css:


html, body {
overflow:hidden;margin:0;padding:0;border:0;
}

and for ie7

<body scroll="no">

zquirm
23 Dec 2006, 10:10 AM
I had body set to that but not html...thanks for the tip.

my next question concerns the toolbar. If the center body region's content is larger than the view, the toolbar gets set to the view's size (as it's suppose to), but when I scroll to the right in IE, the toolbar scrolls with it. I've set the body element as the resizeEl

<div id="content">
<div id="tb"></div>
<div id="body"></div>
</div>

jack.slocum
23 Dec 2006, 2:26 PM
CP = ContentPanel

1. Turn of autoScroll on the region.

2. You can either a) turn off autoScroll on the CP as well and add CSS for overflow:auto on body or b) grab the latest svn code and turn autoScroll on the CP (it has been fixed to be compatible with resizeEl).

3. Make sure you have fitToFrame set on the CP

zquirm
23 Dec 2006, 11:54 PM
that totally solved the problem! thanks!

but IE likes to be fun and hide elements wrapped in divs with a position set to relative or absolute within a ContentPanel after I've activated the panel, left it, and then returned. The only way it appears is if I scroll, and then it suddenly appears where it should be.

experienced this?

the only way I get this to stop happening is if I clear these divs and leave nothing but text and images in the panel...

jack.slocum
24 Dec 2006, 12:28 AM
yourPanel.on('activate', function(){
yourPanel.getEl().repaint();
});

Does that work? You may need to tweak the yui-ext-repaint css class to get it to take, depending on your div.

zquirm
24 Dec 2006, 10:47 AM
that did work! thanks!

you've been a great help.

Animal
24 Dec 2006, 11:12 AM
<slurred_typing>Hey Pal!, stop coding and go and drink some beer......

I've come upstairs cause it's too hot in the living room, but I'm going down for more beer now.

Mmmmmmm... beeer! :lol: :lol:

Merry Christmas to all the fprum users!

zquirm
24 Dec 2006, 12:25 PM
had my beer last night catching up with friends for Christmas...good ol' beer.

now, it's off to wrap presents.

Merry Christmas, Jack and Animal.

JeffHowden
24 Dec 2006, 4:44 PM
Do you have this css:


html, body {
overflow:hidden;margin:0;padding:0;border:0;
}

and for ie7

<body scroll="no">

Any way this
<body scroll="no"> could make it into BorderLayout to be applied via scripting if the container is document.body? Not only will this reduce dependencies in the HTML, it'll also mean that non-JS clients won't be encumbered with a page that doesn't have a vertical scrollbar and the page will validate.

jack.slocum
24 Dec 2006, 8:18 PM
Sure Jeff, I don't see why not.

zquirm
25 Dec 2006, 9:19 PM
what's BorderLayout's compatibility with Safari? I find when I have a region that holds an image larger than the viewable area, it won't let me scroll and will instead drag the image...

jack.slocum
26 Dec 2006, 3:39 AM
It works fine in Safari (in my testing). You will probably need to make sure all of your autoScroll/overflow setup is correct.

pp2
24 Sep 2008, 2:26 AM
Hi
I have a long FormPanel + GridPanel within a TabPanel into a Viewport.
All this overflow the region I am in, coding the style " body {overflow: auto;} " gives me the scroll OK with Mozilla Firefox but with IE only the title-bar of the FormPanel scroll !! the FormPanel itself + GridPanel does not move.

I have no idea how to resolve this problem.

Thanks for any help.