javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): add the multiple inputs class to fix select/datetime in item

Browse Source 
references #15547 closes #15401
This commit is contained in:
Brandy Carney
2018-09-18 15:43:29 -04:00
parent 224b4f83b2
commit 1cd792efff
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/item/item.scss
View File

@ -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;
}

11
core/src/components/item/item.tsx
View File

@ -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
}
};
}