Not able to add dynamic style based on device

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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)