css - 标准 salesforce css 直到 Action 函数才加载

Question

我正在一个 visualforce 页面上工作，在带有日期字段的自定义对象上使用 inputField，看起来像这样:

<apex:page id="myVisualForcePage" showheader="false" controller="myController">
    <apex:composition template="myTemplate">
        <apex:define name="body">
            <apex:outputpanel id="fullPage">
                <div class="form-group">

                    !A bunch of other stuff!

                    <label class="col-xs-4">My Date</label>
                    <div class="col-xs-8">
                        <apex:inputfield id="myDate" styleClass="form-control" value="{!myControllerObject.MyCustomDateField__c}"/>
                    </div>
                </div>
            </apex:outputpanel>
        </apex:define>
    <apex:composition>
</apex:page>

由于某些原因，在调用 actionFunction 之前，datePicker 在页面加载时没有被正确格式化。

这似乎是因为一些标准的 salesforce css 样式类在调用之前不会在页面加载时加载。

加载页面时，我们可以看到 datePicker 没有与之关联的标准 elements.css 类，也没有指向样式类的链接:

Datepicker Element

Datepicker Element Styling

CSS links before callout

调用 action 函数后，我们可以在下面看到加载了所有 salesforce 的标准 css 样式类，并且日期选择器现在具有已加载的 element.css 中的样式元素:

Newly loaded css styling links

New element styles for date picker

如果有人知道为什么会发生这种情况以及如何确保在页面加载时加载资源，我将不胜感激!

作为更新，如果我显式加载以下资源，它将正常工作:

<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>

但是，我不需要在其他页面上执行此操作，我想知道为什么？这可能是 API 的差异吗？

Answer 1

通过指定 showHeader=false您声明您不希望页面上出现任何 SF“开销”，包括样式表。

检查 <apex:page> 并考虑明确添加 standardStylesheets="true" ...理论上这是默认设置，但看起来您发现了一些有趣的行为 (u)r。

standardStylesheets: A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header if the showHeader attribute is set to false. If set to true, the standard stylesheets are added to the generated page header. If not specified, this value defaults to true. By setting this to false, components that require Salesforce.com CSS may not display correctly, and their styling may change between releases.