function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sreekumar_MenonSreekumar_Menon 

SLDS



How do I show a div in x-small and  small devices only? If I add  classes  
slds-x-small-show-only  and slds-small-show-only ,only the last one take effect. 
  
<div class="slds-box slds-x-small-show-only slds-small-show-only">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>

This is my current workaround , but this duplicate the code.  
<nav class="slds-col slds-size--1-of-1">
    <br>
    <div class="slds-box slds-x-small-show-only ">
    <label>
      <input type="checkbox" ng-model="vm.showDollar">
      Dollar Value
    </label><br>
    </div>
    <div class="slds-box slds-small-show-only ">
      <label>
        <input type="checkbox" ng-model="vm.showDollar">
        Dollar Value
      </label><br>
    </div>
   </nav>

Any pointers?

sree
 
Mohammed Fairoz Ulla 3Mohammed Fairoz Ulla 3
Try it in this link and go to the data tables option, it will help a lot 

https://www.lightningdesignsystem.com/

Thanks....
Sreekumar_MenonSreekumar_Menon
Thanks for the link, I already looked there. didn't find a css class that can handle this situation.
Sreekumar_MenonSreekumar_Menon
the other option would be to wrote custom css for this, would hav prefered to see that in SLDS.