I'm making an Angular app using Material with a tab layout where I created a 2-column questionnaire with questions and options below them, but these options look jagged; I want them to look vertically aligned. The problem is that some options are very long and I'm afraid they might be missed in the shuffle. Also, is not pretty to the eyesight. See image below:
I've tried using mat-tile-list and other CSS tricks but nothing seems to be working, they end up aligning side-by-side and jagged. Can you push me in the right direction?This is what I've tried so far:
CSS Code:
.grid-container { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 20px; /* Adjust as needed */ position: relative; overflow: auto; }.grid-column { flex: 1 1 45%; /* Adjust the width of the columns as needed */ display: flex; flex-direction: column; /* position: absolute; */}.question { font-weight: bold;}.options { display: flex; flex-direction: column; gap: 5px; /* Adjust as needed */}Angular HTML Code:
<mat-tab label="Perfil del Individuo"><div class="grid-container"><div class="grid-column" *ngFor="let question of questions; let i = index"><form [formGroup]="needsQuestionsForm"><div class="question"> {{ i + 1 }}. {{ question.question }}</div><div class="options"><mat-radio-group aria-label="Select an option" [formControlName]="'option'+ (i + 1)"><mat-radio-button *ngFor="let option of question.options" [value]="option.id"> {{ option.option }}</mat-radio-button></mat-radio-group></div></form></div></div></mat-tab>Here's the whole HTML component:
<div class="row"><!-- Card column --><div class="col-12"><mat-card><mat-card-content><h4 class="mb-32">Needs Profile</h4><mat-tab-group mat-stretch-tabs="false" class="demo-tab-group"><mat-tab label="Physical"><div class="demo-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.</div></mat-tab><mat-tab label="Mental"><div class="demo-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.</div></mat-tab><mat-tab label="Participant's Profile"><div class="grid-container"><div class="grid-column" *ngFor="let question of questions; let i = index"><form [formGroup]="needsQuestionsForm"><div class="question"> {{ i + 1 }}. {{ question.question }}</div><div class="options"><mat-radio-group aria-label="Select an option" [formControlName]="'option'+ (i + 1)"><mat-radio-button *ngFor="let option of question.options" [value]="option.id"> {{ option.option }}</mat-radio-button></mat-radio-group></div></form></div></div></mat-tab><mat-tab label="Social Determinants of Health"><div class="demo-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.</div></mat-tab></mat-tab-group></mat-card-content></mat-card></div></div>