How to make the height of adjacent columns in the Element UI automatically adapt to the content?

Element UI layout: Solve the problem of inconsistent height of adjacent columns on the same row

When building a page using the Element UI, you often encounter the problem that the heights of adjacent columns within the same row cannot be automatically matched due to content differences. This article analyzes this problem and provides effective solutions.

Problem description

Suppose we use el-row and el-col to build the following layout:

<el-row class="row">
  <el-col class="col">
    <span class="label">Parallelism</span>
    <span class="value">Longer text content...</span>
  </el-col>
  <el-col class="col">
    <span class="label">Parallelism OK/NG</span>
    <span class="value">Short text</span>
  </el-col>
</el-row>

Even if height: auto; of .label and .value are set, the height of the short column may not be consistent with the long column due to el-col or other style limitations.

Problem analysis

The root cause of the problem lies in the default height behavior el-col and the layout of the parent elements. The height of el-col is affected by its content, but if the layout of the parent element ( el-row ) limits the automatic adjustment of the height of the child element, it will cause height inconsistency.

Solution

In order for the column height to automatically adapt to the content, we need to adjust the CSS style:

1. Remove height limits for el-col : Remove any explicit or implicit height settings in el-col (e.g. height: 100%; ). Let the height of el-col completely determine its child element content.

2. Adjust the layout of el-row : Ensure that the layout of el-row allows the child elements to expand automatically. If align-items: center; is used, remove it or change it align-items: stretch; ( stretch is the default value and can be omitted). This will allow the height of el-col to be automatically adjusted according to the content.

3. Optional: Content vertically centered: If content needs to be vertically centered, you can apply display: flex; and align-items: center; on .label and .value .

Modified CSS example:

 .row {
  border-bottom: solid .0625rem #9c9c9c;
  display: flex;
  /* align-items: stretch; (default value, can be omitted) */

  .col {
    display: flex;
    flex-direction: column; /* Make sure label and value are arranged vertically*/

    span:not(:last-child) {
      border-right: solid .0625rem #9c9c9c;
    }
    ::v-deep span {
      flex: 1; /* Allow span height to automatically expand*/
      word-break: break-all;
      word-wrap: break-word;
      /* height: 23px; Remove fixed height*/
      /* line-height: 23px; Remove fixed line height*/
      text-align: center; /* Optional: horizontal center*/
    }
    .label {
      background-color: #e0e0e0;
      color: #000000;
      font-weight: bold;
      height: auto;
      display: flex;
      align-items: center; /* vertical center*/
    }
    .value {
      height: auto;
      display: flex;
      align-items: center; /* vertical center*/
    }
  }
}

Through the above adjustments, the height of el-col will be automatically adjusted according to its content, thereby solving the problem of inconsistent heights of adjacent columns in the same row. Remember to remove any styles that force el-col height.

The above is the detailed content of How to make the height of adjacent columns in the Element UI automatically adapt to the content?. For more information, please follow other related articles on the PHP Chinese website!