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

Re: [ydn-javascript] Re: Panel sizing problem (actually resize handle positioning problem)

Expand Messages
  • Dav Glass
    aniad -- If you are rendering the Panel hidden, I would suggest that you hook into the panels showEvent then create the resize instance on the first showing..
    Message 1 of 5 , Jun 30, 2008
    • 0 Attachment
      aniad --

      If you are rendering the Panel hidden, I would suggest that you hook into the panels showEvent then create the resize instance on the first showing..

      Does that make sense?
      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: Monday, June 30, 2008 1:24:24 PM
      Subject: [ydn-javascript] Re: Panel sizing problem (actually resize handle positioning problem)

      I have further diagnosed my problem. It has to do with giving initial
      height to the panel. When panel size is indicated on creation, then
      the first time the panel is shown (it is created hidden), the resize
      handle is off. Sizing the panel very first time aligns the handle,
      and any subsequent hide/show of the panel shows the resize handle
      correctly.

      I want to create the panel hidden and I want to specify its width and
      height, any ideas on how to get the resize handle positioned correctly?

      Below is fuller version of the code. Note, removing/adding the
      height:"700px" from panel creation is what seems to cause the resize
      handle positioning problem.

      Ania.

      <style type="text/css">
      /* style for tool panel stuff */
      #toolPanel .bd {
      overflow:auto;
      background-color:yellow;
      padding:10px;
      }

      #toolPanel .ft {
      height:15px;
      padding:0;
      }

      #toolPanel .yui-resize-handle-br {
      right:0;
      bottom:0;
      height: 8px;
      width: 8px;
      position:absolute;
      }
      </style>

      </head>


      <script>
      var gToolPanel;

      // QUIRKS FLAG, FOR BOX MODEL
      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 init()
      {
      // Create panel where tools will show
      gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
      xy:[100,100], modal: true, draggable: true, close: true, width:
      "1100px", height: "700px", visible:false });
      gToolPanel.render();

      var PANEL_BODY_PADDING = 20;
      var resize = new YAHOO.util.Resize('toolPanel', {
      handles: ['br'],
      autoRatio: false,
      status: true
      });

      resize.on('resize', function(args) {

      var panelHeight = args.height;

      var headerHeight = this.header.offsetHeight; // Content +
      Padding + Border
      var footerHeight = this.footer.offsetHeight; // Content +
      Padding + Border

      var bodyHeight = (panelHeight - headerHeight - footerHeight);
      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();
      }
      }, gToolPanel, true);

      YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
      true);

      }

      function showPanel()
      {
      window.frames["toolFrame"].location.href = "http://www.yahoo.com";
      gToolPanel.show();
      }

      YAHOO.util.Event.onDOMReady(init);

      </script>


      <body class=" yui-skin-sam">
      <button id="showbtn">Show Resizable Panel</button>

      <div id="toolPanel" style="border-left-color: #ff3333;
      border-bottom-color: #ff3333; border-top-style: solid;
      border-top-color: #ff3333; border-right-style: solid;
      border-left-style: solid; border-right-color: #ff3333;
      border-bottom-style: solid;">
      <div class="hd">Important Tool</div>
      <div class="bd" style="height:100%; border-left-color: green;
      border-bottom-color: green; border-top-style: solid; border-top-color:
      green; border-right-style: solid; border-left-style: solid;
      border-right-color: green; border-bottom-style: solid;">
      <iframe id="toolFrame" name="toolFrame" src=""
      style="height:95%; width:95%; border-left-color: blue;
      border-bottom-color: blue; border-top-style: solid; border-top-color:
      blue; border-right-style: solid; border-left-style: solid;
      border-right-color: blue; border-bottom-style: solid;">foo</iframe>
      </div>
      <div class="ft">Footer</div>
      </div>
      </body>



      --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@...> wrote:
      >
      > I have a resizable panel which has an <iframe> inside it. I'm having
      > a really hard time getting the panel, resize control and my iframe to
      > size properly. The resize control's handle shows up in a weird place,
      > and so does the body's div and iframe.
      >
      > Any suggestions on what the problem might be?
      >
      > Thank you,
      > Ania.
      >
      > Here is the code, please note I put different color border on divs and
      > iframe to try to make sense of the sizing issue:
      >
      > <style type="text/css">
      > #toolPanel .bd {
      > overflow:auto;
      > height:10em;
      > background-color:#fff;
      > padding:10px;
      > }
      >
      > #toolPanel .ft {
      > height:15px;
      > padding:0;
      > }
      >
      > #toolPanel .yui-resize-handle-br {
      > right:0;
      > bottom:0;
      > height: 8px;
      > width: 8px;
      > position:absolute;
      > }
      >
      > </style>
      >
      > </head>
      >
      >
      > <script>
      > var gToolPanel;
      >
      > function init()
      > {
      > // Create panel
      > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
      > xy:[100,100], modal: true, draggable: true, close: true, width:
      > "1100px", height: "700px", visible:true });
      > gToolPanel.render();
      >
      > var PANEL_BODY_PADDING = 20;
      >
      > var resize = new YAHOO.util.Resize('toolPanel', {
      > handles: ['br'],
      > autoRatio: false,
      > status: true
      > });
      >
      > resize.on('resize', function(args) {
      >
      > var panelHeight = args.height;
      >
      > var headerHeight = this.header.offsetHeight;
      > var footerHeight = this.footer.offsetHeight;
      >
      > var bodyHeight = (panelHeight - headerHeight -
      footerHeight);
      > 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();
      > }
      > }, gToolPanel, true);
      >
      > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
      > true);
      > }
      >
      > function showPanel()
      > {
      > window.frames["toolFrame"].location.href =
      "http://www.yahoo.com";
      > gToolPanel.show();
      > }
      >
      > YAHOO.util.Event.onDOMReady(init);
      >
      > </script>
      >
      >
      > <body class=" yui-skin-sam">
      > <button id="showbtn">Show Resizable Panel</button>
      >
      > <div id="toolPanel" height=100% width=100% style="height:100%;
      > width:100%; border-left-color: #ff3333; border-bottom-color: #ff3333;
      > border-top-style: solid; border-top-color: #ff3333;
      > border-right-style: solid; border-left-style: solid;
      > border-right-color: #ff3333; border-bottom-style: solid;">
      > <div class="hd">Important Tool</div>
      > <div class="bd" style="height:100%; width:90%;"
      > style="height:100%; width:100%; border-left-color: green;
      > border-bottom-color: green; border-top-style: solid; border-top-color:
      > green; border-right-style: solid; border-left-style: solid;
      > border-right-color: green; border-bottom-style: solid;">
      > <iframe id="toolFrame" name="toolFrame" width="100%"
      > height="100%" src="" style="height:100%; width:100%;
      > border-left-color: blue; border-bottom-color: blue; border-top-style:
      > solid; border-top-color: blue; border-right-style: solid;
      > border-left-style: solid; border-right-color: blue;
      > border-bottom-style: solid;">foo</iframe>
      > </div>
      > <div class="ft"></div>
      > </div>
      > </body>
      >



      ------------------------------------

      Yahoo! Groups Links
    • aniad
      Hi Dav, It doesn t make any difference, because if I create the panel shown ( visible:true ), the resize handle still paints, first time, in a wrong place.
      Message 2 of 5 , Jun 30, 2008
      • 0 Attachment
        Hi Dav,

        It doesn't make any difference, because if I create the panel shown
        ("visible:true"), the resize handle still paints, first time, in a
        wrong place.

        Ania.

        --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
        >
        > aniad --
        >
        > If you are rendering the Panel hidden, I would suggest that you hook
        into the panels showEvent then create the resize instance on the first
        showing..
        >
        > Does that make sense?
        > 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: Monday, June 30, 2008 1:24:24 PM
        > Subject: [ydn-javascript] Re: Panel sizing problem (actually resize
        handle positioning problem)
        >
        > I have further diagnosed my problem. It has to do with giving initial
        > height to the panel. When panel size is indicated on creation, then
        > the first time the panel is shown (it is created hidden), the resize
        > handle is off. Sizing the panel very first time aligns the handle,
        > and any subsequent hide/show of the panel shows the resize handle
        > correctly.
        >
        > I want to create the panel hidden and I want to specify its width and
        > height, any ideas on how to get the resize handle positioned correctly?
        >
        > Below is fuller version of the code. Note, removing/adding the
        > height:"700px" from panel creation is what seems to cause the resize
        > handle positioning problem.
        >
        > Ania.
        >
        > <style type="text/css">
        > /* style for tool panel stuff */
        > #toolPanel .bd {
        > overflow:auto;
        > background-color:yellow;
        > padding:10px;
        > }
        >
        > #toolPanel .ft {
        > height:15px;
        > padding:0;
        > }
        >
        > #toolPanel .yui-resize-handle-br {
        > right:0;
        > bottom:0;
        > height: 8px;
        > width: 8px;
        > position:absolute;
        > }
        > </style>
        >
        > </head>
        >
        >
        > <script>
        > var gToolPanel;
        >
        > // QUIRKS FLAG, FOR BOX MODEL
        > 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 init()
        > {
        > // Create panel where tools will show
        > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
        > xy:[100,100], modal: true, draggable: true, close: true, width:
        > "1100px", height: "700px", visible:false });
        > gToolPanel.render();
        >
        > var PANEL_BODY_PADDING = 20;
        > var resize = new YAHOO.util.Resize('toolPanel', {
        > handles: ['br'],
        > autoRatio: false,
        > status: true
        > });
        >
        > resize.on('resize', function(args) {
        >
        > var panelHeight = args.height;
        >
        > var headerHeight = this.header.offsetHeight; // Content +
        > Padding + Border
        > var footerHeight = this.footer.offsetHeight; // Content +
        > Padding + Border
        >
        > var bodyHeight = (panelHeight - headerHeight -
        footerHeight);
        > 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();
        > }
        > }, gToolPanel, true);
        >
        > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
        > true);
        >
        > }
        >
        > function showPanel()
        > {
        > window.frames["toolFrame"].location.href =
        "http://www.yahoo.com";
        > gToolPanel.show();
        > }
        >
        > YAHOO.util.Event.onDOMReady(init);
        >
        > </script>
        >
        >
        > <body class=" yui-skin-sam">
        > <button id="showbtn">Show Resizable Panel</button>
        >
        > <div id="toolPanel" style="border-left-color: #ff3333;
        > border-bottom-color: #ff3333; border-top-style: solid;
        > border-top-color: #ff3333; border-right-style: solid;
        > border-left-style: solid; border-right-color: #ff3333;
        > border-bottom-style: solid;">
        > <div class="hd">Important Tool</div>
        > <div class="bd" style="height:100%; border-left-color: green;
        > border-bottom-color: green; border-top-style: solid; border-top-color:
        > green; border-right-style: solid; border-left-style: solid;
        > border-right-color: green; border-bottom-style: solid;">
        > <iframe id="toolFrame" name="toolFrame" src=""
        > style="height:95%; width:95%; border-left-color: blue;
        > border-bottom-color: blue; border-top-style: solid; border-top-color:
        > blue; border-right-style: solid; border-left-style: solid;
        > border-right-color: blue; border-bottom-style: solid;">foo</iframe>
        > </div>
        > <div class="ft">Footer</div>
        > </div>
        > </body>
        >
        >
        >
        > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@> wrote:
        > >
        > > I have a resizable panel which has an <iframe> inside it. I'm having
        > > a really hard time getting the panel, resize control and my iframe to
        > > size properly. The resize control's handle shows up in a weird place,
        > > and so does the body's div and iframe.
        > >
        > > Any suggestions on what the problem might be?
        > >
        > > Thank you,
        > > Ania.
        > >
        > > Here is the code, please note I put different color border on divs and
        > > iframe to try to make sense of the sizing issue:
        > >
        > > <style type="text/css">
        > > #toolPanel .bd {
        > > overflow:auto;
        > > height:10em;
        > > background-color:#fff;
        > > padding:10px;
        > > }
        > >
        > > #toolPanel .ft {
        > > height:15px;
        > > padding:0;
        > > }
        > >
        > > #toolPanel .yui-resize-handle-br {
        > > right:0;
        > > bottom:0;
        > > height: 8px;
        > > width: 8px;
        > > position:absolute;
        > > }
        > >
        > > </style>
        > >
        > > </head>
        > >
        > >
        > > <script>
        > > var gToolPanel;
        > >
        > > function init()
        > > {
        > > // Create panel
        > > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
        > > xy:[100,100], modal: true, draggable: true, close: true, width:
        > > "1100px", height: "700px", visible:true });
        > > gToolPanel.render();
        > >
        > > var PANEL_BODY_PADDING = 20;
        > >
        > > var resize = new YAHOO.util.Resize('toolPanel', {
        > > handles: ['br'],
        > > autoRatio: false,
        > > status: true
        > > });
        > >
        > > resize.on('resize', function(args) {
        > >
        > > var panelHeight = args.height;
        > >
        > > var headerHeight = this.header.offsetHeight;
        > > var footerHeight = this.footer.offsetHeight;
        > >
        > > var bodyHeight = (panelHeight - headerHeight -
        > footerHeight);
        > > 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();
        > > }
        > > }, gToolPanel, true);
        > >
        > > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
        > > true);
        > > }
        > >
        > > function showPanel()
        > > {
        > > window.frames["toolFrame"].location.href =
        > "http://www.yahoo.com";
        > > gToolPanel.show();
        > > }
        > >
        > > YAHOO.util.Event.onDOMReady(init);
        > >
        > > </script>
        > >
        > >
        > > <body class=" yui-skin-sam">
        > > <button id="showbtn">Show Resizable Panel</button>
        > >
        > > <div id="toolPanel" height=100% width=100% style="height:100%;
        > > width:100%; border-left-color: #ff3333; border-bottom-color: #ff3333;
        > > border-top-style: solid; border-top-color: #ff3333;
        > > border-right-style: solid; border-left-style: solid;
        > > border-right-color: #ff3333; border-bottom-style: solid;">
        > > <div class="hd">Important Tool</div>
        > > <div class="bd" style="height:100%; width:90%;"
        > > style="height:100%; width:100%; border-left-color: green;
        > > border-bottom-color: green; border-top-style: solid; border-top-color:
        > > green; border-right-style: solid; border-left-style: solid;
        > > border-right-color: green; border-bottom-style: solid;">
        > > <iframe id="toolFrame" name="toolFrame" width="100%"
        > > height="100%" src="" style="height:100%; width:100%;
        > > border-left-color: blue; border-bottom-color: blue; border-top-style:
        > > solid; border-top-color: blue; border-right-style: solid;
        > > border-left-style: solid; border-right-color: blue;
        > > border-bottom-style: solid;">foo</iframe>
        > > </div>
        > > <div class="ft"></div>
        > > </div>
        > > </body>
        > >
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
      • Satyen Desai
        Hi, See if the following helps, based on your code snippet... http://yuiblog.com/sandbox/yui/v252/examples/container/resizePanel.html - Satyen P.S. In order to
        Message 3 of 5 , Jul 2 5:36 PM
        • 0 Attachment
          Hi,
          See if the following helps, based on your code snippet...
          http://yuiblog.com/sandbox/yui/v252/examples/container/resizePanel.html

          - Satyen

          P.S. In order to support Resize (Drag and Drop) with an iframe involved, you will need to create an element to overlay the iframe and remove it when you've finished (or hide and show it respectively) to avoid mouse events getting lost, when you mouse over the iframe as Dav discusses here:

          http://tech.groups.yahoo.com/group/ydn-javascript/message/32706
          http://blog.davglass.com/files/yui/resize1/


          ________________________________________
          From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of aniad
          Sent: Monday, June 30, 2008 5:15 PM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Re: Panel sizing problem (actually resize handle positioning problem)

          Hi Dav,

          It doesn't make any difference, because if I create the panel shown
          ("visible:true"), the resize handle still paints, first time, in a
          wrong place.

          Ania.

          --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
          >
          > aniad --
          >
          > If you are rendering the Panel hidden, I would suggest that you hook
          into the panels showEvent then create the resize instance on the first
          showing..
          >
          > Does that make sense?
          > 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: Monday, June 30, 2008 1:24:24 PM
          > Subject: [ydn-javascript] Re: Panel sizing problem (actually resize
          handle positioning problem)
          >
          > I have further diagnosed my problem. It has to do with giving initial
          > height to the panel. When panel size is indicated on creation, then
          > the first time the panel is shown (it is created hidden), the resize
          > handle is off. Sizing the panel very first time aligns the handle,
          > and any subsequent hide/show of the panel shows the resize handle
          > correctly.
          >
          > I want to create the panel hidden and I want to specify its width and
          > height, any ideas on how to get the resize handle positioned correctly?
          >
          > Below is fuller version of the code. Note, removing/adding the
          > height:"700px" from panel creation is what seems to cause the resize
          > handle positioning problem.
          >
          > Ania.
          >
          > <style type="text/css">
          > /* style for tool panel stuff */
          > #toolPanel .bd {
          > overflow:auto;
          > background-color:yellow;
          > padding:10px;
          > }
          >
          > #toolPanel .ft {
          > height:15px;
          > padding:0;
          > }
          >
          > #toolPanel .yui-resize-handle-br {
          > right:0;
          > bottom:0;
          > height: 8px;
          > width: 8px;
          > position:absolute;
          > }
          > </style>
          >
          > </head>
          >
          >
          > <script>
          > var gToolPanel;
          >
          > // QUIRKS FLAG, FOR BOX MODEL
          > 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 init()
          > {
          > // Create panel where tools will show
          > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
          > xy:[100,100], modal: true, draggable: true, close: true, width:
          > "1100px", height: "700px", visible:false });
          > gToolPanel.render();
          >
          > var PANEL_BODY_PADDING = 20;
          > var resize = new YAHOO.util.Resize('toolPanel', {
          > handles: ['br'],
          > autoRatio: false,
          > status: true
          > });
          >
          > resize.on('resize', function(args) {
          >
          > var panelHeight = args.height;
          >
          > var headerHeight = this.header.offsetHeight; // Content +
          > Padding + Border
          > var footerHeight = this.footer.offsetHeight; // Content +
          > Padding + Border
          >
          > var bodyHeight = (panelHeight - headerHeight -
          footerHeight);
          > 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();
          > }
          > }, gToolPanel, true);
          >
          > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
          > true);
          >
          > }
          >
          > function showPanel()
          > {
          > window.frames["toolFrame"].location.href =
          "http://www.yahoo.com";
          > gToolPanel.show();
          > }
          >
          > YAHOO.util.Event.onDOMReady(init);
          >
          > </script>
          >
          >
          > <body class=" yui-skin-sam">
          > <button id="showbtn">Show Resizable Panel</button>
          >
          > <div id="toolPanel" style="border-left-color: #ff3333;
          > border-bottom-color: #ff3333; border-top-style: solid;
          > border-top-color: #ff3333; border-right-style: solid;
          > border-left-style: solid; border-right-color: #ff3333;
          > border-bottom-style: solid;">
          > <div class="hd">Important Tool</div>
          > <div class="bd" style="height:100%; border-left-color: green;
          > border-bottom-color: green; border-top-style: solid; border-top-color:
          > green; border-right-style: solid; border-left-style: solid;
          > border-right-color: green; border-bottom-style: solid;">
          > <iframe id="toolFrame" name="toolFrame" src=""
          > style="height:95%; width:95%; border-left-color: blue;
          > border-bottom-color: blue; border-top-style: solid; border-top-color:
          > blue; border-right-style: solid; border-left-style: solid;
          > border-right-color: blue; border-bottom-style: solid;">foo</iframe>
          > </div>
          > <div class="ft">Footer</div>
          > </div>
          > </body>
          >
          >
          >
          > --- In ydn-javascript@yahoogroups.com, "aniad" <aniad@> wrote:
          > >
          > > I have a resizable panel which has an <iframe> inside it. I'm having
          > > a really hard time getting the panel, resize control and my iframe to
          > > size properly. The resize control's handle shows up in a weird place,
          > > and so does the body's div and iframe.
          > >
          > > Any suggestions on what the problem might be?
          > >
          > > Thank you,
          > > Ania.
          > >
          > > Here is the code, please note I put different color border on divs and
          > > iframe to try to make sense of the sizing issue:
          > >
          > > <style type="text/css">
          > > #toolPanel .bd {
          > > overflow:auto;
          > > height:10em;
          > > background-color:#fff;
          > > padding:10px;
          > > }
          > >
          > > #toolPanel .ft {
          > > height:15px;
          > > padding:0;
          > > }
          > >
          > > #toolPanel .yui-resize-handle-br {
          > > right:0;
          > > bottom:0;
          > > height: 8px;
          > > width: 8px;
          > > position:absolute;
          > > }
          > >
          > > </style>
          > >
          > > </head>
          > >
          > >
          > > <script>
          > > var gToolPanel;
          > >
          > > function init()
          > > {
          > > // Create panel
          > > gToolPanel = new YAHOO.widget.Panel( "toolPanel", {
          > > xy:[100,100], modal: true, draggable: true, close: true, width:
          > > "1100px", height: "700px", visible:true });
          > > gToolPanel.render();
          > >
          > > var PANEL_BODY_PADDING = 20;
          > >
          > > var resize = new YAHOO.util.Resize('toolPanel', {
          > > handles: ['br'],
          > > autoRatio: false,
          > > status: true
          > > });
          > >
          > > resize.on('resize', function(args) {
          > >
          > > var panelHeight = args.height;
          > >
          > > var headerHeight = this.header.offsetHeight;
          > > var footerHeight = this.footer.offsetHeight;
          > >
          > > var bodyHeight = (panelHeight - headerHeight -
          > footerHeight);
          > > 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();
          > > }
          > > }, gToolPanel, true);
          > >
          > > YAHOO.util.Event.on("showbtn", "click", showPanel, gToolPanel,
          > > true);
          > > }
          > >
          > > function showPanel()
          > > {
          > > window.frames["toolFrame"].location.href =
          > "http://www.yahoo.com";
          > > gToolPanel.show();
          > > }
          > >
          > > YAHOO.util.Event.onDOMReady(init);
          > >
          > > </script>
          > >
          > >
          > > <body class=" yui-skin-sam">
          > > <button id="showbtn">Show Resizable Panel</button>
          > >
          > > <div id="toolPanel" height=100% width=100% style="height:100%;
          > > width:100%; border-left-color: #ff3333; border-bottom-color: #ff3333;
          > > border-top-style: solid; border-top-color: #ff3333;
          > > border-right-style: solid; border-left-style: solid;
          > > border-right-color: #ff3333; border-bottom-style: solid;">
          > > <div class="hd">Important Tool</div>
          > > <div class="bd" style="height:100%; width:90%;"
          > > style="height:100%; width:100%; border-left-color: green;
          > > border-bottom-color: green; border-top-style: solid; border-top-color:
          > > green; border-right-style: solid; border-left-style: solid;
          > > border-right-color: green; border-bottom-style: solid;">
          > > <iframe id="toolFrame" name="toolFrame" width="100%"
          > > height="100%" src="" style="height:100%; width:100%;
          > > border-left-color: blue; border-bottom-color: blue; border-top-style:
          > > solid; border-top-color: blue; border-right-style: solid;
          > > border-left-style: solid; border-right-color: blue;
          > > border-bottom-style: solid;">foo</iframe>
          > > </div>
          > > <div class="ft"></div>
          > > </div>
          > > </body>
          > >
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.