Fixed form item width by putting them in columns.

This commit is contained in:
neviyn 2018-09-17 12:56:02 +01:00
parent c9ea1557ac
commit e1b6255137

View File

@ -1,17 +1,22 @@
<template> <template>
<b-container class="home"> <b-container class="home" align-h="center">
<h1>Training Observations</h1> <h1>Training Observations</h1>
<b-row> <b-row align-h="center">
<b-col>
<b-form-group label="Site"> <b-form-group label="Site">
<b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select> <b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select>
</b-form-group> </b-form-group>
</b-col>
</b-row> </b-row>
<b-row> <b-row align-h="center">
<b-col>
<b-form-group label="Description"> <b-form-group label="Description">
<b-form-input :value="description" @input="setDescription" type="text"></b-form-input> <b-form-input :value="description" @input="setDescription" type="text"></b-form-input>
</b-form-group> </b-form-group>
</b-col>
</b-row> </b-row>
<b-row> <b-row align-h="center">
<b-col>
<b-form-group label="Type"> <b-form-group label="Type">
<b-form-select :value="type" @input="setType"> <b-form-select :value="type" @input="setType">
<option :value=null>Select a training type</option> <option :value=null>Select a training type</option>
@ -19,16 +24,21 @@
<option value="CONTINUING">CONTINUING</option> <option value="CONTINUING">CONTINUING</option>
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
</b-col>
</b-row> </b-row>
<b-row> <b-row align-h="center">
<b-col>
<b-form-group label="Tutor(s)"> <b-form-group label="Tutor(s)">
<p v-if="site == null">Select a site first.</p> <p v-if="site == null">Select a site first.</p>
<v-icon name="spinner" spin v-if="loadingTutors"/> <v-icon name="spinner" spin v-if="loadingTutors"/>
<b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group> <b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
</b-form-group> </b-form-group>
</b-col>
</b-row> </b-row>
<b-row> <b-row align-h="center">
<b-col>
<b-button>Start</b-button> <b-button>Start</b-button>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>