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

Panel sizing problem.

Expand Messages
  • aniad
    I have a resizable panel which has an inside it. I m having a really hard time getting the panel, resize control and my iframe to size properly. The
    Message 1 of 5 , Jun 26, 2008
    • 0 Attachment
      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>
    • aniad
      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
      Message 2 of 5 , Jun 30, 2008
      • 0 Attachment
        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>
        >
      • 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 3 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 4 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 5 of 5 , Jul 2, 2008
            • 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.