fixed label bug in select inputs

Author: timea-solid

src/tabs.ts

@@ -178,7 +178,7 @@ export function tabWidget (options: TabWidgetOptions) {
   const onClose = options.onClose
 
   const [selectedColor, color] = getColors(backgroundColor)
-  const bodyMainStyle = `flex: 2; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
+  const bodyMainStyle = `display: grid; width: auto; height: 100%; border: 0.1em; border-style: solid; border-color: ${selectedColor}; padding: 1em;`
   const rootElement: TabWidgetElement = dom.createElement('div') // 20200117a
 
   rootElement.setAttribute('style', style.tabsRootElement)

src/widgets/forms.js

@@ -712,16 +712,38 @@ field[ns.ui('Classifier').uri] = function (
     if (!ok) return callbackFunction(ok, body)
     return callbackFunction(ok, body)
   }
-  const box = makeSelectForNestedCategory(
+  // Create container for label and select
+  const outerBox = dom.createElement('div')
+  outerBox.setAttribute('class', 'classifierBox')
+  // Render label
+  const labelDiv = dom.createElement('div')
+  labelDiv.setAttribute('class', 'formFieldName classifierBox-label')
+  // Use fieldLabel to render ui:label if present
+  labelDiv.appendChild(fieldLabel(dom, category, form))
+  outerBox.appendChild(labelDiv)
+  // Render select
+  const selectBox = dom.createElement('div')
+  selectBox.setAttribute('class', 'formFieldValue classifierBox-selectBox')
+  const selectElement = makeSelectForNestedCategory(
     dom,
     kb,
     subject,
     category,
     dataDoc,
     checkOptions
   )
-  if (container) container.appendChild(box)
-  return box
+  // Set readonly if not editable
+  if (selectElement && selectElement.querySelector && selectElement.querySelector('select')) {
+    const select = selectElement.querySelector('select');
+    if (select && !kb.updater.editable(dataDoc.uri)) {
+      select.readOnly = true;
+      select.style = style.textInputStyleUneditable;
+    }
+  }
+  selectBox.appendChild(selectElement)
+  outerBox.appendChild(selectBox)
+  if (container) container.appendChild(outerBox)
+  return outerBox
 }
 
 /**         Choice field