Here are some tips for configuring the CSS for components that you plan to use in
Lightning pages, the Lightning App Builder, or the Community Builder.
- Components must be set to 100% width
- Because they can be moved to different locations on a Lightning page, components must
not have a specific width nor a left or right margin. Components should take up 100% of
whatever container they display in. Adding a left or right margin changes the width of a
component and can break the layout of the page.
- Don’t remove HTML elements from the flow of the document
- Some CSS rules remove the HTML element from the flow of the document. For
example:
float: left;
float: right;
position: absolute;
position: fixed;
- Because they can be moved to different locations on the page as well as used on
different pages entirely, components must rely on the normal document flow. Using floats
and absolute or fixed positions breaks the layout of the page the component is on. Even
if they don’t break the layout of the page you’re looking at, they will break the
layout of some page the component can be put on.
- Child elements shouldn’t be styled to be larger than the root element
- The Lightning page maintains consistent spacing between components, and can’t do that
if child elements are larger than the root element.
For example, avoid these
patterns:
<div style="height: 100px">
<div style="height: 200px">
<!--Other markup here-->
</div>
</div>
<!--Margin increases the element’s effective size-->
<div style="height: 100px">
<div style="height: 100px margin: 10px">
<!--Other markup here-->
</div>
</div>