2

A blue border is shown around slds-grid elements which disappears when inspector is opened. I have tried applying 'border:0px;', 'border-collapse:collapse' in CSS. But it didn't work.

<div class="slds-grid">
    <div class="slds-p-horizontal--small slds-size--1-of-1">
        <aura:if isTrue="{!and(v.loadTaskDistributionCmp, v.highchartsLoaded)}">
            <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center noBorderRadius df-card"> 
                <c:DFTasksDistribution userTasksData="{!v.userTasksData}"/>
            </div>
        </aura:if>
    </div> 
</div>
<br></br>

<div class="slds-grid">
    <div class="slds-p-horizontal--small slds-size--1-of-1">
        <aura:if isTrue="{!and(v.loadHighTouchContactsCmp, v.highchartsLoaded)}">
            <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center noBorderRadius contactMeetingsData df-card"> 
                <c:DFHighTouchContactsCmp contactMeetingsData="{!v.contactMeetingsData}"/> 
            </div>
        </aura:if>
    </div>
</div>
<br></br>

Blue Border around slds-grid elements

  • Can you put your markup please...are you using slds-box? – Sarang Feb 21 '17 at 5:55
  • @Sarang I have put the markup in edits. – nilesh_ramteke Feb 21 '17 at 6:40
  • I removed the slds-box class and the border is not displayed on load. but when i click on the page it is shown again. – nilesh_ramteke Feb 21 '17 at 7:25
  • Not sure if it's related, but I'm using a button element in my app that the browser was putting an unwanted blue border around, so I added "outline: 0 !important;" to that element's class, and the blue border went away. Maybe try putting that in one of your div's classes, and see if it goes away. – Florissant53 Feb 21 '17 at 17:15
  • @Florissant53 It did not work. – nilesh_ramteke Feb 22 '17 at 9:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.