0

I have the following CSS Selector in an aura component:

.THIS .slds-grid:last-child .slds-col:nth-last-child(1):nth-child(odd) lightning-formatted-text{
    width: calc(50% - 2rem);
}

.THIS .slds-grid:last-child .slds-col:nth-last-child(1):nth-child(odd){
    margin-left: 0;
    margin-right: 2rem;
}

I want to be able to add them only when thisattribute is true:

<aura:attribute name="stretchLastField" type="Boolean"/>

The attribute value is changed in the design component.

How can i do this in Javascript\css?

UPDATE

This is the updated markup

<div class="{!'slds-grid full cols-2 forcePageBlockSectionRow'+(v.stretchLastField?'':' dont-stretch-last')}">
        <div class="slds-col">
            <lightning:recordForm
                recordId="{!v.recordId}"
                objectApiName="{!v.sObjectName}"
                columns="2"
                fields="{!v.fieldsList != null ? v.fieldsList : ''}"
                mode="{!v.viewMode}" 
                onsubmit="{!c.onSubmit}"
                onerror="{!c.onError}"
                oncancel="{!c.onCancel}"/> 
        </div>
    </div>  

CSS

.THIS .slds-grid.dont-stretch-last:last-child .slds-col:nth-last-child(1):nth-child(odd) lightning-formatted-text{
    width: calc(50% - 2rem);
    display: inline-block;
}

.THIS .slds-grid.dont-stretch-last:last-child .slds-col:nth-last-child(1):nth-child(odd){
    margin-left: 0;
    margin-right: 2rem;
    display: inline-block;
}

i see it in the rendered element but its not applied to the last child enter image description here

1

You need to include an additional (custom) CSS class so that you can bind an expression somewhere:

.THIS .slds-grid.stretch-last:last-child .slds-col:nth-last-child(1):nth-child(odd) lightning-formatted-text{
    width: calc(50% - 2rem);
}

.THIS .slds-grid.stretch-last:last-child .slds-col:nth-last-child(1):nth-child(odd){
    margin-left: 0;
    margin-right: 2rem;
}

Which you can then apply in markup:

<div class="{!'slds-grid'+(v.stretchLastField?' stretch-last':'')}">
  ...
  • the div that contains slds-grid is <div class="slds-grid full cols-2 forcePageBlockSectionRow">. How do i apply the same on that? can't seem to make it work. – Dana Griff Aug 26 at 9:51
  • @DanaGriff {!'slds-grid full cols-2 forcePageBlockSectionRow'+(v.stretchLastField?' stretch-last':'')} should do it. If for some reason not, it's probably a matter of a stray space somewhere. For example, if the div is top-most level, the selector should be .THIS.slds-rid.stretch-last:last-child ... (note, no space in there). You might also want to inspect the rendered element to make sure all style names are present. – sfdcfox Aug 26 at 9:55
  • i see it in the rendered element, but it's not applied to the last child, as the selector should. – Dana Griff Aug 26 at 10:04
  • @DanaGriff I just took a look, it appears that lightning-formatted-text is "display: inline;" Try adding an extra CSS attribute display: inline-block; to those two CSS rules, see if that fixes it. – sfdcfox Aug 26 at 10:10
  • didn't work, i have updated the question with the updated code – Dana Griff Aug 26 at 10:16

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.