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

mfranzke · web-flow · commit 5608141b2e99 · 2023-05-26T13:34:09.000Z
fix: auto-width inner native element #1406
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

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,9 @@`
`6`	`6`
`7`	`7`	`// 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`
`8`	`8`	`--db-ic-expand-more-20: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAI9JREFUOE/tktENgCAMRB8buImOoJPrCLqJG2guEWOwIETil/1pSNuX61FH5XCVefzA945+4uEMbMAArBHNDTAedfWdYSkUsAWULaiHdcACKCeBGpgi0BDWh1vEPLSgUqE1vbIbTA2pTwmh6k/CnoCqX6F6yzNTmTcx52w8VDNJWI7C4kvPUVgE/YFFdpnNO7s0HhVghjmfAAAAAElFTkSuQmCC');`
	`9`	`+`
	`10`	`+ // our inner select element needs take the width of the "outer" Web Component tag`
	`11`	`+ select {`
	`12`	`+ width: 100%;`
	`13`	`+ }`
`9`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,8 @@`
`3`	`3`	`:host {`
`4`	`4`	`@extend html;`
`5`	`5`	`@extend body;`
	`6`	`+`
	`7`	`+ display: inline-block;`
`6`	`8`	`}`
`7`	`9`
`8`	`10`	`// Set the general link color inheritance`