Monatsrückblick Januar/Februar 2026 ist online!

[miwi]

Hallo zusammen,

ich versuche gerade in einem View mehrere Widgets mit dynamischer Breite so untereinander zu platzieren, dass diese rechtsbündig fix sind und sich nach links ausbreiten können.

Gibt es da einen Trick wie ich dies machen kann?

Das ganze soll so aussehen:

Leider bleibt das ganze so nur bis zur ersten Änderung der Widgetbreite, da die aktuelle linke Position als Referenz genutzt wird.

Gruß

miwi

[Homoran]

@miwi sagte in Widget dynamische Breite rechtsbündig anordnen:

mehrere Widgets mit dynamischer Breite

warum müssen die dynamisch sein?
maximale Breite, alle nach rechts ausgrichtet und Schrift auf rechtsbündig

[miwi]

@homoran "müssen" ist ein großes Wort.

Grundsätzlich wäre das der einfachste Weg alle gleich Breit zu machen.

Ich wollte aber von der Optik her etwas wie ein Whatsapp Nachrichtenverlauf.
Deshalb die auf die Breite des Textes angepasste Breite des Widgets.

Gruß

miwi

[Hiltex]

@miwi Die CSS-Eigenschaft float könnte dein Problem lösen:
https://www.w3schools.com/css/css_float.asp

[ice987]

@miwi

z.b.:

Spoiler

(view import)

