4

Is there any way to remove the blue border that is placed around the component created in a visualforce page. When the component is clicked on the border appears. I have yet to find a way to remove it

Stupid border VF Page

    <apex:includeLightning/>

    <script>

        $Lightning.use("c:myTestApplication", function () {
            $Lightning.createComponent(
                    "c:myTestComponent",
                    {},
                    "theLocation",
                    function (cmp) {

                    });
        });

    </script>


        <div id="theLocation" tabindex="-1">
        </div>

</apex:page>

Lightning Application

<aura:application access="GLOBAL" extends="ltng:outApp" description="myTestApplication">
    <aura:dependency resource="ChargentP2:myTestComponent"/>
</aura:application>

Lightning Component

<aura:component description="myTestComponent">

    <div>
        Some text
    </div>
</aura:component>

I believe this is the most basic I can get it and it replicates well. The border is annoying......

1
  • 1
    I believe it's coming from slds-has-focus, but I'm kind of surprised it does this, as I would only expect input/textarea/select elements to have this.
    – sfdcfox
    Commented Jan 7, 2017 at 3:01

1 Answer 1

5

Remove tabindex="-1" from the <div> or try adding a style element to the VF page that contains:

#theLocation {
    outline: none;
}
1
  • the tabindex was the issue.....That was a holdover from the div previously being a modal div.....Nice catch and thank you.
    – Eric
    Commented Jan 7, 2017 at 11:58

You must log in to answer this question.

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