I am working on a visualforce page using an inputField on custom object with a date field and looks something like this:
<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>
For some reason the datePicker is not being formatted correctly on page load until an actionFunction is called.
This appears to be because the some of the standard salesforce css styling classes do not load on page load until the call is made.
When the page is loaded, we can see that the datePicker does not have the standard elements.css class associated with it and there is no link to the style class:
Datepicker Element
Datepicker Element Styling
CSS links before callout
Following a call to the action function, we can see below that all of salesforce's standard css styling classes are loaded and that the datepicker now has styling elements from element.css which was loaded:
Newly loaded css styling links
New element styles for date picker
If anyone has any information about why this may be happening and how to ensure the resources are loaded on page load I would really appreciate it!
As an update, if I load the following resource resource explicitly then it will work correctly:
<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>
However, I do not need to do this on other pages and I am wondering why? Could this be a difference in API's?
By specifying showHeader=false you're declaring you don't want any SF "overhead" on your page, including stylesheets.
Check <apex:page> and consider explicitly adding standardStylesheets="true"... In theory it's a default but looks like you uncovered some funny behavio(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.
For anyone who has this issue, try changing your visualforce page's API version. I find that v39 works fine but I had a page on v41 and v44 that both had this problem.
Related
How do I add an attribute to an iframe created in Ext Js 7.5.1? I have an iframe component and would like to add the attribute allow="geolocation *" to the iframe element.
Using the autoEl configuration mentioned here adds the attribute to the wrapping <div> not the <iframe> itself, which doesn't provide the desired behavior. Adding it after render also mentioned here does not appear to provide the desired behavior. I'm not exactly sure why, my guess is because it is added after the component is rendered, not "in" the component as it is being rendered, although I may be wrong on this.
For our web-components library we are using Lit framework, but recently we have discovered the bug that whenever our custom web components are included into the form, they are getting ignored by form reset(). Do you know how to force custom web components to be included into form.reset()?
<form>
<custom-input-field
id="title"
name="title"
value="Check out our library"
></custom-input-field>
<input type="reset">
</form>
You might want to take a look at form-associated custom elements.
This'll allow custom elements to participate in forms and let you implement a formResetCallback() to reset your custom element to its default state on form reset.
As of writing (Aug 2022), form-associated custom elements via ElementInternals are available for Chrome and Firefox, and just got implemented for Safari.
I've implemented GTM on my website. I'm wondering if is possible to add custom HTML/JS in a specific position of the DOM.
This is what I've inserted in my page:
<div class="myClass">
<p>foo</p>
<script>
dataLayer.push({'event':'myEvent'})
</script>
</div>
and on GTM I've set up a tag with this html:
<div class="test">this is a test</div>
<iframe src="www.foo.com" />
which is triggered on myEvent.
Unfortunatly this is not working correctly, my tag is inserted at the bottom of my web page and not inside the myClass div.
Am I doing something wrong or this is just not allowed by GTM?
Thanks.
"Not allowed" is perhaps a bit strong (as you can see it works to some extent), but tags that change visual aspects of the page are generally not recommended.
If you want to insert HTML at a specific location it would be better to create the element dynamically via javascript and append it to an existing element, so your HTML tag would look something like (untested):
<script>
var myDiv = document.createElement('div');
myDiv.setAttribute('class','test');
var container = document.querySelector('.myClass');
container.append(myDiv);
</script>
You would need to make sure that the element you append to is unique (if possible add an id rather than a class name). Tags are executed asynchronously, so it's a bit hard to say at which point in the loading process the HTML is appended (this will cause a reflow in the DOM which is an expensive operation for the client, so you do not want to do this too often).
I have a command button which i bind its action method.
<f:view >
<pm:page title="Title">
<pm:view id="viewId" swatch="c">
<p:outputPanel id="panelId">
<h:form id="formId">
<p:commandButton action="#{bean.actionMethod}" update="formId" value="Click" />
</h:form>
</p:outputPanel>
</pm:view>
</pm:page >
</f:view>
Inside action method. the navigation refers the same page. Some values are updated inside action method.
public String applyPeriod(String caller)
{
.....
retrun SAMEPAGE;
}
Every thing is ok. but the styles is not rendered. the page returns to the default styles.
Any idea how i can load the styles. I do not want to change URL by doing real refresh. i should managed it by ajax calls.
I trace the requests of the page. There is exactly no call for styles.
I use primefaces, primefaces mobile and it is a mobile page.
If you didn't use : behind your form's ID I believe the problem can be related to a relative component search, trying to finding the form based on a relative identifier. By using the different element's ID you're getting the expected behaviour, I pressume because they're correctly referenced in a relative way to the context of your <p:commandButton/>.
Try using either update="#form" or update=":formId". Also, as a side note, if you want to use full ajax and you won't be redirecting the user anywhere, your method should either be void or return null.
I really do not know the reason behind the scenes. However, i solved the issue by giving exact components ids to update attributes of commandButton.
<p:commandButton action="#{bean.actionMethod}" update="ListOfComponentIds" value="Click" />
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.