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 !

Improve this question
4
  • 1
    You could check in developer tools whether some properties are being overriden by the slds classes.
    – Santanu Halder
    Commented Jul 5, 2016 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
    Commented Jul 5, 2016 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
    Commented Jul 5, 2016 at 13:55
  • Great! Glad you found out the issue. Post that as an answer please.
    – Santanu Halder
    Commented Jul 6, 2016 at 11:06

2 Answers 2

Reset to default
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.

Improve this answer
0
2

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .