Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Artem Kalus 7Artem Kalus 7 

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: 
<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:
User-added image
AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:
User-added image



Has anyone seen this before? If yes, any solutions?
Best Answer chosen by Artem Kalus 7
Dushyant SonwarDushyant Sonwar
Hi Artem ,

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. 
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" doctype="html-5.0" lightningStylesheets="true">


Final Code will be something like this below : 
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" doctype="html-5.0" lightningStylesheets="true">
     
    <style>
        body .rich-tabhdr-cell-active, .slds-scope .rich-tabhdr-cell-active {
        border-bottom-color: #0070d2 !important;
        font-weight: 700 !important;
        color: #3e3e3c !important;
        }
        .rich-tab-active  , .rich-tab-inactive , .rich-tabpanel-content {
        background-image: none;
        background-color: transparent;
        border-style: none;
        }
        .rich-tabpanel-content {
            color : none !important;
        }
    </style>
    <apex:form >
    <!-- 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:commandButton action="{!debugFun}" rerender="pbId" value="Test" oncomplete="loadSliderScript();"/>
                    
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!wrList}" var="w" style="font-size:13px;font-family : 'Salesforce Sans', Arial, sans-serif">
                    <apex:column >
                        <c:PracticeSliderComponent num="{!w.ind}"/>
                    </apex:column>
                    <apex:column value="{!w.a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
        
    </apex:tabPanel>
    
    
    </apex:form>
</apex:page>

 

All Answers

Dushyant SonwarDushyant Sonwar
Hi Artem ,

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.  
<style>
            body .rich-tabhdr-cell-active, .slds-scope .rich-tabhdr-cell-active {
                border-bottom-color: #0070d2 !important;
                font-weight: 700 !important;
                color: #3e3e3c !important;
            }
            .rich-tab-active  , .rich-tab-inactive , .rich-tabpanel-content {
                background-image: none;
                background-color: transparent;
                border-style: none;
            }
        
        </style>

 Hope this helps.
Artem Kalus 7Artem Kalus 7
Thank you Dushyant,

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 
<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="{!wrList}" var="w">
                    <apex:column >
                        <c:PracticeSliderComponent num="{!w.ind}"/>
                    </apex:column>
                    <apex:column value="{!w.a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
    </apex:tabPanel>
    
    <style>
        body .rich-tabhdr-cell-active, .slds-scope .rich-tabhdr-cell-active {
        border-bottom-color: #0070d2 !important;
        font-weight: 700 !important;
        color: #3e3e3c !important;
        }
        .rich-tab-active  , .rich-tab-inactive , .rich-tabpanel-content {
        background-image: none;
        background-color: transparent;
        border-style: none;
        }
        
    </style>
</apex:page>

CONTROLLER 
public class PracticeCompGrid_Cont {

    public List <Account> accList;
    public List <wrapCl> wrList {get;set;}
    
    public PracticeCompGrid_Cont (){
        accList = [SELECT Name FROM Account LIMIT 10];
        
        
        wrList = new List <wrapCl> ();
        for(Integer i = 0;i<accList.size();i++){
            wrList.add(new wrapCl(i,accList[i]));
        }
    }
    
    public void debugFun(){
        System.debug('Acc: '+accList);
    }
    
    public class wrapCl{
        public integer ind {get;set;}
        public Account a {get;set;}
        
        public wrapCl(Integer i, Account acc){
            ind = i;
            a = acc;
        }
        
    }
}


SLIDER COMPONENT 
<apex:component >
    <!--apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.11.4.custom/external/jquery/jquery.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jquery-ui-1.11.4.custom/jquery-ui.js')}"  /-->
    
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"  />
    <apex:stylesheet value="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    
    
    <script>                        
    var j$ = jQuery.noConflict();
    
    
    j$( function() {
        var num = "#slider-range{!num}";
        var j$slider = j$(num);
        
        var amt = "#amount{!num}";
        var j$amt = j$(amt);
        
        j$slider.slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                j$amt.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        
        
        j$amt.val( "$" + j$slider.slider( "values", 0 ) +
                 " - $" + j$slider.slider( "values", 1 ) );
    } );
    </script>
    
    
    
    <apex:attribute name="num" description="This is a column index."
                    type="Integer" required="true"/>
    
    
    <table cellpadding="2" cellspacing="2">
        <tr>
            <td style="font-weight:bold;">Number to display:<br/>
                <label for="amount{!num}">Price range:</label>
                <output type="text" id="amount{!num}" style="border:0; color:#f6931f; font-weight:bold;"/>
            </td>
            <td style="font-weight:bold;">Number to display:<br/>
                <div id="slider-range{!num}"></div>
            </td>
        </tr>
    </table>
    
</apex:component>

BEFORE RERENDER
User-added image

AFTER RERENDER
User-added image
Dushyant SonwarDushyant Sonwar
Hi Artem ,

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. 
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" doctype="html-5.0" lightningStylesheets="true">


Final Code will be something like this below : 
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" doctype="html-5.0" lightningStylesheets="true">
     
    <style>
        body .rich-tabhdr-cell-active, .slds-scope .rich-tabhdr-cell-active {
        border-bottom-color: #0070d2 !important;
        font-weight: 700 !important;
        color: #3e3e3c !important;
        }
        .rich-tab-active  , .rich-tab-inactive , .rich-tabpanel-content {
        background-image: none;
        background-color: transparent;
        border-style: none;
        }
        .rich-tabpanel-content {
            color : none !important;
        }
    </style>
    <apex:form >
    <!-- 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:commandButton action="{!debugFun}" rerender="pbId" value="Test" oncomplete="loadSliderScript();"/>
                    
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!wrList}" var="w" style="font-size:13px;font-family : 'Salesforce Sans', Arial, sans-serif">
                    <apex:column >
                        <c:PracticeSliderComponent num="{!w.ind}"/>
                    </apex:column>
                    <apex:column value="{!w.a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
        
    </apex:tabPanel>
    
    
    </apex:form>
</apex:page>

 
This was selected as the best answer