diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 2efe979ff8..0c1eadc172 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -181,6 +181,7 @@ button, a { :host(.item-label-stacked) ::slotted(ion-select), :host(.item-label-floating) ::slotted(ion-select) { --padding-start: 0; + align-self: stretch; width: 100%; @@ -188,6 +189,24 @@ button, a { max-width: 100%; } + +// Item Datetime +// ----------------------------------------- + +:host(.item-label-stacked) ::slotted(ion-datetime), +:host(.item-label-floating) ::slotted(ion-datetime) { + --padding-start: 0; + + width: 100%; +} + + +// Item w/ Multiple Inputs +// ----------------------------------------- +// Multiple inputs in an item should have the input cover +// relative to them instead of the item + +:host(.item-multiple-inputs) ::slotted(ion-datetime), :host(.item-multiple-inputs) ::slotted(ion-select) { position: relative; } diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index c13ef865e0..41bd8aab83 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -1,4 +1,4 @@ -import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; +import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; import { createColorClasses, hostContext, openURL } from '../../utils/theme'; @@ -16,6 +16,8 @@ export class Item implements ComponentInterface { @Element() el!: HTMLStencilElement; + @State() multipleInputs = false; + @Prop({ context: 'window' }) win!: Window; /** @@ -113,6 +115,10 @@ export class Item implements ComponentInterface { button.size = 'small'; } }); + + // Check for multiple inputs to change the position to relative + const inputs = this.el.querySelectorAll('ion-select, ion-datetime'); + this.multipleInputs = inputs.length > 1 ? true : false; } private isClickable(): boolean { @@ -133,7 +139,8 @@ export class Item implements ComponentInterface { [`item-lines-${this.lines}`]: !!this.lines, 'item-disabled': this.disabled, 'in-list': hostContext('ion-list', this.el), - 'item': true + 'item': true, + 'item-multiple-inputs': this.multipleInputs } }; }