Table of contents
question:
In daily project development, it is normal to use some basic elements such as el-input input box, el-select selector and el-date-picker date selector in a form at the same time. But there will be some basic element widths that are different, for example, the default width of el-input and el-select is different. It is very ugly when both of them appear in a form at the same time.
As shown below:
think:
Use f12 to get the width of the el-input input box, and set the width of el-select to the same width as the input input box.
The problem is solved, but there is still a BUG, so the modified value is limited to my window size. If I adjust my window size layout, there will be problems. The width of the el-input will follow the window size to adjust the width of the element. And setting a fixed width will not adjust according to the window size.
As shown below:
Final solution:
Set the style of the el-select selector as:
style="width: 100%"In this way, it can be the same as the width of el-input, and the element width will be adjusted according to the adjustment of the window size.
Test chart:
