function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
grcjgrcj 

inputField with Date type custom field overwrites custom css styles

Hi,

 

I am creating a VF page with custom stylesheets ( <apex:page standardStylesheets="false">)

I'm trying to create an registration form which updates my custom object.

 

 

<apex:page sidebar="false" standardStylesheets="false" showHeader="false" controller="MyObjectController">
<head>
<apex:stylesheet value="{!URLFOR($Resource.common, 'common/css/mystyles.css')}"/>
</head>
<body>

<apex:form id="registrationForm">

<table>
<tr>
<th>Name<span class="important">*</span></th>
<td><apex:inputText value="{!myObj.Name}" size="40" maxlength="120" styleClass="input-m"/></td>
</tr>
<tr>
<th>Start date<span class="important">*</span></th>
<td><!--apex:inputField value="{!myObj.start_date__c}" styleClass="input-m"/--></td>
</tr>
</table>

....

 

Everything works fine until I include <apex:InputField> tag with Date type custom field (commented out in the code above).

However, once I uncomment the inputField with myObj.start_date__c (Date type field), my custom styles seemed to be overwritten and styles got messed up.

Seems like when I include Date type field, "common.css" got loaded and override the styles.

 

What is the best way to avoid this problem?

Is there any way to disable loading default stylesheets with Date type inputField?

 

Thanks and best regards,

 

 

_Prasu__Prasu_

try setting standardStylesheets= false for apex:page.

<apex:page sidebar="false" standardStylesheets="false" showHeader="false" controller="MyObjectController" standardStyleSheets="false" >
SSRS2SSRS2

If you set false showHeader and standardStylesheets any ’.css’ file is not rendered for VF page. Render (preview) the VF page and check page source. See whether there is any '.css' file included in preview page source.

 

<apex:page standardStylesheets="false" showHeader="false" controller="MyObjectController">
  <apex:stylesheet value="{!URLFOR($Resource.common, 'common/css/mystyles.css')}"/>
  <apex:form id="registrationForm">
    <table>
      <tr>
        <th>Start date<span class="important">*</span></th>
        <td><apex:inputField value="{!myObj.start_date__c}" styleClass="input-m"/></td>
      </tr>
    </table>
  </apex:form>
</apex:page>

 -Suresh

 
grcjgrcj

I've set standardStylesheets="false", but still doesn't work when I uncomment <apex:inputField value="{!myObj.start_date__c}" styleClass="input-m"/>.

 

I looked at the HTML source, and when I commented out date type inputField, it includes my custom css file only, as follows:

 

<link class="user" href="/resource/1282056749000/common/common/css/import.css" rel="stylesheet" type="text/css" />

 

 

but when I enable date type inputField, it includes following css:

 

<link class="user" href="/resource/1282056749000/common/common/css/import.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/19.0/sprites/1280952851000/Theme2/ja/elements.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/19.0/sprites/1280952851000/Theme2/ja/common.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/19.0/sprites/1281554860000/Theme2/dStandard.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/19.0/sprites/1281554860000/Theme2/00DA0000000KeV6/005A0000000RiNF/dCustom0.css" rel="stylesheet" type="text/css" /><link class="user" href="/sCSS/19.0/sprites/1280952851000/Theme2/ja/setup.css" rel="stylesheet" type="text/css" />

 

 

So seems like date type inputField forces standard stylesheets to be included?

 

Best regards,
grcjgrcj

I've noticed that I used "InputText" instead of "InputField" to display Name field, so I changed it to InputField,

 

 

<th>Name<span class="important">*</span></th>
<td><apex:inputField value="{!myObj.Name}" styleClass="input-m"/></td>
</tr>

 

 

then it also broke the page layout.

 

So it means that when I use <apex:inputField>, standard stlyesheets are always included even if I set standardStylesheets="false", no matter if the field is date type or not?

 
rklaassenrklaassen

Found a solution for this issue? I've noticed it before and the only thing you can do is to avoid all inputField (and outputFields). The problem is that I would really like to use the standard functionality for these fields (picklists for example).