Q:

ui:inputDateTime Icons Are Not Formatted Correctly - How to Fix?

When using the standard ui:inputDateTime component, I'm finding that the date and time picker icons are not formatted inside the field as expected:

I'm using the following code (simplified for space):
<body>
  <div class="slds-container--center slds-container--x-large">
    <div class="myapp">
      <div class="slds-grid slds-wrap slds-grid--pull-padded">
        <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--9-of-12">
          <div class="slds-grid slds-m-top--large">
            <div class="slds-col slds-col-rule--center slds-p-center--large slds-size--12-of-12">
              <article class="slds-card">
                <section class="slds-card__body">
                  <div class="slds-p-horizontal--small slds-size--1-of-1 slds-medium-size--4-of-12">
                    <div class="slds-form-element slds-hint-parent slds-m-bottom--medium">
                      <span class="slds-form-element__label">Vendor Receipt Date/Time</span>
                      <div class="slds-form-element__control">
                        <ui:inputDateTime aura:id="start" class="slds-input"
                                        value="{!v.rmaWrapper.rma.RMA_Vendor_Receipt_Date__c}"
                                        displayDatePicker="true"
                                        labelClass="slds-form-element__label"
                        />
                      </div>
                    </div>
                    <div class="slds-form-element slds-hint-parent slds-m-bottom--medium">
                      <span class="slds-form-element__label">Vendor Complete Date/Time</span>
                      <div class="slds-form-element__control">
                        <ui:inputDateTime aura:id="start" class="slds-input"
                                        value="{!v.rmaWrapper.rma.RMA_Vendor_Complete_Date__c}"
                                        displayDatePicker="true"
                                        labelClass="slds-form-element__label"
                        />
                      </div>
                    </div>
                  </div>
                </section>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Can anyone suggest what is wrong?I'm using force:slds in the app and I'm not using any custom css on this page. Thanks!

A:

Add This code To css
.THIS .slds-input{
    margin: -15px !important;
}
.THIS .uiInput--datetime .timePicker-openIcon{
    left: 0px !important;
}
.THIS .uiInput--datetime .datePicker-openIcon{
    left: 0px !important;
}
.THIS .slds-card{
   padding: 15px !important;
}

