fix: add relative positioning to div wrapper

- This commit addresses the positioning issue of `auro-dropdown` when `auro-datepicker` is placed inside `auro-dialog` component. Related issue: AuroSelect#187 Changes to be committed: modified: package-lock.json modified: src/auro-datepicker.js modified: src/style.scss
AlaskaAirlines · Jun 10, 2024 · 190e89d · 190e89d
1 parent 04dae17
commit 190e89d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/auro-datepicker.js b/src/auro-datepicker.js
@@ -850,7 +850,7 @@ export class AuroDatePicker extends LitElement {
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div>
+      <div class="outerWrapper">
         <${this.dropdownTag}
           for="dropdownMenu"
           bordered

diff --git a/src/style.scss b/src/style.scss
@@ -35,6 +35,10 @@
   }
 }
 
+.outerWrapper {
+  position: relative;
+}
+
 .datepickerElement-helpText {
   margin: var(--ds-size-50, $ds-size-50) 0;
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);