Skip to main content

I have a very standard Account record page which includes a tab set of related records, such as Opportunities, Tasks, and Events. Some of the these related records have a “New” button which when clicked displays a pop up with a page include page of the associated record.


These new record pages contain date fields, when a user clicks on the date field, the calendar pop-up should appear next to the field, but this doesn’t happen. The calendar pop-up displays below the field, quite some distance from the field, or not at all. See screenshot below of Task object record. Note the arrow next to the “Due Date” and the location of the date picker at the bottom of the page.



This same problem occurs for both Event and Opportunity records. All three are page includes viewed as a pop up through the parent Account record.


I find I am able to resolve the problem with the date picker and it’s location by removing fields from the page layout. I have also found that it doesn’t matter which fields are removed.


The page includes (Event and Task) are used on other parent record pages e.g. Opportunity. Though when i click “New” the date picker loads in the correct location.


What can i do to resolve this problem? Note the problem exists even when I remove any custom css styling.

Hi Glenn,


We had some issues with getting the date picker appearing in the correct location as well, and I couldn’t find what had caused it. But when I added the CSS below to the date fields not appearing properly, it seemed to fix the problem with the calendar appearing at the correct field, not half way down the page.


.ui-datepicker {

    position: fixed !IMPORTANT;

}


I’m not sure if it is the same issue you’re having that we had but worth a try to see if it helps you!

It doesn’t fix the issue, the date field is removed from the page layout when I load the page? So i’ve called the class “ui-datepicker”, added the code as an in-line resource, then typed ui-datepicker in CSS Class for the field properties of the associated date field. thanks for your help though, do let me know if you have other ideas :) 

Hi Glenn,


Are you seeing this issue in any browser and on Mac & Windows? Also, would you be able to set up a page using standard objects that reproduces the issue, and share the XML? 


In the past, I have seen some alignment issues that were caused when components did not have truly unique IDs. Skuid generates unique IDs for each component, but of course users can fill in their own IDs if they want. So if the component’s ID isn’t unique, I think this can confuse the positioning calculations that go on behind the scenes. Another reason you might not have unique component IDs is if you’ve copied and pasted XML from one page to another. A quick way to see if this is part of the problem would be to change the ID numbers for the affected components on each of your page includes (also keep in mind that the parent page’s IDs will be part of the equation too).

Hi Mark I’ve tried in IE, Edge, Chrome, and Firefox. Unfortunately I don’t have access to a mac.


XML for page include


<skuidpage showheader="true" personalizationmode="server" showsidebar="true" unsavedchangeswarning="yes" useviewportmeta="true">

    <models>

        <model id="MemberRecordType" datasource="salesforce" createrowifnonefound="false" query="true" unloadwarningifunsavedchanges="false" doclone="" sobject="RecordType" limit="20">

            <fields>

                <field id="Id"/>

                <field id="SobjectType"/>

                <field id="DeveloperName"/>

            </fields>

            <conditions>

                <condition type="fieldvalue" value="Member" enclosevalueinquotes="true" field="DeveloperName"/>

            </conditions>

            <actions/>

        </model>

        <model id="NewOpportunity" datasource="salesforce" createrowifnonefound="true" query="false" unloadwarningifunsavedchanges="false" doclone="" sobject="Opportunity" limit="1">

            <fields>

                <field id="Name"/>

                <field id="Probability"/>

                <field id="StageName"/>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Amount"/>

                <field id="CloseDate"/>

                <field id="LeadSource"/>

                <field id="NextStep"/>

                <field id="Description"/>

                <field id="Reason_Lost__c"/>

                <field id="Reason_Lost_Description__c"/>

                <field id="OwnerId"/>

                <field id="Owner.Name"/>

                <field id="CampaignId"/>

                <field id="Campaign.Name"/>

                <field id="RecordType.Name"/>

            </fields>

            <conditions>

                <condition type="modelmerge" value="" model="MemberRecordType" enclosevalueinquotes="true" field="RecordTypeId" operator="=" fieldtargetobjects="RecordType" mergefield="Id" novaluebehavior="deactivate"/>

                <condition type="param" value="AccId" field="AccountId" fieldtargetobjects="Account" operator="=" enclosevalueinquotes="true"/>

            </conditions>

            <actions>

                <action>

                    <actions>

                        <action type="closeAllPopups"/>

                    </actions>

                    <events>

                        <event>models.saved</event>

                    </events>

                </action>

            </actions>

        </model>

    </models>

    <components>

        <buttonset uniqueid="sk-3qaWVw-156" model="NewOpportunity">

            <buttons>

                <button type="multi" label="Save &amp;amp; Close" uniqueid="sk-BLOA_-221" cssclass="grey-button">

                    <actions>

                        <action type="save">

                            <models>

                                <model>NewOpportunity</model>

                            </models>

                        </action>

                        <action type="redirect" url="/{{Id}}" window="self"/>

                    </actions>

                </button>

            </buttons>

        </buttonset>

        <richtext multiple="false" uniqueid="sk-3mi-Ut-189" cssclass="barBackground">

            <contents>&amp;lt;p&amp;gt;Opportunity Information&amp;lt;/p&amp;gt;

</contents>

        </richtext>

        <basicfieldeditor uniqueid="sk-3mhqxR-113" model="NewOpportunity" showerrorsinline="true" mode="edit" showsavecancel="false" showheader="true" layout="">

            <columns layoutmode="fixed">

                <column width="100%" uniqueid="sk-3NF2-356">

                    <sections>

                        <section title="New Section" collapsible="no" uniqueid="sk-3NF2-357" showheader="false">

                            <fields>

                                <field id="Name" uniqueid="sk-BLOBB-230"/>

                            </fields>

                        </section>

                    </sections>

                </column>

                <column width="50%">

                    <sections>

                        <section title="Section A" showheader="false" collapsible="no">

                            <fields>

                                <field id="AccountId" uniqueid="sk-BLOBS-238" required="true">

                                    <label>Account Name</label>

                                </field>

                                <field uniqueid="sk-3NFb-519" id="RecordType.Name">

                                    <label>Record Type Name</label>

                                </field>

                                <field id="Description" uniqueid="sk-BLOC8-255"/>

                                <field id="LeadSource" uniqueid="sk-BLOBc-244"/>

                                <field id="Reason_Lost__c" uniqueid="sk-BLOCD-257"/>

                                <field id="Reason_Lost_Description__c" uniqueid="sk-BLOCE-259"/>

                            </fields>

                            <renderconditions logictype="and"/>

                        </section>

                    </sections>

                </column>

                <column width="50%">

                    <sections>

                        <section title="New Section" showheader="false" collapsible="no">

                            <fields>

                                <field id="StageName" uniqueid="sk-BLOBI-234"/>

                                <field id="Probability" uniqueid="sk-BLOBE-232"/>

                                <field id="Amount" uniqueid="sk-BLOBV-240"/>

                                <field id="CloseDate" uniqueid="sk-BLOBX-242"/>

                                <field id="NextStep" uniqueid="sk-BLOBg-246"/>

                                <field uniqueid="sk-3NF--663" id="OwnerId">

                                    <label>Owner</label>

                                </field>

                            </fields>

                        </section>

                    </sections>

                </column>

            </columns>

            <renderconditions logictype="and"/>

        </basicfieldeditor>

        <buttonset uniqueid="sk-1_DO-378" model="NewOpportunity">

            <buttons>

                <button type="multi" label="Save &amp;amp; Close" uniqueid="sk-1_DO-388">

                    <actions>

                        <action type="save">

                            <models>

                                <model>NewOpportunity</model>

                            </models>

                        </action>

                        <action type="redirect" window="self" url="/{{Id}}"/>

                    </actions>

                </button>

            </buttons>

        </buttonset>

    </components>

    <resources>

        <labels/>

        <javascript/>

        <css>

            <cssitem name="seperators" cachelocation="false" location="inline">.barBackground { 

    padding: 1px;

    background: #00557f;

    color: #FFF;

    font-weight: bold;

}</cssitem>

            <cssitem location="inline" name="seniorCss" cachelocation="false">body { 

    font-family: "Stag Sans Web Light","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;

}



.seniorSearch.sk-search .ui-autocomplete-input {

    background: #FFF;

    color: #000;

    border: 1px solid #D0D0D0;

    border-radius: 8px;

    font-size: 1.2em;

}



.sk-navigation-item.top-level {

    color: #000;

}



.sk-navigation-item.top-level:hover {

    color: #e85e13;

}



.sk-search-result-header,

.sk-search-results .sk-icon,

.sk-search-summary {

    background: #ffccaf;

    color: #000;

}



.sk-search-result.ui-menu-item {

    background: #D0D0D0;

    color: #000;

    font-size: 1.1em;

}



.sk-search-summary {

    border-bottom: solid black 1px;

    border-top: solid black 1px;

}





.ui-dialog .ui-dialog-titlebar {

    background: #383126;

    border-color: #383126;

}





























</cssitem>

        </css>

        <actionsequences uniqueid="sk-3NFb-516"/>

    </resources>

    <styles>

        <styleitem type="background" bgtype="none"/>

    </styles>

</skuidpage>

XML for parent page


