fix(select): native inner element doesn't account Web Components width (

#1407) fix: auto-width inner native element #1406
db-ui · May 26, 2023 · 5608141 · 5608141
1 parent 55ea024
commit 5608141
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/db-ui-elements-stencil/src/components/db-select/db-select.scss b/packages/db-ui-elements-stencil/src/components/db-select/db-select.scss
@@ -6,4 +6,9 @@
 
   // Overwriting the referenced SVG icon as this is going to get inlined and the path would be relative to the pages URL instead of the CSS, which would break
   --db-ic-expand-more-20: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAI9JREFUOE/tktENgCAMRB8buImOoJPrCLqJG2guEWOwIETil/1pSNuX61FH5XCVefzA945+4uEMbMAArBHNDTAedfWdYSkUsAWULaiHdcACKCeBGpgi0BDWh1vEPLSgUqE1vbIbTA2pTwmh6k/CnoCqX6F6yzNTmTcx52w8VDNJWI7C4kvPUVgE/YFFdpnNO7s0HhVghjmfAAAAAElFTkSuQmCC');
+
+  // our inner select element needs take the width of the "outer" Web Component tag
+  select {
+    width: 100%;
+  }
 }
diff --git a/packages/db-ui-elements-stencil/src/components/general.scss b/packages/db-ui-elements-stencil/src/components/general.scss
@@ -3,6 +3,8 @@
 :host {
   @extend html;
   @extend body;
+
+  display: inline-block;
 }
 
 // Set the general link color inheritance