Portal Layout within Tabs displays incorrectly

[tslatt]

I am using the portal layout. It works fine when placed directly on the page. However, if I put it inside a tab, it gets squashed and not all of it shows up. How can I get its width to display correctly?

Here is the code that puts the tabs and the portal on the page:

Code:

<div id="main-tab-bar" class="easyui-tabs"><!-- begin tab bar -->
  <div title="John Doe" iconCls="icon-reps-profile" closable="true"><!-- begin tab -->
    <div id="c3col" class="aportal"><!-- begin portal area (the three column portal) -->
      <div class="colA"></div><!-- col A (left col) -->
      <div class="colB"></div><!-- col B (middle col) -->
      <div class="colC"></div><!-- col C (right col) -->
    </div><!-- end portal area -->
    <div id="cWidgets"><!-- begin widgets staging area (this div is hidden. widgets are placed here before they are loaded into the portals.) -->
      <!-- #include file="widget-A.inc"-->
      <!-- #include file="widget-B.inc"-->
      <!-- #include file="widget-C.inc"-->
      <!-- #include file="widget-D.inc"-->
      <!-- #include file="widget-E.inc"-->
      <!-- #include file="widget-F.inc"-->
      <!-- #include file="widget-G.inc"-->
      <!-- #include file="widget-H.inc"-->
      <!-- #include file="widget-I.inc"-->
      <!-- #include file="widget-J.inc"-->
      <!-- #include file="widget-K.inc"-->
      <!-- #include file="widget-L.inc"-->
      <!-- #include file="widget-M.inc"-->
      <!-- #include file="widget-N.inc"-->
      <!-- #include file="widget-O.inc"-->
      <!-- #include file="widget-P.inc"-->
      <!-- #include file="widget-Q.inc"-->
    </div><!-- end widgets -->
  </div><!-- end tab -->
</div><!-- end tab bar -->

<script type="text/javascript">
  $(document).ready(function() {//begin on page load
    $('#main-tab-bar').tabs(); //initialize the main tabs
    $('#c3col').portal(); //initialize the portal
    //followed by code that loads each of the widgets into the portal
  });//end 
</script>

Here is the rendered code that EasyUI creates:

Code:

<div style="width: auto; height: auto;" id="main-tab-bar" class="easyui-tabs tabs-container">

  <div style="" class="tabs-header">
    <div style="display: none;" class="tabs-scroller-left"></div>
    <div style="display: none;" class="tabs-scroller-right"></div>
    <div style="margin-left: 0px; left: 0px; width: 960px;" class="tabs-wrap">
      <ul class="tabs">
        <li class="tabs-selected"><a href="javascript:void(0)" class="tabs-inner"><span class="tabs-title tabs-closable tabs-with-icon">Carrie Paster</span><span class="tabs-icon icon-reps-profile"></span></a><a href="javascript:void(0)" class="tabs-popup"></a><a href="javascript:void(0)" class="tabs-close"></a></li>
      </ul>
    </div>
  </div>

  <div style="height: auto; width: auto;" class="tabs-panels">
    <div style="display: block; width: auto;" class="panel">
      <div class="panel-body panel-body-noheader panel-body-noborder" closed="true" title="" iconcls="icon-reps-profile" closable="true" style="width: 960px; height: auto;"></div>

        <!-- begin portal area (the three column portal) -->
        <div style="width: auto; height: auto;" id="c3col" class="aportal portal portal-noborder">
          <!-- col A (left col) -->
          <!-- col B (middle col) -->
          <!-- col C (right col) -->
          <table style="" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="portal-column-td">
                  <div style="width: 0px;" class="colA portal-column">
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>A</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w117" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>B</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w115" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                    </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>C</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w106" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>D</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w114" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>E</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w105" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>F</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto;" id="w119" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true" href="test-ajax.html">
                      content...
                      </div>
                    </div>
        
                  </div>
                </td>
                <td class="portal-column-td">
                  <div style="width: 0px;" class="colB portal-column">
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>G</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w108" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>H</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w109" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>I</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w112" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: auto;" class="panel portal-panel">
                      <div style="width: 0px;" class="panel-header">
                        <div class="panel-title"><span>J</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 0px; height: auto; display: none;" id="w113" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                  </div>
                </td>
                <td class="portal-column-td">
                  <div style="" class="colC portal-column">
        
                    <div style="display: block; width: 33px;" class="panel portal-panel">
                      <div style="width: 33px;" class="panel-header">
                        <div class="panel-title"><span>K</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 33px; height: auto; display: none;" id="w111" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: 33px;" class="panel portal-panel">
                      <div style="width: 33px;" class="panel-header">
                        <div class="panel-title"><span>L</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 33px; height: auto; display: none;" id="w110" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: 33px;" class="panel portal-panel">
                      <div style="width: 33px;" class="panel-header">
                        <div class="panel-title"><span>M</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 33px; height: auto; display: none;" id="w116" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                    <div style="display: block; width: 33px;" class="panel portal-panel">
                      <div style="width: 33px;" class="panel-header">
                        <div class="panel-title"><span>N</span></div>
                        <div class="panel-tool">
                          <div class="panel-tool-close"></div>
                          <div class="panel-tool-max"></div>
                          <div class="panel-tool-collapse panel-tool-expand"></div>
                        </div>
                      </div>
                      <div style="width: 33px; height: auto; display: none;" id="w107" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
                      content...
                      </div>
                    </div>
        
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- end portal area -->
        
        <!-- begin widgets staging area (this div is hidden. widgets are placed here before they are loaded into the portals.) -->
        <div id="cWidgets">
        </div>
        <!-- end widgets -->

      </div>
    </div>
  </div>
  
</div>

As you can see, it's setting the width of panels in the 1st & 2nd column to 0px, and the ones in the 3rd column to 33px, instead of filling the 100% page width.

Any help would be greatly appreciated. I've spent months on this project and getting the portal to work inside a tab is extremely important.

[tslatt]

For comparison, here is the html rendered by EasyUI when the portal is NOT in a tab (the correct html). You can see that the width on the portal columns is set to a px amount instead of 'auto' and the the panels have correct px amounts instead of '0px' or '33px'.

Code:

<!-- begin portal area (the three column portal) -->
<div style="width: auto; height: auto;" id="c3col" class="aportal portal portal-noborder">
  <!-- col A (left col) -->
  <!-- col B (middle col) -->
  <!-- col C (right col) -->
  <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="portal-column-td">
          <div style="width: 380px;" class="colA portal-column">
  
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>A</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w115" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px; position: static; left: 17px; top: 40px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>B</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w117" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>C</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w106" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>D</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w114" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>E</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w105" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
          
          </div>
        </td>
        <td class="portal-column-td">
          <div style="width: 380px;" class="colB portal-column">
          
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>F</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w108" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>G</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w109" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>H</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w112" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 380px;" class="panel portal-panel">
              <div style="width: 368px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>I</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 378px; height: auto; display: none;" id="w113" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
          
          </div>
        </td>
        <td class="portal-column-td">
          <div style="width: 370px;" class="colC portal-column">
          
            <div style="display: block; width: 370px;" class="panel portal-panel">
              <div style="width: 358px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>J</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 368px; height: auto; display: none;" id="w111" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 370px;" class="panel portal-panel">
              <div style="width: 358px;" class="panel-header">
                <div style="cursor: move;" class="panel-title"><span>K</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 368px; height: auto; display: none;" id="w110" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 370px;" class="panel portal-panel">
              <div style="width: 358px;" class="panel-header">
              <div class="panel-title"><span>L</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 368px; height: auto; display: none;" id="w116" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>
            
            <div style="display: block; width: 370px;" class="panel portal-panel">
              <div style="width: 358px;" class="panel-header">
              <div class="panel-title"><span>M</span></div>
                <div class="panel-tool">
                  <div class="panel-tool-close"></div>
                  <div class="panel-tool-max"></div>
                  <div class="panel-tool-collapse panel-tool-expand"></div>
                </div>
              </div>
              <div style="width: 368px; height: auto; display: none;" id="w107" class="easyui-panel pdiv panel-body portal-p" title="" collapsible="true" closable="true" maximizable="true">
              content...
              </div>
            </div>

          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- end portal area -->

<!-- begin widgets staging area (this div is hidden. widgets are placed here before they are loaded into the portals.) -->
<div id="cWidgets">
</div>
<!-- end widgets -->

[tslatt]

I have made a little more progress on this. Purely by accident I found that the portal will load within the tab with the correct widths IF that tab is the very first one added to the page.

I must be going wrong somewhere in the sequence of things. Perhaps the portal is getting initialized before the tab is initialized, so it has no basis for setting its widths? I'm really not sure.

How can I make sure that the portal is initialized only after the tab containing it is added to the page?

Also, I have the portal set to resize on the browser resize, but for some reason it is super slow to do that while within a tab -- sometimes it doesn't react at all. Should I set it to resize on the tab resize instead? If so, how would I do that?

I would be super, super happy if anyone could help me. I'm demoing the latest updates to this project tomorrow and I'd really like to have the portals working IN the tabs by then.

[tslatt]

I did another experiment, and I made sure the portal wasn't initialized until after the tab that contains it was added to the page. It loaded all of the panels into the portal, but the portal functionality didn't work -- nothing was draggable.

Has anyone ever been able to get a portal to work when it is NOT immediately present on the page (ie, loaded in a tab, or added later, ...)?

[stworthy]

The portal have 'fit' property and 'resize' method, which can be used to make it work in some container. Try set the 'fit' property to true and call 'resize' method to adjust the portal size when tab panel opened.