1. #1
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    380
    Vote Rating
    0
    christocracy is on a distinguished road

      0  

    Default css crosstalk with nested tabpanels in LayoutManger

    css crosstalk with nested tabpanels in LayoutManger


    there's css crosstalk between .ytabs-top and .ytabs-bottom with nested regions.

    if you nest a BorderLayout having region with {tabPosition:top} within a region that has {tabPosition:bottom}, the nested top tabs will experience crosstalk from the parent's bottom tabs.

    as a quick fix, I modified the css for .ytabs-top in tabs.css.
    my fix will only work for 1 level of recursive tabs (and it's still not perfect).

    Code:
    /* new style tabs on top */
    .ytabs-top .tabset, .ytabs-bottom .ytabs-top .tabset{
    	border-bottom:1px solid #6593cf;
    	border-top: 0;
    }
    .ytabs-top .tabset .hd li,#comment-cn .tabset .hd em,#comment-cn .tabset .hd strong {
    	font-size:9px !important;
    	font-family:tahoma,arial,helvetica;
    }
    .ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd em {
    	padding-left:10px;padding-right:10px;
    }
    .ytabs-top .tabset .hd li.on em{
    	color:#083772;
    }
    
    .ytabs-top .tabset .hd li.on strong, .ytabs-bottom .ytabs-top .tabset .hd li.on strong {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-right-bg.gif) no-repeat top right;
    }
    .ytabs-top .tabset .hd li.on em, .ytabs-bottom .ytabs-top .tabset .hd li.on em {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-left-bg.gif) no-repeat;
    }
    .ytabs-top .tabset .hd li.on, .ytabs-bottom .ytabs-top .tabset .hd li.on{
    	position: relative;
    	top: 0px;
    }
    .ytabs-top .tabset .hd li a, .ytabs-bottom .ytabs-top .tabset .hd li a{
    	background-color:none;
    	background: url(../images/grey/tabs/tab-inactive-right-bg.gif) no-repeat top right;
    }
    .ytabs-top .tabset .hd li em, .ytabs-bottom .ytabs-top .tabset .hd li em {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-inactive-left-bg.gif) no-repeat;
    }

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Thanks for posting. I'm sure this will save someone many a headache.

  3. #3
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    380
    Vote Rating
    0
    christocracy is on a distinguished road

      0  

    Default Improved tabs.css

    Improved tabs.css


    here's a better version:

    * this is just the css for .ytabs-top / .ytabs-bottom -- not the whole file.

    Code:
    /* new style tabs on top */
    .ytabs-top .tabset, .ytabs-bottom .ytabs-top .tabset{
    	border-bottom:1px solid #6593cf;
    	border-top: 0;
    }
    
    .ytabs-top .tabset .hd li,#comment-cn .tabset .hd em,#comment-cn .tabset .hd strong {
    	font-size:9px !important;
    	font-family:tahoma,arial,helvetica;
    }
    .ytabs-top .tabset .hd li, .ytabs-bottom .ytabs-top .tabset .hd li {
    	border-bottom: 1px solid #6593cf;
    }
    
    .ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd em {
    	padding-left:10px;padding-right:10px;
    }
    .ytabs-top .tabset .hd li.on em{
    	color:#083772;
    }
    .ytabs-top .tabset .hd li,.ytabs-top .tabset .hd em,.ytabs-top .tabset .hd strong,
    .ytabs-bottom .ytabs-top .tabset .hd li, .ytabs-bottom .ytabs-top .tabset .hd em, .ytabs-bottom .ytabs-top .tabset .hd strong {
    	font:bold 12px tahoma,arial,helvetica;
    }
    
    .ytabs-top .tabset .hd li.on strong, .ytabs-bottom .ytabs-top .tabset .hd li.on strong {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-right-bg.gif) no-repeat top right;
    }
    .ytabs-top .tabset .hd li.on em, .ytabs-bottom .ytabs-top .tabset .hd li.on em {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-left-bg.gif) no-repeat;
    }
    .ytabs-top .tabset .hd li.on, .ytabs-bottom .ytabs-top .tabset .hd li.on{
    	position: relative;
    	top: 1px;
    	border-bottom: 0;
    }
    .ytabs-top .tabset .hd li a, .ytabs-bottom .ytabs-top .tabset .hd li a{
    	background-color:none;
    	background: url(../images/grey/tabs/tab-inactive-right-bg.gif) no-repeat top right;
    }
    .ytabs-top .tabset .hd li em, .ytabs-bottom .ytabs-top .tabset .hd li em {
    	background-color:none;
    	background: url(../images/grey/tabs/tab-inactive-left-bg.gif) no-repeat;
    }
    
    /* Tabs on the bottom */
    .ytabs-bottom .tabset{
    	border-bottom: 0px none;
    	border-top: 1px solid #6593cf;
    }
    
    .ytabs-bottom .tabset .hd{
    	margin:0px;
    }
    
     .ytabs-bottom .tabset .hd li {
     	margin-right: 2px;
    	padding: 0;
    }
    
    .ytabs-bottom .tabset .hd li,.ytabs-bottom .tabset .hd em,.ytabs-bottom .tabset .hd strong {
    	font:bold 9px tahoma,arial,helvetica;
    }
     .ytabs-bottom .tabset .hd em{
    	padding-left: 10px;
    	padding-right: 10px;
    }
    
    .ytabs-bottom .tabset .hd li.on em{
    	color: #083772;
    }
    .ytabs-bottom .tabset .hd li.on{
    	position: relative;
    	top: -1px;
    }
     .ytabs-bottom .tabset .hd li.on strong{
    	border-bottom: 0px none;
    	margin-bottom: 0px;
    	white-space: nowrap;
    	background-color: none;
    	background: url(../images/grey/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
    
    }
    .ytabs-bottom .tabset .hd li.on em{
    	border-bottom: 0px;
    	white-space: nowrap;
    	background-color: none;
    	background: url(../images/grey/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
    }
    .ytabs-bottom .tabset .hd li a{
    	white-space: nowrap;
    	background-color: none;
    	background: url(../images/grey/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
    }
     .ytabs-bottom .tabset .hd li em{
    	background-color: none;
    	background: url(../images/grey/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
    }

Similar Threads

  1. How to restorestate for tabpanels?
    By qiuyl in forum Community Discussion
    Replies: 4
    Last Post: 24 Jun 2008, 12:40 PM
  2. Nested layout example (bug ?)
    By karimchebani in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 20 Mar 2007, 5:37 AM
  3. dynamic tabpanels
    By ungaro in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 12 Mar 2007, 4:58 PM
  4. TabPanels - beforetabchange help?
    By wiredmonkey in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 26 Feb 2007, 6:27 AM
  5. nested layout panel
    By faizur in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 22 Oct 2006, 12:27 PM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar