Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[hg6806]

Hallo zusammen,

schon immer habe ich Probleme mit der Anordnung von Buttons wenn man sie automatisch horizontal anordnen möchte. Die Widgets sind vom Typ jqui button link. Ich markiere sie alle, stelle eine feste Höhe ein aber keine feste Breite. Das soll sich durch den Text selbst regulieren.
Wenn ich dann auch automatisch Anordnen klicke (Ausrichten waagerecht/gleicher Abstand) sieht es so aus:

In der VIS runtime sieht es dann so aus:

Wenn ich jedem Widget eine feste Breite verpasse, habe ich dann manchmal auf dem Tablet einen Zeilenumbruch, auf dem Notebook nicht. Und selbst dann funktioniert die automatische Anordnung nicht.

Wo liegt der Fehler?

[Ro75]

@hg6806

Habe so was ähnliches. Also bei dir ist zu sehen, dass die Buttons sich überlagern. Bevor du auf "Ausrichten waagerecht/gleicher Abstand" gehst, sollte zwischen jedem Button etwas Platz sein, nur dann funktioniert das richtig. Eine einheitliche Breite wäre "optimaler" aber kein muss.

auf dem Tablet einen Zeilenumbruch, auf dem Notebook nicht.

Naja, ich denke die Geräte haben eine unterschiedliche Auflösung.

Ro75.

[Homoran]

@ro75 sagte in Probleme bei der Anordnung von Button Links:

die Geräte haben eine unterschiedliche Auflösung.

oder unterschiedliche interne Schriften

[Ro75]

@homoran Koo. Da habe ich mich wohl missverständlich ausgedrückt. Ich habe kein Problem. Wollte damit sagen, dass ich eine ähnliches Zeile bei mir habe.

[Ro75]

@hg6806 verrate uns doch mal wie die Auflösungen deiner Geräte sind. Ist der Unterschied zwischen Notebook und Tablet bei der Bildschirmauflösung zu groß, dann musst du mehr Platz zwischen den Buttons einplanen, eben wegen schieben.

Ro75.

[Homoran]

@ro75 war auch nur eine Ergänzung für @hg6806 zu deiner Vermutung. eine weitere Möglichkeit wäre eine unterschiedliche Schriftenskalierung.
Gatten wir letztens erst, da war unter Android die Schriftgröße wegen besserer Lesbarkeit vergrößert worden. Dann passt es natürlich nicht mehr in die geplante Größe

[Ro75]

@homoran richtig, das hatte ich auch gelesen. Viel mehr weitere Möglichkeiten sehe ich nicht.

[hg6806]

Es geht jetzt erst einmal nur um die Ansicht auf meinem Notebook. Selbst da bekomme ich es über den oben genannten Button zur gleichen Ausrichtung nicht hin.

Ich habe den Ratschlag wegen der Überlappung mal befolgt, die Abstände sind aber noch immer nicht gleich nach Drücken des Buttons.

Schriften sind alle gleich auch Größe, Ausführung, etc.

[Ro75]

@hg6806 sagte in Probleme bei der Anordnung von Button Links:

Schriften sind alle gleich auch Größe, Ausführung, etc.

Es ging nicht um die Schriftart der Buttons. Es besteht die Möglichkeit, dass die benutzte Schriftart auf dem Zielgerät gar nicht existiert.

Alternativ. Nimm andere Buttons. Was sollen die eigentlich machen? Auf eine andere View wechseln?

Ro75.

[Homoran]

@hg6806 sagte in Probleme bei der Anordnung von Button Links:

die Abstände sind aber noch immer nicht gleich

um wieviel gehtces denn Da?
sieht nach einem Rundungs"problem" mit den zur Verfügung stehenden Restpixeln aus.

[hg6806]

@ro75

Ja, auch eine andere View wechseln. Welche Buttons hast du?

@Homoran

Auflösung ist in der Breite 1330 Pixel.
Rundungsfehler würde ich fast ausschließen da man das schon gravierend sieht, und Rundungsfehler ist ja immer nur +/-1

[Homoran]

@hg6806 sagte in Probleme bei der Anordnung von Button Links:

schon gravierend sieht

heisst in Zahlen?

@homoran sagte in Probleme bei der Anordnung von Button Links:

um wieviel geht es denn Da?

[Ro75]

@hg6806 sagte in Probleme bei der Anordnung von Button Links:

Ja, auch eine andere View wechseln. Welche Buttons hast du?

[{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/control_all_on_off.svg","imageHeight":"100","text":"Übersicht","nav_view":"Hauptseite"},"style":{"left":"9px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"},{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/it_network.svg","imageHeight":"100","text":"System","nav_view":"Fritzbox"},"style":{"left":"179px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"},{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/measure_power_meter.svg","imageHeight":"100","text":"Energie","nav_view":"Energie"},"style":{"left":"348px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"},{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/light_control.svg","imageHeight":"100","text":"Licht","nav_view":"Beleuchtung"},"style":{"left":"518px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"},{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/weather_directions.svg","imageHeight":"100","text":"Wetter","nav_view":"Wetterbericht"},"style":{"left":"687px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"},{"tpl":"tplJquiIconNav","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"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","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,"src":"/icons-mfd-svg/scene_gas_station.svg","imageHeight":"100","text":"Tanken","nav_view":"Tanken"},"style":{"left":"857px","top":"14px","width":"145px","height":"49px","z-index":"1","text-align":"center","text-shadow":"3px 3px 4px #000","font-family":"RobotoCondensed-Regular","font-style":"normal","font-variant":"normal","font-weight":"lighter","font-size":"20px"},"widgetSet":"jqui"}]

Kannst ja mal diese versuchen. Eingestelltes Thema der View ist "dark-hive". Kannst aber auch andere Themen auswählen = ergeben andere Effekte.

Ro75.

[hg6806]

@Homoran
Wenn ich um 3pixel verrücke ist es gleich.

@Ro75
Danke, bei den Widgets. Damit geht es "stabiler". Sie werden auch direkter umrandet als meine.
Ich versuche es mal mit deinen.

Danke