Loading ...
Sorry, an error occurred while loading the content.

Re: Resize utility causes horizontal scroll bars and obscures its content.

Expand Messages
  • aniad
    That would be great! I tried playing with styles but cannot get consistent rendering in firefox vs. ie. Whatever i try i get some peculiar behavior with
    Message 1 of 5 , Apr 3, 2008
    • 0 Attachment
      That would be great!
      I tried playing with styles but cannot get consistent rendering in
      firefox vs. ie. Whatever i try i get some peculiar behavior with
      scroll bars attributable to the resize utility.
      Thanks again,
      Ania.

      --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
      >
      > aniad --
      >
      > Your best bet is to not put the Resize on the Layout div, you should
      put the resize on an outer element..
      >
      > Let me see about making you an example later this afternoon..
      >
      > Dav
      >
      > Dav Glass
      > dav.glass@...
      > blog.davglass.com
      >
      >
      >
      >
      > + Windows: n. - The most successful computer virus, ever. +
      > + A computer without a Microsoft operating system is like a dog
      > without bricks tied to its head +
      > + A Microsoft Certified Systems Engineer is to computing what a
      > McDonalds Certified Food Specialist is to fine cuisine +
      >
      >
      > ----- Original Message ----
      > From: aniad <aniad@...>
      > To: ydn-javascript@yahoogroups.com
      > Sent: Wednesday, April 2, 2008 1:11:52 PM
      > Subject: [ydn-javascript] Re: Resize utility causes horizontal
      scroll bars and obscures its content.
      >
      > Thank you, it partly helped. The 'transparent' style indeed took care
      > of obscuring part of the layout.
      >
      > However, in terms of the scroll bar, it didn't. It is not the size or
      > position of the resize handle that is the problem. But the fact that
      > creating the resize causes horizontal scrollbar to appear, sometimes
      > the vertical one also comes in and out.
      >
      > If I comment out the creation of the resize utility, the layout
      > renders fine, and there are no scroll bars. Creating the resize around
      > the layout causes at least the horizontal scroll bar. The layout
      > "bleeds" horizontally outside of the resize.
      >
      > a.
      >
      > --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@> wrote:
      > >
      > > Ania --
      > >
      > > It's not really cutting it off, it's that the CSS for the handle has
      > a background color on it, so it appears to cut it off..
      > >
      > > .yui-skin-sam .yui-resize .yui-resize-handle {
      > > background-color: transparent;
      > > }
      > >
      > > That will remove the color from the handle so you can see the layout.
      > >
      > > You can also adjust the size and position of the handle via CSS with
      > this rule:
      > >
      > > .yui-skin-sam .yui-resize .yui-resize-handle-b {
      > > width: 98%;
      > > }
      > >
      > > Does that help?
      > > Dav
      > >
      > > Dav Glass
      > > dav.glass@
      > > blog.davglass.com
      > >
      > >
      > >
      > >
      > > + Windows: n. - The most successful computer virus, ever. +
      > > + A computer without a Microsoft operating system is like a dog
      > > without bricks tied to its head +
      > > + A Microsoft Certified Systems Engineer is to computing what a
      > > McDonalds Certified Food Specialist is to fine cuisine +
      > >
      > >
      > > ----- Original Message ----
      > > From: aniad <aniad@>
      > > To: ydn-javascript@yahoogroups.com
      > > Sent: Tuesday, April 1, 2008 11:45:29 AM
      > > Subject: [ydn-javascript] Resize utility causes horizontal scroll
      > bars and obscures its content.
      > >
      > > I have a layout inside a resize utility which has only the bottom
      > > resize handle. The resize border seems to add just a little
      > > edge/padding around the layout causing horizontal scroll bar to
      > > appear. How can I avoid this? The resize is rendered with
      > > 'proxy:true' so when actually dragging the resize handle the right
      > > edge of the proxy is scrolled off the screen. Having the 'proxy:true'
      > > or 'false' does not seem to make any difference. The resize control
      > > also obscures the bottom pixels of the layout and, as mentioned,
      > > extends the width (thus the horizontal scroll bars). How do I fix
      this?
      > >
      > > BTW, whether it is layout, or tab control, or whatever, it doesn't
      > > matter. It seems any control rendered at full width inside the resize
      > > causes this behavior.
      > >
      > > Here is my very simplified code. Thank you,
      > > Ania.
      > >
      > > <script>
      > >
      > > var layout;
      > > var resize;
      > >
      > > var IE_QUIRKS = (YAHOO.env.ua.ie && document.compatMode ==
      > "BackCompat");
      > >
      > > // UNDERLAY/IFRAME SYNC REQUIRED
      > > var IE_SYNC = (YAHOO.env.ua.ie == 6 || (YAHOO.env.ua.ie == 7 &&
      > > IE_QUIRKS));
      > >
      > > function initLayout()
      > > {
      > > layout = new YAHOO.widget.Layout('layoutDiv',
      > > {
      > > height: 500,
      > > units: [
      > > { position: 'right', header: 'Right', height: 490, width:
      > > 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse:
      > > true, scroll: false, body: 'right1', maxWidth: 1000 },
      > > { position: 'center', height: 490, scroll: false, resize:
      > > true, body: 'selector', gutter: '2px 5px', collapse: true,
      > > collapseSize: 50, maxWidth: 1000 }
      > > ]
      > > });
      > >
      > > layout.render();
      > > }
      > >
      > > function initResize()
      > > {
      > > resize = new YAHOO.util.Resize('layoutDiv', { handles: 'b', proxy:
      > > true});
      > >
      > > resize.on('resize', function(args) {
      > > var panelHeight = args.height;
      > > var headerHeight = (this.header == null ) ? 0 :
      > > this.header.offsetHeight; // Content + Padding + Border
      > > var bodyHeight = (panelHeight - headerHeight);
      > > var bodyContentHeight = (IE_QUIRKS) ? bodyHeight : bodyHeight;//
      > > - PANEL_BODY_PADDING;
      > >
      > > YAHOO.util.Dom.setStyle(this.body, 'height', bodyContentHeight +
      > > 'px');
      > >
      > > if (IE_SYNC)
      > > {
      > > this.sizeUnderlay();
      > > this.syncIframe();
      > > }
      > >
      > > layout.set('height', bodyContentHeight);
      > > layout.resize();
      > >
      > > });
      > > }
      > >
      > > YAHOO.util.Event.onDOMReady(initLayout);
      > > YAHOO.util.Event.onDOMReady(initResize);
      > >
      > > </script>
      > >
      > > <body class=" yui-skin-sam">
      > > <div id="layoutDiv" height="100%" width="100%"></div>
      > > <div id="right1">I'm right side</div>
      > > <div id="selector">I'm center</div>
      > > Some stuff.
      > > <script>
      > >
      > > (function() {
      > > var Dom = YAHOO.util.Dom,
      > > Event = YAHOO.util.Event;
      > > });
      > >
      > > </script>
      > > </body>
      > >
      > >
      > >
      > > ------------------------------------
      > >
      > > Yahoo! Groups Links
      > >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.