layout fix

OP-TED · Nov 20, 2024 · 9cb1c16 · 9cb1c16
1 parent 8587c55
commit 9cb1c16
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/src/js/codelists.js b/src/js/codelists.js
@@ -103,22 +103,24 @@ Vue.component("codelists", {
     <b-card-text>
     Select the ESPD version and the code list to explore the contents. At the bottom of the page, you can view the translations for each entry in the code list.
     </b-card-text>
-    <b-row>
-        <b-col lg="4">
-        <b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="3" label="ESPD version" label-for="input-espdversion">
-            <b-form-select id="input-espdversion" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
-        </b-form-group>
+    <b-form-row class="mb-2" align-v="center">
+        <b-col class="text-right">
+            <label class="mr-sm-2" for="input-espdversion">ESPD version</label>
         </b-col>
-        <b-col lg="4">
-        <b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="3" label="Code list" label-for="input-codelist">
-            <b-form-select id="input-codelist" v-model="codelist" :options="codelists" @change="selectCodeList($event)"></b-form-select>
-        </b-form-group>
+        <b-col cols="1">
+            <b-form-select id="input-espdversion" size="sm" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
         </b-col>
-        <b-col lg="4">
-        <em>Type: </em>{{crt_list.type}}
+        <b-col cols="2" class="text-right">
+            <label class="mr-sm-2" for="input-codelist">Code list</label>
         </b-col>
-    </b-row>
-
+        <b-col cols="3">
+            <b-form-select id="input-codelist" size="sm" v-model="codelist" :options="codelists" @change="selectCodeList($event)"></b-form-select>
+        </b-col>
+        <b-col lg="5">
+            <em>Type: </em>{{crt_list.type}}
+        </b-col>
+    </b-form-row>
+    
         <!-- Display read only data as static HTML -->
         <b>Short Name: </b>{{crt_list.ShortName}}
         <b> Long Name: </b>{{crt_list.LongName}}<br/>

diff --git a/src/js/model.js b/src/js/model.js
@@ -56,19 +56,22 @@ Vue.component("model", {
     <b-card-text>
     Select the desired ESPD version and Criterion to show the HTML representation of the ESPD Model.    
     </b-card-text>
-  <b-row>
-    <b-col  lg="4">
-    <b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="2" label="ESPD version" label-for="input-espdversion">
-            <b-form-select id="input-espdversion" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
-    </b-form-group>
+    
+  <b-form-row class="mb-2" align-v="center">
+    <b-col class="text-right">
+    <label class="mr-sm-2" for="input-espdversion">ESPD version</label>
     </b-col>
-    <b-col  lg="8">
-    <b-form-group label-cols="1" label-cols-lg="1" label-size="sm" content-cols="10" label="Cirterion" label-for="input-model">
-        <b-form-select id="input-model" v-model="model" :options="models" @change="selectModel($event)"></b-form-select>
-    </b-form-group>
+    <b-col cols="1">
+    <b-form-select id="input-espdversion" size="sm" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
     </b-col>
-  </b-row>
-    <comonent :is="model"></component>
+    <b-col cols="1" class="text-right">
+    <label class="mr-sm-2" for="input-model">Criterion</label>
+    </b-col>
+    <b-col cols="8">
+    <b-form-select id="input-model" size="sm" v-model="model" :options="models" @change="selectModel($event)"></b-form-select>
+  </b-col>
+  </b-form-row>
+    <component :is="model"></component>
   </b-card>  
     `
 });