3

I am trying to add dynamic style one of lightning layout, the code goes till the device identification yet it doesn't apply the proper style.

Here is my code:-

<lightning:layout aura:id="instructionsPane" class="slds-p-around_small">

Controller:

    applyDynamicStyles : function(component,event){
    var device = $A.get("$Browser.formFactor");
    console.log('device--->'+device);
    var instructionsPane = component.find('instructionsPane');
    if(device == 'PHONE'){
        $A.util.addClass(instructionsPane, 'slds-border_top');
    }
    else{
        console.log('InsideDesktop adding class to Instructions pane');
        $A.util.addClass(instructionsPane, 'slds-border_left');
    }
}

Same thing works properly when I apply in static,however I need make it dynamic based on device.

9
  • When are you trying to add this class? You will need to ensure that the DOM has rendered before you can apply it. Typically in afterRender().
    – Jayant Das
    Nov 27 '19 at 17:43
  • when I added afterRender in renderer.js ,the component didn't load entirely.
    – mvk1991
    Nov 27 '19 at 18:07
  • If you are testing this out in a Chrome simulator, you may like to verify the console logs. Have you tried handling the render event instead?
    – Jayant Das
    Nov 27 '19 at 18:26
  • tried this as well..yes console logss show proper phone device details.
    – mvk1991
    Dec 3 '19 at 9:20
  • I can say with a recent experience that $Browser.formFactor is having issues with Winter '20. We have an implementation where we are using similar approach to identify the device and it is not working (used to work prior to Winter '20). We have opened a case to Salesforce and are still waiting to hear back. This could be possibly the same issue. I will update once I hear back.
    – Jayant Das
    Dec 3 '19 at 13:04
2

I see two approaches to implement this.

1) Add top-level div into your component with form factor class.

Component Markup

<div class="{!$Browser.formFactor}">
...
</div>

Component Style

.THIS.PHONE .someClass,
.THIS.TABLET .someClass{
    /*common for both styles*/
}

.THIS.TABLET .someClass{
    /*tablet only styles*/
}

.THIS.PHONE .someClass{
    /*phone only styles*/
}

@media (max-width: 480px) {
    .THIS.PHONE .someClass,
        /*some media based styles for phone*/
    }
}

2) If you need custom and dynamic form factor you may implement next: Component Markup

<aura:attribute name="customFormFactor" type="String" />
<div class="{!v.customFormFactor}">
...
</div>

Component Controller

doInit : function(component, event, helper) {
    window.addEventListener('resize', $A.getCallback(function(){
        if(some size) {
            component.set('v.customFormFactor', 'MOBILE')
        } else if(...){}
        else{...}
    }));
}

Component style

/*The same as in the first approach*/

In this case, it would be a really dynamic form factor definition. But I would say this is redundant because devices never change their form factor on the fly.

1

What if you try using ternaries ?

controller:

 doInit: function(component,event){
    const device = $A.get("$Browser.formFactor");
    component.set('v.device',device);
 }

component :

<aura:attribute name="device" type="string">

<div class="{!(v.device == 'PHONE')?'slds-border_top':'slds-border_left'}"></div>
0

I think you can't change the look & feel of component for Mobile devices. It replicates the look & feel from Desktop version.

As far as I know, you can only control the visibility of different components on mobile & desktop, like which need to be shown on desktop & which need to be shown on mobile
(This option is available when you go into 'Edit Page' section)

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.