3

html element in component : sample.cmp

<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

sample.css

.THIS .heading{
    padding: 1rem;
    border-bottom: 2px solid #d2522a;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #f9f9f9;
}

I have include this component in a lightning app. The problem is, above css is not applied to the div with class 'heading'. Also, it is not shown in Google chrome console styles. I had to add inline style to the div to make it work. But I cannot add inline css to every element because this is happening with other elements too. Am I missing something?

1
  • 1
    did you tried .THIS.heading{ your css } Feb 6, 2017 at 14:25

1 Answer 1

4
<div class="slds-text-heading--large heading">
    Activity Dashboard
</div>

if your div is top level element then you have to use

.THIS.heading

in your stylesheet. salesforce documentation

2
  • I used .THIS .heading but it is not working. Feb 7, 2017 at 5:41
  • I made a mistake here. I did not notice that there is no space in .THIS.heading. This solution works. Thanks @Manjot Singh Feb 7, 2017 at 5:53

You must log in to answer this question.

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