13

We are working on some Lightning Components for a Salesforce Community. We are using our own template which is bare bones.

Here's the code:

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes">

<ltng:require styles="/resource/slds2_0_2/assets/styles/salesforce-lightning-design-system.min.css" />

    <ui:inputDateTime label="Meeting Time" class="slds-input" displayDatePicker="true"/>
</aura:component>

In our community, it looks like this:

Messy CSS/JS DateTimepicker

in LEX and in Napili it looks as expected and of course, we don't need the ltng:require tag in there.

Are there any workarounds for this issue?

  • The ltng:require tag could be actively causing this, if they have moved on from that version. – Caspar Harmer Aug 3 '16 at 20:35
  • Tried that. It is required for the rest of the styling. Problem remains. – Jake Richter Aug 4 '16 at 14:02
  • 1
    My team is experiencing this issue as well. I am curios to hear solution. – CoryCowgill Aug 4 '16 at 18:27
  • I think wrapping the fields inside <div class="slds"><!-- fields --></div> scope might help you. – itzmukeshy7 May 9 '17 at 6:59
  • 1
    I don't have a time picker, but you can use my datepicker. github.com/rapsacnz/DatePicker – Caspar Harmer Jun 2 '17 at 10:54
0

Try this code.

Component:-

<aura:component access="global" implements="forceCommunity:availableForAllPageTypes">  
<ltng:require styles="/resource/slds2_0_2/assets/styles/salesforce-lightning-design-system.min.css" />
<fieldset class="slds-box slds-theme--default slds-container--small">
    <legend id="newexpenseform" class="slds-text-heading--small
                                       slds-p-vertical--medium">
        Your Code
    </legend>

    <form class="slds-form--stacked">

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <ui:inputDate aura:id="meetTime" label="Meeting Time"
                              class="slds-input"
                              labelClass="slds-form-element__label"
                              displayDatePicker="true"/>
            </div>
        </div>
    </form>
</fieldset>

Style:-

.THIS .uiInputDate .datePicker-openIcon {
    position: absolute;
    left: 95%;
    top: 55%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.