Tabs and dynamically generated content #2074

Closed
chrismcclellan opened this Issue Apr 1, 2013 · 6 comments

Comments

Projects
None yet
7 participants
@chrismcclellan

This is true in Chrome 26 && FF >= 16 on OSX v10.8.3

When dynamically generating markup client side - tabs break.
The third tab title itself is shown but not the content area.

Upon resizing the browser all tabs show up as well as the content area.
http://i47.tinypic.com/33z37sz.jpg

@mrsweaters

This comment has been minimized.

Show comment
Hide comment
@mrsweaters

mrsweaters Apr 1, 2013

Member

For now you can call $('[data-section]').trigger('resize'); after you add the element to the page. Foundation has no way of knowing if a new element has been added, so you have to tell it.

I just pushed this update to sections:
ee75cc1

This allows you to call $(scope).foundation('section', 'reflow');

And eventually you will be able to do $(scope).foundation('reflow'); and it will check each plugin to see whether or not something needs to be updated.

Member

mrsweaters commented Apr 1, 2013

For now you can call $('[data-section]').trigger('resize'); after you add the element to the page. Foundation has no way of knowing if a new element has been added, so you have to tell it.

I just pushed this update to sections:
ee75cc1

This allows you to call $(scope).foundation('section', 'reflow');

And eventually you will be able to do $(scope).foundation('reflow'); and it will check each plugin to see whether or not something needs to be updated.

@mixxorz

This comment has been minimized.

Show comment
Hide comment
@mixxorz

mixxorz Apr 4, 2013

I call $(document).foundation('section'); after loading client side generated section elements. This fixes the display issues, but the tabs themselves won't work. (They don't switch. Clicking does nothing)

I've tried combinations of the above code and $('[data-section]').trigger('resize'); to no avail.

Note: this only happens when the window size is small. Tabs work if they are loaded when the window is medium up. If they are loaded when the window is small, the tabs do not work.

Also note that I have not tested this out with a phone (if that would make a difference).

mixxorz commented Apr 4, 2013

I call $(document).foundation('section'); after loading client side generated section elements. This fixes the display issues, but the tabs themselves won't work. (They don't switch. Clicking does nothing)

I've tried combinations of the above code and $('[data-section]').trigger('resize'); to no avail.

Note: this only happens when the window size is small. Tabs work if they are loaded when the window is medium up. If they are loaded when the window is small, the tabs do not work.

Also note that I have not tested this out with a phone (if that would make a difference).

@ghost ghost assigned mrsweaters May 19, 2013

@SimonBirrell

This comment has been minimized.

Show comment
Hide comment
@SimonBirrell

SimonBirrell Jul 20, 2013

+1 to Mitchel's problem. Changing the reflow command to

 $(this).foundation('document', 'reflow');

seemed to fix both display issues and the tab switching. However now the data-dropdown elements inside the tabs don't work!!

+1 to Mitchel's problem. Changing the reflow command to

 $(this).foundation('document', 'reflow');

seemed to fix both display issues and the tab switching. However now the data-dropdown elements inside the tabs don't work!!

@geoprobe

This comment has been minimized.

Show comment
Hide comment
@geoprobe

geoprobe Sep 5, 2013

For the googler who happens upon this thread: what is currently working for me with Foundation 4.3.1 is:

Foundation.libs.section.reflow();

geoprobe commented Sep 5, 2013

For the googler who happens upon this thread: what is currently working for me with Foundation 4.3.1 is:

Foundation.libs.section.reflow();
@nfriend21

This comment has been minimized.

Show comment
Hide comment
@nfriend21

nfriend21 Sep 26, 2013

Geoprobe - thanks man, just copy and pasted your suggestion and it worked perfectly. My issue was that I was trying to add and remove sections on the fly. I needed the tabs to update their position whenever one of these changes occurred. Your solution did just that.

Geoprobe - thanks man, just copy and pasted your suggestion and it worked perfectly. My issue was that I was trying to add and remove sections on the fly. I needed the tabs to update their position whenever one of these changes occurred. Your solution did just that.

@seantimm

This comment has been minimized.

Show comment
Hide comment
@seantimm

seantimm Oct 17, 2013

Contributor

Calling reflow is the correct solution for refreshing against dynamic content for now. Normally, this is done via either:

$(document).foundation('reflow') - to reflow all components

or

$(document).foundation('section', 'reflow') - to reflow just the section component.

Contributor

seantimm commented Oct 17, 2013

Calling reflow is the correct solution for refreshing against dynamic content for now. Normally, this is done via either:

$(document).foundation('reflow') - to reflow all components

or

$(document).foundation('section', 'reflow') - to reflow just the section component.

@seantimm seantimm closed this Oct 17, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment