Apex Code Development You need to sign in to do that
Don't have an account?
Sam Kessler Rerender breaks apex:tabpanel formatting
Hey all!
I have a visualforce page using an apex:tabpanel element wrapped in an outputPanel. When I rerender the outputpanel, the formatting of the tabpanel breaks down, showing the content of all tabs stacked on the page instead of only the content of the selected tab. For the tabpanel, I'm using switchtype="client" because I think it's a smoother user experience.
If I had to guess, I would say the tabpanel element is probably using jquery to handle its tab transitions, and when the element is rerendered it's scrubbing some of the script and breaking down the display a little. I've seen some comments around HTML5 elements being scrubbed unless you specify it in the doctype, but I have specified the html-5.0 doctype and it didn't help here.
The best workaround I can think of would be to re-render only all the individual elements within the tabpanel instead of the tabpanel itself, but that would be quite a laborious implementation.
Has anyone faced anything similar or know of a better workaround to rerender a tabpanel without messing up the display format?
I have a visualforce page using an apex:tabpanel element wrapped in an outputPanel. When I rerender the outputpanel, the formatting of the tabpanel breaks down, showing the content of all tabs stacked on the page instead of only the content of the selected tab. For the tabpanel, I'm using switchtype="client" because I think it's a smoother user experience.
If I had to guess, I would say the tabpanel element is probably using jquery to handle its tab transitions, and when the element is rerendered it's scrubbing some of the script and breaking down the display a little. I've seen some comments around HTML5 elements being scrubbed unless you specify it in the doctype, but I have specified the html-5.0 doctype and it didn't help here.
The best workaround I can think of would be to re-render only all the individual elements within the tabpanel instead of the tabpanel itself, but that would be quite a laborious implementation.
Has anyone faced anything similar or know of a better workaround to rerender a tabpanel without messing up the display format?
Could you post your vf page code it will help others debug your issue?
I would suggest you to replace your apex:tabPanel switchType="client" to custom css tabs as you are using client side rerendering (switchType='Client') . I have used the apex:tabPanel , faced the rendering issue , so i replaced mine with css tabs.
There are many css tabs. You can take the idea from here . Same effect can be achieved by the custom css tab.
https://jsfiddle.net/eu81273/812ehkyf/
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active
All Answers
Could you post your vf page code it will help others debug your issue?
I would suggest you to replace your apex:tabPanel switchType="client" to custom css tabs as you are using client side rerendering (switchType='Client') . I have used the apex:tabPanel , faced the rendering issue , so i replaced mine with css tabs.
There are many css tabs. You can take the idea from here . Same effect can be achieved by the custom css tab.
https://jsfiddle.net/eu81273/812ehkyf/
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active
Frustrating that there's no solution via apex:tabPanel, as it would be nice to make it simple to manipulate and track with controller variables, but CSS tabs + javascript is a workable solution. Appreciate the input.
Sam