Remove empty elements

UI/BaseUIElement.ts

@@ -45,6 +45,7 @@ export default abstract class BaseUIElement {
      * Adds all the relevant classes, space separated
      */
     public SetClass(clss: string) {
+        if(clss == undefined){return }
         const all = clss.split(" ").map(clsName => clsName.trim());
         let recordedChange = false;
         for (let c of all) {

UI/Popup/EditableTagRendering.ts

@@ -16,7 +16,10 @@ export default class EditableTagRendering extends Toggle {
     constructor(tags: UIEventSource<any>,
                 configuration: TagRenderingConfig,
                 units: Unit [],
-                editMode = new UIEventSource<boolean>(false)
+                options:{
+                editMode? : UIEventSource<boolean> ,
+                innerElementClasses?: string
+                }
     ) {
 
         // The tagrendering is hidden if:
@@ -27,7 +30,12 @@ export default class EditableTagRendering extends Toggle {
             (configuration?.condition?.matchesProperties(tags) ?? true))
         
         super(
-            new Lazy(() => EditableTagRendering.CreateRendering(tags, configuration, units, editMode)),
+            new Lazy(() => {
+                const editMode = options.editMode ?? new UIEventSource<boolean>(false)
+                const rendering = EditableTagRendering.CreateRendering(tags, configuration, units, editMode);
+                rendering.SetClass(options.innerElementClasses)
+                return rendering
+            }),
             undefined,
             renderingIsShown
         )

UI/Popup/FeatureInfoBox.ts

@@ -68,7 +68,8 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
             const groupName = allGroupNames[i];
 
             const trs = layerConfig.tagRenderings.filter(tr => tr.group === groupName)
-            const renderingsForGroup: BaseUIElement[] = []
+            const renderingsForGroup: (EditableTagRendering | BaseUIElement)[] = []
+            const innerClasses = "block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2";
             for (const tr of trs) {
                 if (tr.question === null || tr.id === "questions") {
                     // This is a question box!
@@ -76,21 +77,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
                     questionBoxes.delete(tr.group)
                     renderingsForGroup.push(questionBox)
                 } else {
-                    const etr = new EditableTagRendering(tags, tr, layerConfig.units).SetClass("editable-tag-rendering")
+                    let classes = innerClasses
-                        
+                    if(renderingsForGroup.length === 0 && i > 0){
+                        // This is the first element of a group!
+                        // It should act as header and be sticky
+                        classes= "sticky top-0"
+                    }
+                    
+                    const etr = new EditableTagRendering(tags, tr, layerConfig.units,{
+                        innerElementClasses: innerClasses
+                    })
                     renderingsForGroup.push(etr)
                 }
             }
-            let j = 0
-            if (i !== 0) {
-                renderingsForGroup[0]?.SetStyle("position: sticky; top: -5px")
-                j = 1
-            }
-            for (/* j = 0 or 1 */; j < renderingsForGroup.length; j++) {
-                renderingsForGroup[j].SetClass("block w-full break-word text-default m-1 p-1 border-b border-gray-200 mb-2 pb-2")
-            }
-            
-            
             
             allRenderings.push(...renderingsForGroup)
         }