search

infor-design / enterprise-wc

Enterprise-grade web component library for the Infor Design System
Apache License 2.0
27 stars 26 forks source link

IdsDatePicker/IdsDropdown: Extra Space issue #2611

Open ashachodavarapu opened 1 month ago

ashachodavarapu commented 1 month ago

Team: ION Notification Center Describe the bug Some extra space is added when we use the date picker in the card. If I remove the date picker, the additional space disappears. I observed that it takes up space for the open calendar by default. The space is removed once the date is selected and the calendar closes. This issue occurs initially during loading.

To Reproduce For reproduction Of this issue Try to add the below code in angular examples and observe the issue?

<ids-container role="main" padding="8" hidden>
  <ids-theme-switcher mode="light"></ids-theme-switcher>
  <ids-layout-grid auto-fit="true" padding="md">
    <ids-text font-size="12" type="h1">Cards (Auto Fit)</ids-text>
  </ids-layout-grid>
  <ids-layout-grid>
    <ids-layout-grid-cell>
      <div id="demo-card-auto-fit">
        <ids-card auto-fit="true" no-header="true" auto-height="true">
          <div slot="card-content">
            <ids-text font-size="20" type="h2" overflow="ellipsis" tooltip="true">Auto Fit to parent size (400 x 500)</ids-text>
              <ids-multiselect id="multiselect-2" label="Test Multiselect (max choices 3)" max="3" dirty-tracker="true">
                  <ids-list-box>
                      <ids-list-box-option class="multiselect-option" id="al2" value="al" tooltip="The State of Alabama"><ids-checkbox no-margin label="3" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ak2" value="ak" tooltip="The State of Alaska"><ids-checkbox no-margin label="Alaska" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="az2" value="az" tooltip="The State of Arizona"><ids-checkbox no-margin label="Arizona" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ar2" value="ar" tooltip="The State of Arkansas"><ids-checkbox no-margin label="Arkansas" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ca2" value="ca" tooltip="The State of California"><ids-checkbox no-margin label="California" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="co2" value="co" tooltip="The State of Colorado"><ids-checkbox no-margin label="Colorado" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="nj2" value="nj" tooltip="The State of New Jersey" selected><ids-checkbox no-margin checked="true" label="New Jersey" class="justify-center"></ids-checkbox></ids-list-box-option>
                  </ids-list-box>
              </ids-multiselect>
              <ids-multiselect id="multiselect-2" label="Test Multiselect (max choices 3)" max="3" dirty-tracker="true">
                  <ids-list-box>
                      <ids-list-box-option class="multiselect-option" id="al2" value="al" tooltip="The State of Alabama"><ids-checkbox no-margin label="3" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ak2" value="ak" tooltip="The State of Alaska"><ids-checkbox no-margin label="Alaska" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="az2" value="az" tooltip="The State of Arizona"><ids-checkbox no-margin label="Arizona" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ar2" value="ar" tooltip="The State of Arkansas"><ids-checkbox no-margin label="Arkansas" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ca2" value="ca" tooltip="The State of California"><ids-checkbox no-margin label="California" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="co2" value="co" tooltip="The State of Colorado"><ids-checkbox no-margin label="Colorado" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="nj2" value="nj" tooltip="The State of New Jersey" selected><ids-checkbox no-margin checked="true" label="New Jersey" class="justify-center"></ids-checkbox></ids-list-box-option>
                  </ids-list-box>
              </ids-multiselect>
              <ids-multiselect id="multiselect-2" label="Test Multiselect (max choices 3)" max="3" dirty-tracker="true">
                  <ids-list-box>
                      <ids-list-box-option class="multiselect-option" id="al2" value="al" tooltip="The State of Alabama"><ids-checkbox no-margin label="3" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ak2" value="ak" tooltip="The State of Alaska"><ids-checkbox no-margin label="Alaska" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="az2" value="az" tooltip="The State of Arizona"><ids-checkbox no-margin label="Arizona" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ar2" value="ar" tooltip="The State of Arkansas"><ids-checkbox no-margin label="Arkansas" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="ca2" value="ca" tooltip="The State of California"><ids-checkbox no-margin label="California" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="co2" value="co" tooltip="The State of Colorado"><ids-checkbox no-margin label="Colorado" class="justify-center"></ids-checkbox></ids-list-box-option>
                      <ids-list-box-option class="multiselect-option" id="nj2" value="nj" tooltip="The State of New Jersey" selected><ids-checkbox no-margin checked="true" label="New Jersey" class="justify-center"></ids-checkbox></ids-list-box-option>
                  </ids-list-box>
              </ids-multiselect>
              <ids-layout-grid-cell>
                  <ids-date-picker
                          id="rangepicker-no-value"
                          [attr.label]="'Date'"
                          use-range="true"
                          format="M/d/yyyy"
                          placeholder="true"
                          mask="true"
                          size="lg"
                          (change)="updateDateRangeField()"
                  ></ids-date-picker>
              </ids-layout-grid-cell>
          </div>
        </ids-card>
      </div>
    </ids-layout-grid-cell>
  </ids-layout-grid>
</ids-container>

Expected behavior Additional space shouldn't be added.

Version

Screenshots Please observe the video: https://github.com/user-attachments/assets/26ea14db-1661-430f-9270-034f97124f4a

Additional context When I added only one dropdown, a scrollbar appeared on the card, making its width the same as the open calendar. However, in the case of text, no scrollbar was added, please observe the snippet. image

ashachodavarapu commented 1 week ago

Latest Observations: Hi @tmcconechy, Below are my latest observations related to this ticket As mentioned above, I believe the picker width is also being accounted for during the initial load, causing an unnecessary horizontal scroll to be added to the card, which is not needed=> image overflow is added to the card image I observed that once the picker is opened, the horizontal scroll bar disappears, and the extra space at the bottom and side is removed. image

To fix the initial horizontal scroll issue, which is unnecessary, we manually hid the overflow-x. However, this caused an issue during zooming, as the scroll bar is not added to the card because of the hidden overflow-x. If I remove the hidden property for overflow-x, the zooming works, but as I mentioned, extra space is added at the bottom and sides at different zoom levels, like 150%. Observe the scroll length

image

please observe the video below=>

  1. Initially, I am displaying the picker that is already opened.
  2. Extra space is added during the initial load.

https://github.com/user-attachments/assets/f511159f-2fb5-42d9-8e47-ad3210d0972b