Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that solution, it leads to multiple rows appearing on the same line.
In the code snippet provided below, you can run it and observe the issue both with and without display: inline-block, along with detailed descriptions of each problem. (For a better view, click on "full page" at the top right corner.) Additionally, I have set up a live demo for easier testing and editing.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
checkboxes: [],
displayInlineBlock: false,
}
},
methods: {
toggleDisplayInlineBlock() {
this.displayInlineBlock = !this.displayInlineBlock;
},
},
}).modal {
width: 750px;
height: 400px;
overflow-y: scroll;
border: 2px solid lightgrey;
}
.container {
column-count: 3;
}
.v-input--checkbox {
margin: 0.33em 0;
padding: 0;
}
.container-inline > div {
display: inline-block;
}
.btn {
background-color: tomato;
color: white;
padding: 1em;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f3a485402">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42343727362b243b02706c3a">[email protected]</a>/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0801001a2e5a4016">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a4b5a8a7b881f3efb9">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<p>(Open snippet in larger window to see issues.)</p>
<button @click="toggleDisplayInlineBlock" class="btn">
Toggle Display - currently inline block: {{displayInlineBlock}}
</button>
<div v-if="displayInlineBlock">
Current display <b>is</b> set to <code>inline-block</code>, which resolves the text cutoff problem. However, short label elements get placed on the same line, such as the "testing" and "abc" checkboxes above. Ideally, "abc" should appear on the line below "testing."
</div>
<div v-else>
Current display is <b>not</b> set to <code>inline-block</code>, resulting in cropped rows. For instance, hovering over some checkboxes highlights one in the next column. Furthermore, lengthy text should wrap within the <b>same</b> column.
</div>
<div class="modal">
<div class="container" :class="{'container-inline': displayInlineBlock}">
<v-checkbox label="testing"></v-checkbox>
<v-checkbox label="abc"></v-checkbox>
<v-checkbox label="testing lorem ipsum"></v-checkbox>
<v-checkbox label="testing lorem"></v-checkbox>
<v-checkbox label="testing ip"></v-checkbox>
<v-checkbox label="testing dorset illemet lorem"></v-checkbox>
<v-checkbox label="testing super long label text here this is long"></v-checkbox>
</div>
</div>
</v-app>
</div>