<skuidpage unsavedchangeswarning="yes" useviewportmeta="true">

    <models>

        <model id="Account" datasource="salesforce" sobject="Account" createrowifnonefound="false" query="true" limit="1">

            <fields>

                <field id="Name"/>

                <field id="CreatedDate"/>

                <field id="OwnerId"/>

                <field id="Owner.Name"/>

                <field id="BillingPostalCode"/>

                <field id="LastActivityDate"/>

                <field id="Website"/>

                <field id="Description"/>

                <field id="Fax"/>

                <field id="Phone"/>

                <field id="AccountSource"/>

                <field id="AnnualRevenue"/>

                <field id="BillingAddress"/>

                <field id="BillingCity"/>

                <field id="BillingCountry"/>

                <field id="BillingGeocodeAccuracy"/>

                <field id="NumberOfEmployees"/>

                <field id="Industry"/>

                <field id="LastModifiedById"/>

                <field id="LastModifiedBy.Name"/>

                <field id="SicDesc"/>

                <field id="ShippingAddress"/>

                <field id="Trading_Name__c"/>

                <field id="ParentId"/>

                <field id="Parent.Name"/>

                <field id="Status__c"/>

                <field id="Membership_eligibility__c"/>

                <field id="Sector__c"/>

                <field id="Main_Funder__c"/>

                <field id="Type_of_Organisation__c"/>

                <field id="Merge_Status__c"/>

                <field id="UKPRN__c"/>

                <field id="Jisc_ID__c"/>

                <field id="Region__c"/>

                <field id="Geographical_Region__c"/>

                <field id="RecordTypeId"/>

                <field id="RecordType.Name"/>

                <field id="Account_Type__c"/>

                <field id="Email_Address__c"/>

                <field id="BillingState"/>

                <field id="BillingStreet"/>

                <field id="Id"/>

                <field id="Membership_Status__c"/>

                <field id="Jisc_VAT_CSG_Membership__c"/>

                <field id="Current_Membership_Bundle__c"/>

                <field id="Current_Membership_Bundle__r.Name"/>

                <field id="Co_Registered_Number__c"/>

                <field id="Owner.Username"/>

                <field id="Professional_Association_Membership__c"/>

                <field id="Priority_Status__c"/>

                <field id="Strengths__c"/>

                <field id="Weaknesses__c"/>

                <field id="Opportunities__c"/>

                <field id="Threats__c"/>

                <field id="AES_Approval_Date__c"/>

                <field id="Updates_Since_AES__c"/>

                <field id="Engagement_Tactics__c"/>

                <field id="Description_of_Engagement_Tactics__c"/>

                <field id="Topics_to_Address__c"/>

                <field id="CreatedById"/>

                <field id="CreatedBy.Name"/>

                <field id="Summary_of_Relationship__c"/>

                <field id="Opportunity_Pipeline_reviewed__c"/>

                <field id="Strategic_Contact_roles_reviewed__c"/>

                <field id="Known_explicit_needs__c"/>

                <field id="Known_implied_needs__c"/>

            </fields>

            <conditions>

                <condition type="param" value="Id" enclosevalueinquotes="true" field="Id" operator="=" novaluebehavior=""/>

            </conditions>

            <actions/>

        </model>

        <model id="ActivitiesRelationAccount" datasource="salesforce" sobject="EventRelation" createrowifnonefound="false" query="true" limit="20">

            <fields>

                <field id="EventId"/>

                <field id="Event.Subject"/>

                <field id="Id"/>

                <field id="Relation.Name"/>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="IsParent"/>

                <field id="IsInvitee"/>

                <field id="RelationId"/>

                <field id="Status"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

        <model id="ClosedOpportunities" datasource="salesforce" sobject="Opportunity" createrowifnonefound="false" query="false" limit="20" orderby="CloseDate DESC">

            <fields>

                <field id="Amount"/>

                <field id="StageName"/>

                <field id="Name"/>

                <field id="OwnerId"/>

                <field id="Owner.Name"/>

                <field id="CloseDate"/>

                <field id="Probability"/>

            </fields>

            <conditions>

                <condition type="param" value="Id" enclosevalueinquotes="true" field="AccountId" operator="=" mergefield="Id" novaluebehavior="deactivate" fieldtargetobjects="Account"/>

                <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsClosed" state=""/>

                <condition type="fieldvalue" value="Closed Lost" enclosevalueinquotes="true" field="StageName" name="Closed_Lost" state="filterableoff" inactive="true"/>

                <condition type="fieldvalue" value="Closed Won - Signed Contract" enclosevalueinquotes="true" field="StageName" name="Closed_Won" state="filterableoff" inactive="true"/>

            </conditions>

            <actions/>

        </model>

        <model id="NewActivities" type="" datasource="salesforce" sobject="Event" createrowifnonefound="false" query="true" limit="20">

            <fields>

                <field id="Id"/>

                <field id="DurationInMinutes"/>

                <field id="Subject"/>

                <field id="Type"/>

                <field id="StartDateTime"/>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Completed__c"/>

                <field id="WhatId"/>

                <field id="What.Name"/>

                <field id="WhoId"/>

                <field id="Who.Name"/>

            </fields>

            <conditions>

                <condition type="modelmerge" value="" model="Account" enclosevalueinquotes="true" field="AccountId" operator="=" mergefield="Id" novaluebehavior="deactivate" fieldtargetobjects="Account"/>

            </conditions>

            <actions/>

        </model>

        <model id="EventsRelatedTo" datasource="salesforce" sobject="Event" createrowifnonefound="false" query="true" limit="20">

            <fields>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Subject"/>

                <field id="Type"/>

                <field id="StartDateTime"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

        <model id="Contatcsmod" datasource="salesforce" sobject="Contact" createrowifnonefound="false" query="false" limit="20" orderby="LastName Asc">

            <fields>

                <field id="AccountId"/>

                <field id="Account.Name"/>

                <field id="Id"/>

                <field id="Email"/>

                <field id="Name"/>

                <field id="Phone"/>

                <field id="Account.Id"/>

                <field id="Title"/>

                <field id="Status__c"/>

            </fields>

            <conditions>

                <condition type="modelmerge" value="" model="Account" enclosevalueinquotes="true" field="Account.Id" operator="=" mergefield="Id" novaluebehavior="deactivate" fieldtargetobjects="Account"/>

            </conditions>

            <actions/>

        </model>

        <model id="StrategicAccountrolemod" datasource="salesforce" sobject="AccountContactRole" createrowifnonefound="false" query="false" limit="20">

            <fields>

                <field id="ContactId"/>

                <field id="Contact.Name"/>

                <field id="Id"/>

                <field id="IsPrimary"/>

                <field id="Role"/>

                <field id="Contact.Id"/>

                <field id="Contact.Title"/>

                <field id="Contact.Email"/>

                <field id="Contact.Phone"/>

            </fields>

            <conditions>

                <condition type="multiple" value="" enclosevalueinquotes="true" field="Role" operator="in">

                    <values>

                        <value>Administration - strategic lead</value>

                        <value>Education/L&amp;amp;T - strategic lead</value>

                        <value>Estates and facilities - strategic lead</value>

                        <value>Finance - strategic lead</value>

                        <value>International - strategic lead</value>

                        <value>Library/LRC - strategic lead</value>

                        <value>Organisational - strategic lead</value>

                        <value>Nominated strategic contact</value>

                        <value>Research - strategic lead</value>

                        <value>Technology - strategic lead</value>

                        <value>Security - Strategic Lead</value>

                        <value>Jisc Subscription Budget Holder</value>

                    </values>

                </condition>

                <condition type="modelmerge" value="" model="Account" enclosevalueinquotes="true" field="AccountId" operator="=" mergefield="Id" novaluebehavior="deactivate" fieldtargetobjects="Account"/>

            </conditions>

            <actions/>

        </model>

        <model id="AllOtherAccountrolemod" datasource="salesforce" sobject="AccountContactRole" createrowifnonefound="false" query="false" limit="20" orderby="Contact.LastName Asc">

            <fields>

                <field id="ContactId"/>

                <field id="Contact.Name"/>

                <field id="Id"/>

                <field id="IsPrimary"/>

                <field id="Role"/>

                <field id="Contact.Id"/>

                <field id="Contact.Title"/>

                <field id="Contact.Email"/>

                <field id="Contact.Phone"/>

            </fields>

            <conditions>

                <condition type="multiple" value="" enclosevalueinquotes="true" field="Role" operator="not in">

                    <values>

                        <value>Administration - strategic lead</value>

                        <value>Education/L&amp;amp;T - strategic lead</value>

                        <value>Estates and facilities - strategic lead</value>

          &

When you click “New” you’ll need to select the “Member” Opportunity record type

Hi Glenn,

I’m afraid these pages aren’t working because of how many custom fields and objects are involved. Are you able to reproduce the issue with standard objects in a simpler page? 

When you preview one of the included pages by itself, does the issue occur? Or is it only happening when the page is included? 

Also, as a test, I’d recommend changing the Unique Id for the affected field editors (the ones that have the date fields & misplaced date pickers). 

Are you using a standard or a custom theme for the page? Can you try changing the theme and see if it makes any difference?

We had a similar case where a client was using a custom theme and specified Field Input borders using em for the unit. In the theme editor, there is a setting for Field Editor > Field Input. If you specified a border here, please make sure you are using px rather than em as the unit. 

we are using a custom theme, yes. If i change Skuid so it uses “Clean Green” I still face the same problem

try the above as the parent record page, it’s only standard fields, i face the same problem with the date picker

+1, we’re having this issue as well

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings