4

I developed a really simple page where I have several apex bar charts, based on values calculated in an apex controller.

Now, when I put the charts into a <div class="slds"></div>, the bars do not render ! The charts appear, but the bar do not :

Rendered in classic : Rendered in classic

Not rendered in slds : Not rendered in slds

The code :

<div class="slds">    
    <div class="slds-grid">
        <div class="slds-col--padded">
            <apex:chart data="{!listCAEnCours}" height="400" width="700">
                <apex:axis type="Numeric" position="left" fields="Valeur" title="Total HT" grid="true" minimum="0"/>
                <apex:axis type="Category" position="bottom" fields="Libelle" title="Retard"/>
                <apex:barSeries title="Retard de créance" orientation="vertical" axis="left" xField="Libelle" yField="Valeur">
                    <apex:chartTips height="20" width="100" valueField="Valeur" />
                </apex:barSeries>
            </apex:chart>
        </div>
        <div class="slds-col--padded">
            <apex:chart data="{!listCAFacture}" height="400" width="700">
                <apex:axis type="Numeric" position="left" fields="Valeur" title="Total HT" grid="true" minimum="0"/>
                <apex:axis type="Category" position="bottom" fields="Libelle" title="Retard"/>
                <apex:barSeries title="Mois" orientation="vertical" axis="left" xField="Libelle" yField="Valeur">
                    <apex:chartTips height="20" width="100" valueField="Valeur" />
                 </apex:barSeries>
             </apex:chart>
         </div>
     </div>                
</div>

As I said, really simple...

Did someone already faced that issue ?

Thanks !

  • 1
    You could check in developer tools whether some properties are being overriden by the slds classes. – Santanu Halder Jul 5 '16 at 9:35
  • Well thank you, because actually there was a css property in slds which was entering in conflict with the whole page. So for those who are wondering, you have to add into your page .slds [hidden], .slds template { display: block; } ; that means you cannot use the property hidden on any html tag into your page. – Julien Gaïotto Jul 5 '16 at 9:52
  • @JulienGaïotto Please post that as the answer to your question for the benefit of others who might encounter the same issue at some point in time and want to search for a question with an answer. Thank you. – crmprogdev Jul 5 '16 at 13:55
  • Great! Glad you found out the issue. Post that as an answer please. – Santanu Halder Jul 6 '16 at 11:06
2

To resolve that issue, you actually have to add some style to your VFPage / Lightning Component :

.slds [hidden], .slds template {
    display: block;
}

Don't forget to add .THIS before the classes if you are building a Lightning Component.

2

In my case I had to add "-scope" to the css reference.

.slds-scope [hidden], .slds-scope template {
              display: block;
            }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.