1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default tabpanel overwriting content below it

    tabpanel overwriting content below it


    I'm trying to implement a tabpanel inside a block in my website, but if I have content immediately after it, the tabs make the tabpanel element bigger, while not pushing the content below them down, instead, over writing a portion of them.

    Here's some code
    Code:
    	var profExplain = YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'profileExplain'}, true);
    	profExplain.update('test');
    
    	YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'profileView'});
    	YAHOO.ext.DomHelper.applyStyles('profileView', {height: '100px'});
    
    	var profileTabs = new YAHOO.ext.TabPanel('profileView');
    	YAHOO.ext.DomHelper.append(document.body, {tag: "div", id: "test1"});
    	profileTabs.addTab('test1', "test");
    	var testappend = YAHOO.ext.DomHelper.append('mainViewWest', {tag: 'div', id: 'test2'}, true);
    	testappend.update('test 2');
    Here's a link where you can see it
    http://whasit.com/ci/ucp Note: you have to click on "My View" to see exactly what I'm talking about.

    The "test 2" is there, you just can't see it because it's under the tab panel. Looking at the generated source in firebug, you can see it does exist.

    Sorry if this is an easy fix, I'm averaging 3-5 hours of sleep tops all this month. I've been banging at this for a while, but my brain isn't quite all there.

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

      0  

    Default


    Code:
                headerTabs = layout.add('north', new YAHOO.ext.NestedLayoutPanel(headerLayout, {fitToFrame:true}));
    and north has an initialHeight of 50. It will be 50 pixels high. You won't be able to see any tabpanel.

    Whay have you got a complex entity like a layout in a header section????

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    actually the header works fine

    What you're referring to is the nav bar at the top. That center region gets tabs updated to it depending on the login status of the user, and eventually, which page they are on. If you want to see an example feel free to make an account, the database gets reset with my local copy when I update the site.

    The problem I'm having is in the 2 large columns in the view created when you click "My View" on the sidebar in the provided link. I'm trying to populate those with a collection of views and tabpanels. The tabpanels are presenting the aforementioned problem though.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    I added more text to the testdiv to demonstrate better the problem, now you can visually see the overlap.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    appears my host has some database issues lately :| the joys of shared hosts

    however, in theory I think I have a solution I'm hoping to check soon. I think it might just be a simple case of I need to repaint the contentpanel element

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    nevermind, that didn't work

  7. #7
    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


    The tab control isn't overlapping the text. If you open it in firebug and mouse over them you will see what I mean.

    The problem is the tab body element has no height set (it's auto) and you set a height on the tab container (100px). This causes the body element to overflow the container element (as per w3c spec) and overlap the text.

    What you want to do is set the height of the body element (which is what is overflow auto), not the tab container OR you can call syncHeight() on the TabPanel and it will make sure all the heights are correct automatically (as long as the body is overflow auto or hidden).

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    321
    Vote Rating
    0
    jbowman is on a distinguished road

      0  

    Default


    I got it with the syncHeight, which I had tried before... the catch? I never activated the tab so was confused cause I wasn't seeing the content. I need sleep :p Thanks Jack.

Similar Threads

  1. tabPanel.activate vs tabPanel.activateTab
    By jon.whitcraft in forum Community Discussion
    Replies: 2
    Last Post: 10 Sep 2007, 11:21 AM
  2. tabpanel - how change content
    By rudy in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 20 Feb 2007, 6:31 AM
  3. How to retrieve a Tabpanel from another Tabpanel?
    By ines in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 1 Feb 2007, 8:35 AM
  4. TabPanel: loading content w/out AJAX
    By mapo in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 9 Jan 2007, 7:27 AM
  5. tabpanel content and javascript
    By jbowman in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 12 Sep 2006, 7:43 PM

Thread Participants: 2

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