Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200
    Vote Rating
    0
    geewhizbang is on a distinguished road

      0  

    Default [CLOSED][3.0.0] .tabPanel no border interior div too small

    [CLOSED][3.0.0] .tabPanel no border interior div too small


    Using the IE Dev toolbar, the following code is generated by extJS. I'm not sure why fixed width = 1221px is inserted by extjs, and then inside that div another one width = 1219px.

    Code:
    <div class="x-panel-bwrap" id="ext-gen12">
     <div class=" x-panel x-panel-noborder"id="ext-comp-1002" style="width: 1221px">
         <div class="x-panel-bwrap" id="ext-gen12">
             <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
              id="ext-gen13"style="width: 1219px; height: 1073px">
                 <div class="SD_TabHeader">
                      My content here
                 </div>
             </div>
         </div>
     </div>
    </div>
    If you want to see how it looks, the image is here:
    http://www.box.net/shared/3562hbfn8t

    this is the code used to generate the panel
    Code:
    PageTabs = new Ext.TabPanel
    (
       {
          renderTo: 'divPageTabs',
          stateful: false,
          defaults: {autoScroll: false},
          autoDestroy: false,
          border: false,
          hideBorders: true,
          height: 1100,
          plain:true,
          items:
          [
             {
                 title: 'Search',
                 itemId: 'SearchTab',
                 autoLoad: '/kb/search'
              },{
                 title: 'Forum',
                 itemId: 'ForumTab',
                 autoLoad: '/kb/forum'
             }
          ]
      }
    );

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,066
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Please post a full test case, see: http://extjs.com/forum/showthread.php?t=71015
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200
    Vote Rating
    0
    geewhizbang is on a distinguished road

      0  

    Default


    Ext version tested:
    • Ext 3.0.0
    Adapter used:
    • ext
    CSS Used:
    • mildly modified ext-all.css (included in sample). I removed some
      extraneous lines in some of the tabPanel style tags. I overwrote the original file in the sample.
    Browser Versions tested against:
    • IE7 - has gap
    • FF3 (firebug 1.3.0.10 installed) - works correctly
    • Google Chrome - works correctly
    Operating System:
    • Windows Server 2003
    • Vista
    Description:
    • On IE7 & IE8, the inner div of a rendered TabPanel body is 3 px too small in width.

    Test Case: Steps to reproduce this problem:
    • Browse the sample page in IE7 or IE8
    The result that was expected:
    • No gap at the right side, just like in other browsers
    The result that occurs instead:
    • Gap on right side of panel
    Screenshot or Video:Debugging already done:
    • The following markup was created by ExtJS and extracted using IE Dev Toolbar. It shows that a inner div has a 3px smaller width, which causes the bug.
    Code:
    <div class="x-panel-bwrap" id="ext-gen12">
    <div class=" x-panel x-panel-noborder"id="ext-comp-1002" style="width: 1221px">
        <div class="x-panel-bwrap" id="ext-gen12">
            <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
             id="ext-gen13"style="width: 1219px; height: 1073px">
                <div class="SD_TabHeader">
                     My content here
                </div>
            </div>
        </div>
    </div>
    </div>
    Possible Fix:
    • none provided

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,066
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    First off you haven't specified a width for your tab panel.

    Secondly, the test case is very difficult to verify because
    a) You've modified the css of the base library
    b) It includes lots of other css/styles

    You'll need to produce a more cut down test case without external files and the default css.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2009
    Location
    Seattle, Washington USA
    Posts
    200
    Vote Rating
    0
    geewhizbang is on a distinguished road

      0  

    Default


    What if I want the panel to grow into the available space? You don't permit width: 100% so I didn't specify the width at all.

    I am having a similar problem with the height. I don't want to specify the height either, but to get it to work at all i had to do that.

    I don't think my CSS had anything to do with this, but I will prepare a pared down version tomorrow.

    If my css does have something to do with this, you have another bug, which is specifying no borders on the tab panel still gives you a very inconvenient line separating the panel from the body on the default css, which is why I modified the CSS.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, width:'100%' is indeed not supported, but you could use my FitToParent plugin to accomplish the same.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Shouldn't you be using a Viewport to handle all page layouts anyway?

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    This thread has been in the INFOREQ state for more than 2 weeks and no new information has been posted. I'm going to mark this thread as CLOSED. Please post previously requested information to have the thread re-opened.