You need to sign in to do that
Don't have an account?

Visualforce apex:tabPanel style problem when rerendering page with lightningStyleSheets
I have a visualforce page, that implemnts lightningStyleSheets="true" and has apex:tabPanel with multiple tabs. When user is in Lightnig Experience and any button is pressed on the same page, which causes a component rerendering, tabs styling changes to classic.
VF PAGE:
CONTROLLER:
BEFORE BUTTON IS PRESSED:

AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:

Has anyone seen this before? If yes, any solutions?
VF PAGE:
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" lightningStylesheets="true"> <!-- Create Tab panel --> <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab"> <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab> <apex:tab label="Two" name="name2" id="tabTwo"> <apex:pageBlock id="pbId"> <apex:pageBlockButtons > <apex:form > <apex:commandButton action="{!debugFun}" rerender="pbId" value="Test" /> </apex:form> </apex:pageBlockButtons> <apex:pageBlockTable value="{!accList}" var="a"> <apex:column value="{!a.Name}" /> </apex:pageBlockTable> </apex:pageBlock> </apex:tab> </apex:tabPanel> </apex:page>
CONTROLLER:
public class PracticeCompGrid_Cont { public List <Account> accList {get;set;} public PracticeCompGrid_Cont (){ accList = [SELECT Name FROM Account LIMIT 10]; } public void debugFun(){ System.debug('Acc: '+accList); } }
BEFORE BUTTON IS PRESSED:
AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:
Has anyone seen this before? If yes, any solutions?
Your component is using a output tag which is a html 5 tag . When you rerender the pageblock , tag disappears from your html.
You need to set a doctype , so that your output tag does not disappears.
Final Code will be something like this below :
All Answers
Currently lightning stylesheets is in beta , there are some components that may not render css properly .
You can use below css in your visualforce page.
Hope this helps.
It deffinitely makes it less painfull to look at the page after rerender, but unfortunataly does not solve the problem completely.
I have also noticed another problem with the rerender while using the jQuery range slider on the same page:
VF PAGE
CONTROLLER
SLIDER COMPONENT
BEFORE RERENDER
AFTER RERENDER
Your component is using a output tag which is a html 5 tag . When you rerender the pageblock , tag disappears from your html.
You need to set a doctype , so that your output tag does not disappears.
Final Code will be something like this below :