undefinedfix
Sign in

How to adapt the width of El select in El form item

wejrd edited in Sat, 24 Sep 2022

Question: if you want to make the El select adaptive width, that is, the label width + El select width can fill a line, you want to achieve this effect

Detailed description: the code in the project is as follows, which sets the style for El select=“ width:100% "It doesn't work. No matter the layout becomes larger or smaller, the width of El select will not change, as shown in the figure below

clipboard.png

I can only set a fixed value in El select, such as style=“ width:100px "It works. Here is my code. I don't know if I have made a mistake in setting width

  <el-form :inline="true"
           :model="searchInfo"
           label-width="80px"
           label-position='left'
           size="mini">
        <el-row>
          <el-col :span="12">
            <!-- TODO:设置select与label同行,select自动填充剩余宽度 -->
            <el-form-item label="出发地"
                          prop="start">
              <el-select v-model="searchInfo.start"
                         style="width:100%"
                         placeholder="选择出发地">
                <el-option v-for="item in startOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="出发地点"
                          prop="start">
              <el-select v-model="searchInfo.end"
                         style="width:100%"
                         placeholder="选择目的地">
                <el-option v-for="item in endOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  </el-form>

If you want to use div to frame El select, use a method like this

<div style="display:inline-block">
<div style="display:inline-block">

However, El form item is the parent component of El select, which cannot be done..

There is no other way to search on the Internet. Can you tell me by the way how to search this kind of problem?

4 Replies
yhgsq
commented on Sat, 24 Sep 2022
.el-form .el-select{
  width: 100%;
}

Just put on this style

respect99
commented on Sat, 24 Sep 2022

It's easy to add a style to the El select tag display:block; Then < El select V-model=“ formInfo.notice_ "Hours" placeholder = "please select notification user" style = "display: block;" > < / El Select >

javonlinetubeqd
commented on Sat, 24 Sep 2022

You can write style overlay, set width: 100%, or define a variable selectwidth selectwidth = (get area width) +'px ': style=“ width:selectWidth "

SoikeoAZ
commented on Sun, 25 Sep 2022

The El select of element UI actually uses the input tag, which has a default width of about 100px in browsers (different browsers behave differently);

You can set the width of input to auto (hack method) through JS

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);
source: https://stackoverflow.com/que...