1

This question already has an answer here:

I have the following component:

<div aura:id="appr">
    <ui:button aura:id="approveButton"  press="{!c.handleFirstPress}" label="Approve" />
</div>
<div aura:id="subm" class="hide">
    <ui:button aura:id="submitButton"  press="{!c.handleSecondPress}" class="hide" label="Submit" />
</div>

And javascript that utilizes the following CSS to toggle the buttons' visibility:

.THIS.hide {
display: none !important;
visibility: hidden !important;
}

.THIS.show  {
display: block !important;
visibility: visible !important;
}

Relevant Javascript:

handleFirstPress : function(cmp) {
    var approveBtn = cmp.find("appr");
    var submitBtn = cmp.find("subm");

    $A.util.toggleClass(approveBtn, "hide");
    $A.util.toggleClass(submitBtn, "show");
}

But when I wrap the component snippet in a another div, the CSS is no longer applied and the buttons remain visible even when I try to toggle their visibility.

<div class="foo" > 
    <div aura:id="appr">
        <ui:button aura:id="approveButton"  press="{!c.handleFirstPress}" label="Approve" />
    </div>
    <div aura:id="subm" class="hide">
        <ui:button aura:id="submitButton"  press="{!c.handleSecondPress}" class="hide" label="Submit" />
    </div>
</div> 

Why does this happen?

Is it a lack in frontend knowledge, or lightning component related?

How can I solve it?

Thank you in advance!

marked as duplicate by martin, Boris Bachovski, Ashwani, Ratan Paul, Gaurav Kheterpal Jul 12 '16 at 6:30

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

You have to put a space when the element in the component is not a top level element:

.THIS .hide {
    display: none !important;
    visibility: hidden !important;
}

.THIS .show  {
    display: block !important;
    visibility: visible !important;
}

For more info, see the online help.

  • 1
    The space being important because when there is no space the element that is matched must have both the THIS class as well as the hide (or show) classes directly on that element. With the space, you are instead looking for an element with a THIS class and then some descendant that has the other class. A good example of the difference: css-tricks.com/multiple-class-id-selectors – Mark Pond Jul 12 '16 at 0:50

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