We are using the following css in one of our component. In security review it throws an error as follows. 1)Lightning: CSS Outside Component Code:

.THIS.wrapper-app > lightning-spinner {
    position: fixed;

THIS .calendarTable td.selectedDate .date:after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: var(--lwc-borderWidthThin,1px) solid var(--lwc-colorTextPill,rgb(0, 112, 210));
    background: transparent;
    pointer-events: none;

Error message: Please do not use fixed. float and absolute positions in css because it can break the layout.

2)Lightning: Improper CSS Load

<span class="item-circle" style="{!'background-color:'+ AccountWrapperList[0].Color +';'}"></span>

Error message: All css should be added to the .css file for that aura component. Inline css shouldn't be used in components.

All these thing are crucial in our app and using float and absolute positions in css are common in web development, does any one know how we can fix this? Or will providing a false positive document suffice?

  • Hi Rams. How were you able to resolve this? Thanks.
    – Minto Tsai
    Commented Feb 5, 2023 at 15:52

1 Answer 1


For the first issue try using the SLDS structure and styling for modals if that can work for you. You will find the various CSS classes used here explained below the examples in the "Overview of CSS Classes" section.

You might be able to use CSS variables as explained here to address the second issue.

You must log in to answer this question.

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