{
    "settings": {
        "style": {},
        "theme": "redmond",
        "sizex": "",
        "sizey": "",
        "gridSize": ""
    },
    "widgets": {
        "e00001": {
            "tpl": "tplHtml",
            "data": {
                "g_fixed": false,
                "g_visibility": false,
                "g_css_font_text": false,
                "g_css_background": true,
                "g_css_shadow_padding": false,
                "g_css_border": false,
                "g_gestures": false,
                "g_signals": false,
                "g_last_change": false,
                "visibility-cond": "==",
                "visibility-val": 1,
                "visibility-groups-action": "hide",
                "refreshInterval": "0",
                "signals-cond-0": "==",
                "signals-val-0": true,
                "signals-icon-0": "/vis/signals/lowbattery.png",
                "signals-icon-size-0": 0,
                "signals-blink-0": false,
                "signals-horz-0": 0,
                "signals-vert-0": 0,
                "signals-hide-edit-0": false,
                "signals-cond-1": "==",
                "signals-val-1": true,
                "signals-icon-1": "/vis/signals/lowbattery.png",
                "signals-icon-size-1": 0,
                "signals-blink-1": false,
                "signals-horz-1": 0,
                "signals-vert-1": 0,
                "signals-hide-edit-1": false,
                "signals-cond-2": "==",
                "signals-val-2": true,
                "signals-icon-2": "/vis/signals/lowbattery.png",
                "signals-icon-size-2": 0,
                "signals-blink-2": false,
                "signals-horz-2": 0,
                "signals-vert-2": 0,
                "signals-hide-edit-2": false,
                "lc-type": "last-change",
                "lc-is-interval": true,
                "lc-is-moment": false,
                "lc-format": "",
                "lc-position-vert": "top",
                "lc-position-horz": "right",
                "lc-offset-vert": 0,
                "lc-offset-horz": 0,
                "lc-font-size": "12px",
                "lc-font-family": "",
                "lc-font-style": "",
                "lc-bkg-color": "",
                "lc-color": "",
                "lc-border-width": "0",
                "lc-border-style": "",
                "lc-border-color": "",
                "lc-border-radius": 10,
                "lc-zindex": 0,
                "html": "widget1"
            },
            "style": {
                "left": "calc(100% - 150px - 50px)",
                "top": "150px",
                "background-color": "#cc0000",
                "width": "150px",
                "height": "50px"
            },
            "widgetSet": "basic"
        },
        "e00002": {
            "tpl": "tplHtml",
            "data": {
                "g_fixed": false,
                "g_visibility": false,
                "g_css_font_text": false,
                "g_css_background": true,
                "g_css_shadow_padding": false,
                "g_css_border": false,
                "g_gestures": false,
                "g_signals": false,
                "g_last_change": false,
                "visibility-cond": "==",
                "visibility-val": 1,
                "visibility-groups-action": "hide",
                "refreshInterval": "0",
                "signals-cond-0": "==",
                "signals-val-0": true,
                "signals-icon-0": "/vis/signals/lowbattery.png",
                "signals-icon-size-0": 0,
                "signals-blink-0": false,
                "signals-horz-0": 0,
                "signals-vert-0": 0,
                "signals-hide-edit-0": false,
                "signals-cond-1": "==",
                "signals-val-1": true,
                "signals-icon-1": "/vis/signals/lowbattery.png",
                "signals-icon-size-1": 0,
                "signals-blink-1": false,
                "signals-horz-1": 0,
                "signals-vert-1": 0,
                "signals-hide-edit-1": false,
                "signals-cond-2": "==",
                "signals-val-2": true,
                "signals-icon-2": "/vis/signals/lowbattery.png",
                "signals-icon-size-2": 0,
                "signals-blink-2": false,
                "signals-horz-2": 0,
                "signals-vert-2": 0,
                "signals-hide-edit-2": false,
                "lc-type": "last-change",
                "lc-is-interval": true,
                "lc-is-moment": false,
                "lc-format": "",
                "lc-position-vert": "top",
                "lc-position-horz": "right",
                "lc-offset-vert": 0,
                "lc-offset-horz": 0,
                "lc-font-size": "12px",
                "lc-font-family": "",
                "lc-font-style": "",
                "lc-bkg-color": "",
                "lc-color": "",
                "lc-border-width": "0",
                "lc-border-style": "",
                "lc-border-color": "",
                "lc-border-radius": 10,
                "lc-zindex": 0,
                "html": "widget2"
            },
            "style": {
                "left": "calc(100% - 150px - 50px)",
                "top": "250px",
                "background-color": "#c1c954",
                "width": "150px",
                "height": "50px"
            },
            "widgetSet": "basic"
        },
        "e00003": {
            "tpl": "tplHtml",
            "data": {
                "g_fixed": false,
                "g_visibility": false,
                "g_css_font_text": false,
                "g_css_background": true,
                "g_css_shadow_padding": false,
                "g_css_border": false,
                "g_gestures": false,
                "g_signals": false,
                "g_last_change": false,
                "visibility-cond": "==",
                "visibility-val": 1,
                "visibility-groups-action": "hide",
                "refreshInterval": "0",
                "signals-cond-0": "==",
                "signals-val-0": true,
                "signals-icon-0": "/vis/signals/lowbattery.png",
                "signals-icon-size-0": 0,
                "signals-blink-0": false,
                "signals-horz-0": 0,
                "signals-vert-0": 0,
                "signals-hide-edit-0": false,
                "signals-cond-1": "==",
                "signals-val-1": true,
                "signals-icon-1": "/vis/signals/lowbattery.png",
                "signals-icon-size-1": 0,
                "signals-blink-1": false,
                "signals-horz-1": 0,
                "signals-vert-1": 0,
                "signals-hide-edit-1": false,
                "signals-cond-2": "==",
                "signals-val-2": true,
                "signals-icon-2": "/vis/signals/lowbattery.png",
                "signals-icon-size-2": 0,
                "signals-blink-2": false,
                "signals-horz-2": 0,
                "signals-vert-2": 0,
                "signals-hide-edit-2": false,
                "lc-type": "last-change",
                "lc-is-interval": true,
                "lc-is-moment": false,
                "lc-format": "",
                "lc-position-vert": "top",
                "lc-position-horz": "right",
                "lc-offset-vert": 0,
                "lc-offset-horz": 0,
                "lc-font-size": "12px",
                "lc-font-family": "",
                "lc-font-style": "",
                "lc-bkg-color": "",
                "lc-color": "",
                "lc-border-width": "0",
                "lc-border-style": "",
                "lc-border-color": "",
                "lc-border-radius": 10,
                "lc-zindex": 0,
                "html": "widget3"
            },
            "style": {
                "left": "calc(100% - 150px - 50px)",
                "top": "350px",
                "background-color": "#54c972",
                "width": "150px",
                "height": "50px"
            },
            "widgetSet": "basic"
        }
    },
    "name": "test1",
    "filterList": []
}