0

I'm trying to render an Apex:outoutpanel with some Text based on certain criteria within an Inline VF page. I will be adding Lightning Design within this panel. But looks like it doesn't properly showing up. Here's my code:

<apex:form id="map_Form">

    <!--Displays the Map-->
        <apex:outputPanel rendered="false">
            <div style="width: 100%;" id="mapDiv">
                    <div id="map" style="width: 60%; height: 600px; float: left;margin:0px;color:black;"></div>
                    <div id="panel" style="width: 40%; float: left;margin:0px;"></div>
                </div>
    </apex:outputPanel>
        <!--End of the Map-->

        <!--Displays Validation message-->
        <apex:outputPanel rendered="true">
                <div class="slds-text-color--error">Error shows here!</div>
        </apex:outputPanel>  
        <!--End of the validation message--> 

</apex:form>

This 'Error shows here!' is still a plain text. Any thoughts??

Improve this question
2
  • Have you added the SLDS CSS in your Static Resource and included it your page? Also, include all your components within a div with your scoping class. You have to do that, otherwise the slds classes won't be recognized. Trailhead may help.
    – S..
    Apr 24, 2017 at 10:25
  • @N.B. There's no need to use the static resource. There's a new apex:slds that provides your page with the latest SLDS automatically.
    – sfdcfox
    Apr 24, 2017 at 10:43

2 Answers 2

Reset to default
3

Visualforce pages are served up in an iframe, and so do not inherit Lightning's CSS by default. You need to manually import SLDS if you intend to use it:

<apex:page>
<apex:slds />
<div class="slds-scope">
    <!-- your page here -->
</div>
</apex:page>
Improve this answer
0

It is now possible for Visualforce pages within Lightning Experience to be automatically styled with Lightning Design System.

Automatically Style Existing Visualforce Pages with Lightning Experience Stylesheets (Beta)

It takes your standard Visualforce components and re-styles them when viewed within Lightning Experience. This may be useful in scenarios such as these.

Improve this answer

You must log in to answer this question.

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