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">


    applyDynamicStyles : function(component,event){
    var device = $A.get("$Browser.formFactor");
    var instructionsPane = component.find('instructionsPane');
    if(device == 'PHONE'){
        $A.util.addClass(instructionsPane, 'slds-border_top');
        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.

  • 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, 2019 at 17:43
  • when I added afterRender in renderer.js ,the component didn't load entirely.
    – mvk1991
    Nov 27, 2019 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, 2019 at 18:26
  • tried this as well..yes console logss show proper phone device details.
    – mvk1991
    Dec 3, 2019 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, 2019 at 13:04

3 Answers 3


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}">

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}">

Component Controller

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

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.


What if you try using ternaries ?


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

component :

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

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

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)

You must log in to answer this question.

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