https://i.sstatic.net/Cj8Bm.pngWhen trying to add an additional field on a page, the "X" icon appears inline with the field and causes the other fields to adjust their position. However, I want the new field to remain in the same position as the title. How can I achieve this while keeping the "X" icon on the same line?
CSS
[
.account-csv-field {
display: flex;
align-items: center;
min-height: 2.8rem;
&.all-edit-disabled { height: 1rem; }
.ie-field {
margin: 0 0.1rem;
height: 2.8rem;
&.ie-user {
flex: 1;
max-width: 13rem;
}
&.ie-password {
flex: 1;
max-width: 13rem;
}
&.ie-comm-plan {
flex: 1;
max-width: 13rem;
}
&.ie-model {
flex: 1;
}
&.ie-option {
flex: 1;
width: 12px;
}
}
.ie-close-button {
font-size: 20pt;
margin-left: 0.5rem;
cursor: grab;
}]
HTML
<nc-select
v-if="!account.fromCsv || (initialErrorState.option && !forceEditDisable)"
class="ie-option ie-field"
:value="account.option.value"
:options="options.map(c => c['option'])"
:error-popup="errorState.option"
:disabled="options.length < 1 && !account.option.value"
:required="options.length > 0"
:error-without-interaction="account.fromCsv"
@update:value="updateIssuing('option', $event)">
</nc-select>
<el-tooltip v-else :content="errorState.option" :disabled="!errorState.option" placement="top" effect="light">
<span :class="{ 'static-error': Boolean(errorState.option) }" class="cell-option">{{ account.option.value }}</span>
</el-tooltip>
<i
class="el-icon-close ie-close-button"
v-show="removable"
@click="$emit('remove')"></i>