I am working on a group of buttons that display months. However, they are all currently showing on one line or row and I would like to put a break at the end of June so it displays on two rows. I have tried various methods such as 'June' + '\n' and
but none seem to be working. Below is some updated code snippets from the Vue file and CSS.
Vue
<common-subsection
id="monthsSelected"
headerTitle="Months">
<common-forminputs-checkboxeswithvalidation
rules="required|min:1"
name="months"
id="months"
vid="months"
:options="monthNames"
v-model="months"
buttons
button-variant="primary"
requiredDisplayName="Months"
/>
</common-subsection>
Typescript
months = [];
monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
CSS
#months label.btn{
margin: 0 0.25em 0 0;
border: 1px solid #D0D0D0;
overflow: auto;
float: left;
height: 43px;
width: auto;
padding:0;
background-color: #fff;
color:#656565;
min-width:150px;
span{
text-align: center;
padding: 1em;
display: block;
height: 100%;
text-transform: capitalize;
}
&:hover{
background: var(--secondary);
color: #fff;
cursor: pointer;
}
&.active{
background-color: #2e81ab;
color: #fff;
}
}
Updated code Is this what you were looking for? If not, please let me know.
<common-subsection
id="monthsSelected"
headerTitle="Months"
style="display: grid; grid-template-columns: repeat(6, 1fr);">
<common-forminputs-checkboxeswithvalidation
rules="required|min:1"
name="months"
id="months"
vid="months"
:options="monthNames"
v-model="months"
buttons
button-variant="primary"
requiredDisplayName="Months"
/>