Print this page

Salesforce1 and Lightning Experience unexpected styling or UI behavior after opening a Lightning Component tab

Knowledge Article Number 000231069
Description If your Lightning Component uses an external CSS resource there is a possibility that the custom CSS will affect the styling and behavior of other areas of Salesforce1 and Lightning Experience. Users may notice text aligned incorrectly, font that is larger or smaller than usual, buttons that no longer work as expected, or other unexpected behavior.
Resolution Styling Components for Salesforce1 and Lightning Experience

To prevent styling conflicts in Salesforce1 and Lightning Experience, prefix your external CSS with a unique namespace. For example, if you prefix your external CSS declarations with .myBootstrap, wrap your component markup with <div> tag that specifies the myBootstrap class.

<ltng:require styles="/resource/bootstrap"/>
<div class="myBootstrap">
    <c:myComponent />
    <!-- Other component markup -->

Note: Prefixing your CSS with a unique namespace only applies to external CSS. If you're using CSS within a component bundle, the .THIS keyword becomes .namespaceComponentName during runtime. For further information please refer to the Lightning Components Developer's Guide.

promote demote