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

52024Cannot drag layout's splitter over iframe

Expand Messages
  • Ania
    Oct 30, 2009
      I have a nested layout.


      The inner-bottom pane has an iframe. When resizing that bottom pane by dragging the horizontal splitter which divides the inner-center and inner-bottom, all works well. The splitter drags over the iframe. However, when trying to resize either the right pane or the left pane by dragging vertical splitters, they will not drag over the iframe part (but they will drag over the non-iframe parts). Please see the attached simple code which demonstrates this issue.

      Please advise how to enable dragging of all splitters over the inner-bottom's iframe part.

      Thank you,

      <body class=" yui-skin-sam">
      <div id="layoutDiv" height="500px"></div>
      <div id="top1">top1</div>
      <div id="bottom2">
      Can drag here
      <br /><br />
      <iframe id="frm2" name="frm2" src="http://www.yahoo.com" style="height:300;width:100%;">foo</iframe>
      <br />
      And can drag here
      <div id="right1">right1</div>
      <div id="left1">left1</div>
      <div id="center2">center2</div>

      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

      Event.onDOMReady(function() {
      var layout = new YAHOO.widget.Layout("layoutDiv",{
      height: 800,
      units: [
      { position: 'right', header: 'Right', width: 300, resize: true, gutter: '2px 5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', maxWidth: 500 },
      { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 500 },
      { position: 'center' }
      }); // layout
      layout.on('render', function() {
      var el = layout.getUnitByPosition('center').get('wrap');
      var layout2 = new YAHOO.widget.Layout(el, {
      parent: layout,
      units: [
      { position: 'bottom', header: 'Cannot drag the left or right slider/splitter edge over the iframe part. However, can drag this bottom slider, the one right above.', height: 370, resize: true, body: 'bottom2', gutter: '5px', collapse: true },
      { position: 'center', body: 'center2', gutter: '2px', scroll: true }
      }); // on render
    • Show all 5 messages in this topic