[SalesForce] Datepicker not displaying properly lightning component

I have following lightning component.

sp.cmp

<aura:component controller="Pledge_Mgmt_Controller">

  <aura:attribute name="paymentList" type="Map[]"  />


  <div>
      <div class="slds-p-vertical_small">

          <h4 class="slds-section__title slds-theme_shade">
              <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Payments to be created</span>
          </h4>
      </div>

      <div>
          <table role="grid" class="">
              <thead>
                  <tr class="slds-text-title_caps">
                      <th scope="col"  style="width: 10%;">
                          <div class="slds-truncate">Payment Number</div>
                      </th>
                      <th scope="col">
                          <div class="slds-truncate">Schedule Date</div>
                      </th>   
                      <th scope="col">
                          <div class="slds-truncate">Payment Amount</div>
                      </th>              
                  </tr>
              </thead>


              <tbody>

                  <aura:iteration items="{!v.paymentList}"  var="paym">
                      <aura:if isTrue="{! v.paymentList.length > 0}">
                          <c:spl aura:id="itemForm" 
                                 payment="{!paym}"
                                 serialNumber="{!paym.pIndex}"/> 
                      </aura:if>
                  </aura:iteration>
              </tbody>
          </table>

      </div>

      <div class="slds-align_absolute-center slds-p-vertical_small">
          <lightning:button label="Create Payment" title="Create Payment" onclick="{! c.createPayment }"/>
      </div>
  </div>

spl.cmp

<aura:component >
    <aura:attribute name="payment" type="Map" default="{}" />

    <tr>
        <td class="slds-truncate" style="width: 10%;">            
            <ui:outputText value="{!v.payment.pIndex}" 
                           aura:id="pNumber" />
        </td>

        <td>
            <lightning:input aura:id="pScheduleDate" 
                             type="date"
                             label="" 
                             name="date"
                             variant="label-hidden"
                             value="{!v.payment.pScheduleDate}"
                             onchange="{!c.addScheduledDate}"/>
        </td>

        <td>
            <lightning:input aura:id="pNumber"
                             type="number" 
                             name="currencyVal" 
                             label="" 
                             formatter="currency" 
                             step="0.01" 
                             variant="label-hidden"
                             value="{!v.payment.pAmount}" />
        </td>
    </tr>
</aura:component>

When I add css class in the table, 

<table role="grid" class="slds-table slds-table_bordered">

date picker is not showing properly and displayed as follows

enter image description here

but when I remove the class from the table

<table role="grid" class="">

it is showing date picker in correct format but my table is messed up

enter image description here

Can anybody give me a solution so that I can show both table and date picker with correct styles?
Any help is greatly appreciated.
Thanks in advance

Best Answer

The problem occurs because the datepicker is essentially a table inside a table. It's inheriting all the styles of the outer table.

You basically need to reset all the styles for the picker and or explicitly define them. You maybe able to define the style resets outside of the picker in your host component with some experimentation (clearly the styles are leaking already)

If you have trouble doing that, you can use my picker on github here where I've already fixed this issue (I had the same problem as you a while back.)

For reference, the key css that you need to apply to the picker is this:

.THIS.clear-user-agent-styles table,
.THIS.clear-user-agent-styles thead,
.THIS.clear-user-agent-styles tbody,
.THIS.clear-user-agent-styles tfoot,
.THIS.clear-user-agent-styles tr,
.THIS.clear-user-agent-styles th,
.THIS.clear-user-agent-styles td {
  font-weight: inherit;
}

.THIS .datepicker-table {
  border-color: rgb(128,128,128);
  border-collapse: collapse;
  box-sizing: border-box;
  font-family: "Salesforce Sans",Arial,sans-serif;
  height: auto;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.THIS .datepicker-table table {
  color: rgb(22,50,92);
  display: table;
  line-height: 18px;
  width: 100%;
}

.THIS .datepicker-table thead tr {
  border-bottom-color: rgb(240, 241, 242);
  display: table-row;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
  width: auto;
}

.THIS .datepicker-table tbody {
  border-collapse: collapse;
  box-sizing: border-box;
  color: rgb(22, 50, 92);
  display: table-row-group;
  line-height: 18px;
  vertical-align: middle;
  width: auto;
}

.THIS .datepicker-table tbody tr {
  display: table-row;
}

.THIS .datepicker-table tbody tr td {
  display: table-cell;
  line-height: 18px;
  padding: .25rem;
  text-align: center;
  vertical-align: middle;
  width: auto;
  border: none;
}

As you can see I have wrapped my picker in a div with the class clear-user-agent-styles and datepicker-table

Heres's where wrapped my picker in the clear styles div:

<div aura:id="grid" id="datepicker-dropdown" class="slds-datepicker slds-dropdown slds-dropdown_left slds-hide datepicker-display-table clear-user-agent-styles "

and Here's where I defined a div of class datepicker-table

<table aura:id="maintable" class="datepicker__month datepicker-table datepicker-table" role="grid" aria-labelledby="month">

As you can see, it's much easier to apply this to a class you have full control over (such as my picker) than a built in one.

Good luck.

Related Topic