mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
fix(input, textarea, select): use consistent sizes (#28390)
aIssue number: resolves #28388 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> We added a `min-height: 56px` to the input, textarea, and select components for MD mode. However, these were added for the outline/solid style inputs to align with the Material Design spec: https://material-components.github.io/material-components-web-catalog/#/component/text-field They should not apply to regular inputs in an item. The end result is inconsistently sized items when used with non-control items. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Non-filled and non-stacked/floating label controls are now have a minimum height of 44px. There should be **no changes** to the following types of controls: 1. iOS controls (all variants) 2. MD filled controls 3. MD stacked controls ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.5.2-dev.11697818830.1a33c881` --------- Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
@ -28,24 +28,6 @@
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
// Input Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(:not(.legacy-input)) {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Since the label sits on top of the element,
|
||||
* the component needs to be taller otherwise the
|
||||
* label will appear too close to the input text.
|
||||
*/
|
||||
:host(.input-label-placement-floating),
|
||||
:host(.input-label-placement-stacked) {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
|
||||
// Input - Disabled
|
||||
// ----------------------------------------------------------------
|
||||
// The input, label, helper text, char counter and placeholder
|
||||
|
||||
Reference in New Issue
Block a user