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>
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer

You must log in to answer this question.

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