diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md index a3639f6fa7..e40903ac93 100644 --- a/docs/en-US/component/form.md +++ b/docs/en-US/component/form.md @@ -37,7 +37,7 @@ To prevent this behavior, you can add `@submit.prevent` on ``. When the vertical space is limited and the form is relatively simple, you can put it in one line. -:::demo Set the `inline` attribute to `true` and the form will be inline. After ^(2.3.6), the ElInput component will get a fixed width to avoid the width change caused by the clearable icon. +:::demo Set the `inline` attribute to `true` and the form will be inline. form/inline-form @@ -125,25 +125,24 @@ form/accessibility ### Form Attributes -| Name | Description | Type | Default | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------- | -| model | Data of form component. | ^[object]`Record` | — | -| rules | Validation rules of form. | ^[object]`FormRules` | — | -| inline | Whether the form is inline. | ^[boolean] | false | -| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right | -| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | '' | -| label-suffix | Suffix of the label. | ^[string] | '' | -| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false | -| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left | -| show-message | Whether to show the error message. | ^[boolean] | true | -| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false | -| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false | -| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true | -| size | Control the size of components in this form. | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — | -| disabled | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean] | false | -| scroll-to-error | When validation fails, scroll to the first error form entry. | ^[boolean] | false | -| scroll-into-view-options | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object]`Record` / ^[boolean] | — | - +| Name | Description | Type | Default | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------- | +| model | Data of form component. | ^[object]`Record` | — | +| rules | Validation rules of form. | ^[object]`FormRules` | — | +| inline | Whether the form is inline. | ^[boolean] | false | +| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right | +| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | '' | +| label-suffix | Suffix of the label. | ^[string] | '' | +| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false | +| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left | +| show-message | Whether to show the error message. | ^[boolean] | true | +| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false | +| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false | +| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true | +| size | Control the size of components in this form. | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — | +| disabled | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean] | false | +| scroll-to-error | When validation fails, scroll to the first error form entry. | ^[boolean] | false | +| scroll-into-view-options | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object]`Record` / ^[boolean] | — | ### Form Events @@ -237,6 +236,6 @@ interface FormItemRule extends RuleItem { trigger?: Arrayable } type FormRules = Partial>> - ``` + diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 912d6cba31..829b9366f6 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -183,3 +183,15 @@ input/length-limiting | select | select the text in input element | ^[Function]`() => void` | | textarea | HTML textarea element | ^[object]`Ref` | | textareaStyle | style of textarea | ^[object]`Ref` | + +## FAQ + +#### Why is the width of the ElInput component expanded by clearable? + +Typical issue: [#7287](https://github.com/element-plus/element-plus/issues/7287) + +PS: Since the ElInput component does not have a default width, when the clearable icon is displayed, the width of the component will be expanded, which can be solved by setting width. + +```vue + +``` diff --git a/docs/examples/form/inline-form.vue b/docs/examples/form/inline-form.vue index bdb68631b0..a07f20da09 100644 --- a/docs/examples/form/inline-form.vue +++ b/docs/examples/form/inline-form.vue @@ -40,3 +40,9 @@ const onSubmit = () => { console.log('submit!') } + + diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss index a41848bba5..0f6e35aad0 100644 --- a/packages/theme-chalk/src/form.scss +++ b/packages/theme-chalk/src/form.scss @@ -91,13 +91,6 @@ $form-item-label-top-margin-bottom: map.merge( display: block; } } - - .#{$namespace}-input { - @include set-css-var-value( - 'input-width', - getCssVar('form-inline-content-width') - ); - } } @each $size in (large, default, small) {