I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox.
Here is a snippet of the Checkbox.vue component:
<template>
<ValidationProvider
class="relative"
tag="div"
v-model="innerValue"
:vid="vid"
:rules="rules"
:name="name || label"
v-slot="{ errors, required }"
>
// Checkbox input and label elements here
</ValidationProvider>
</template>
// More component code for Checkbox.vue...
The Component.vue file includes multiple Checkbox components within a form:
<template>
<div class="sign-up-wrapper">
<ValidationObserver ref="form">
<form>
<div class="sign-up-form__label">
<label for="vehicle">Vehicles</label>
</div>
// Multiple Checkbox components here
</form>
</ValidationObserver>
</div>
</template>
// More code for other form elements in Component.vue...
And finally, App.vue contains the overall application layout:
<template>
<div>
<header class="app__header-wrapper">
<div class="app__header">
<div class="app__header-logo-image">
</div>
<div class="app__header-logo-text">
<h1>BUD</h1>
<h2>Slogan</h2>
</div>
</div>
</header>
<main>
<HelloWorld/>
</main>
<footer class="app__footer">
<ul class="app__footer-link-list">
<li class="app__footer-link-list-item"><router-link to="/help">Help</router-link></li>
</ul>
</footer>
</div>
</template>
// More code for header, main content, and footer styling...