Edited: included fiddle and code snippets
I am facing an issue with the width of columns in my layout. The width of the columns is dynamically calculated based on the content they hold. However, when I filter the results using a search input for a specific column, the width jumps as the children divs get hidden and do not require the width anymore.
Is there a way to prevent this from happening without setting fixed or min-width values? Each column can vary greatly in width and should adjust accordingly.
Check out this JSFiddle link for better understanding!
Here is the HTML structure:
<div id="app">
<span>Type 'bla' and see how first column shrinks</span><br>
<input type="text" v-model="searchWord" @input="searchRows">
<div class="columns">
<div class="column">
<div class="row" v-for="(row) in rows1" v-show="row.visible">{{row.value}}</div>
</div>
<div class="column">
<div class="row" v-for="(row) in rows2">{{row}}</div>
</div>
</div>
</div>
And here is the CSS styling:
.columns {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
text-align: left;
border-right: 1px solid;
border-top: 1px solid;
border-left: 1px solid;
}
.row {
border-bottom: 1px solid;
}
Lastly, the Vue.js logic:
new Vue({
el: '#app',
data: {
searchWord: "",
rows1: [{
value: "long long long long long row",
visible: true
},
{
value: "blablabla",
visible: true
}
],
rows2: ["short row", "blabla"],
},
methods: {
searchRows: function() {
this.rows1.forEach((row) => {
row.visible = true
if (!row.value.match(this.searchWord)) {
row.visible = false
}
})
}
}
})