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?

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

1 Answer 1

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%;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .