Why do Element UI form tags appear above the input box instead of to the left?

Why do Element UI form tags appear above the input box?

When building a form using the Element UI, you may encounter a form label that appears above the input box instead of to the left. This article analyzes this problem and provides solutions.

The root cause of the problem lies in the default behavior of the el-form component of the Element UI. If label-width property is not set, the width of the label will be automatically adjusted, causing long label line breaks to appear above the input box.

Developers usually use el-form-item component and set label attribute, but ignore label-width attribute settings of the parent el-form component. label-width attribute determines the width of the label, thereby controlling the position of the label.

Solution: Set label-width property

The key to solving this problem is to add label-width property to el-form component and specify a suitable width value. For example: label-width="100px" sets the label width to 100 pixels. This forces the label text to be displayed on the left side of the input box and controls the label width.

Correct code example:

<el-form label-width="100px">
  <el-form-item label="用户名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="password" type="password"></el-input>
  </el-form-item>
</el-form>

By<el-form></el-form> Add label-width="100px" to the label, and the label will be displayed in the same line as the input box. You can adjust the value of label-width according to actual needs, such as label-width="80px" or label-width="120px" etc. If the label text is too long, it may still be possible to wrap lines. At this time, you need to consider shortening the label text or adjusting the form layout.

The above is the detailed content of Why do Element UI form tags appear above the input box instead of to the left?. For more information, please follow other related articles on the PHP Chinese website!