1. #1
    Ext JS Premium Member christocracy's Avatar
    Join Date
    Oct 2006
    Location
    Montreal
    Posts
    381
    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
    17
    jack.slocum will become famous soon enough 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
    381
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi