2

I was trying to create a visual force page but I bumped into an error. SLDS style sheets which I Included in my code is not being rendered. As a result, the entire page looks ugly without CSS.

<apex:page standardController="Event" extensions="FollowUpCtrl" showQuickActionVfHeader="true" showHeader="false" standardStylesheets="false" sidebar="false" lightningStylesheets="true" docType="html-5.0">
    <html>   
    <apex:slds />
    <apex:outputPanel rendered="{!FollowUpEvent != null}">
    <apex:form id="form" styleClass="slds-form">
        <apex:pageblock >    
            <apex:pageBlockSection columns="1">
            <style>
            <!-- bodge the styling on a combobox in VF - as VF has no combobox control -->
            input.combobox, select
            {                
                border: 1px solid #d8dde6;
                border-radius: .25rem;
                width: 100%;
                transition: border .1s linear,background-color .1s linear;
                display: inline-block;
                padding: 0 1rem 0 .75rem;
                line-height: 1.875rem;
                min-height: calc(1.875rem + (1px * 2))
            }
            a.combobox
            {
               display: none;
            }
            select:disabled
            {
                color: graytext;
            }
            </style>
                <apex:repeat value="{!FollowUpEventFieldSet}" var="fieldValue">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">

                            <!-- disabled reference/lookup field until theres more time ot style it apropriately -->
                            <!-- <apex:inputField value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'reference', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}"/> -->

                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'textarea', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}"/>                                                        
                            <apex:inputField styleClass="combobox" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'combobox', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}" type="text"/>
                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'datetime', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}" showDatePicker="false" type="datetime-local"/>
                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'date', true, false)}"     required="{!OR(fieldValue.required, fieldValue.dbrequired)}" showDatePicker="true" type="date"/>
                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'currency', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}"/>
                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'picklist', true, false)}" required="{!OR(fieldValue.required, fieldValue.dbrequired)}" />
                            <apex:inputField styleClass="slds-input" value="{!FollowUpEvent[fieldValue]}" rendered="{!IF(fieldValue.Type = 'string', true, false)}"   required="{!OR(fieldValue.required, fieldValue.dbrequired)}" type="text"/>
                           <br />
                        </div>
                    </div>
                </apex:repeat>
            </apex:pageBlockSection>
            <br/>
            <apex:commandButton style="width: 100%;" styleClass="slds-button slds-button_brand" value="{!$Label.CreateFollowupCall}" action="{!save}" oncomplete="sforce.one.navigateToSObject('{!newEventId}');" rerender="form" />
<!--            <apex:pageMessages id="messages" ></apex:pageMessages> -->
        </apex:pageblock>
    </apex:form>
    </apex:outputPanel>
         </html>
</apex:page>
1

You're using the features incorrectly, and a few of your tags are messed up. To fix this, we need to fix the first few lines of code:

<apex:page standardController="Event" extensions="FollowUpCtrl" showQuickActionVfHeader="true" sidebar="false" docType="html-5.0">
<apex:slds />

It's not necessary to use both apex:slds and lightningStylesheets, and you can't start off with an html element unless you follow the code in the example:

<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">

<head>
  <apex:slds /> 
</head>

<body class="slds-scope">
  <!-- Your SLDS-styled content -->
</body>

</apex:page>

Or, as you're probably intending:

<apex:page>
    <apex:slds />
    <!-- Your SLDS-styled content -->
</apex:page>

You can read more about this in the documentation.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.