search

minukodu / minuvis-builder.iobroker

Builder for minuvis WebApp
Other
6 stars 0 forks source link

Abstände der Widgets einstellen? In CSS? #22

Open MMeinhardt1 opened 2 years ago

MMeinhardt1 commented 2 years ago

Hallo @SVallant,

ich habe jetzt V2 auf dem ioBroker laufen und bin gerade dabei meine Visualisierung umzubauen. Kannst Du mir verraten, sofern das möglich ist, wie ich die Abstände der Widgets einstellen kann? Und wie bzw. wo ich die Textgröße anpassen kann. Ich habe mal zwei Screenshots angehängt damit Du Dir ungefähr vorstellen kannst wovon ich rede. Im zweiten Screenshot habe ich den Abstand mit Paint verringert, das wäre so ungefähr meine Vorstellung.

Vielen Dank

IMG_2155_1IMG_2155_2

SVallant commented 2 years ago

ja, mit CSS geht alles. Die Eigenschaft "classes" ist zur Vergabe von Classnames vorgesehen: image

und dann im global CSS: .wohnzimmerCard .gridWrapper { grid-template-rows: repeat(3, 50px) !important; }

oder wie im Beispiel: `.wohnzimmerCard .gridWrapper { grid-template-rows: 67px 40px 40px !important; }

"normale" Höhe ist 67px, musst du gucken was passt, eventuell müssen die darunterliegenden divs noch angepasst werden.

Beispiel: http://94.130.57.38:8082/minuvis/app/?url=http%3A%2F%2F94.130.57.38%3A8082&file=cssLineHeight.json&forceUpdate

MMeinhardt1 commented 2 years ago

Hi, ich schaue mir das mal an. Kann ich die Höhe auch global für alle Widgets ändern? In deinem Beispiel ist der Name nicht auf gleicher Höhe mit dem Wert 🤔 Absicht oder Versehen?

Danke

MMeinhardt1 commented 2 years ago

Hast du ne gute Seite für mich auf der ich das nachlesen kann? Wo ist der Unterschied in deinen beiden Beispielen für das CSS?

SVallant commented 2 years ago

in der Card gibt es 3 grid-rows im 1.Beispiel sind mit dem repeat alle 3 auf 50px festgelegt im 2.Beispiel sind die Höhe der 3 rows einzeln festgelegt https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

bzgl. Ausrichtung des Inhalts muss man dann natürlich ein bißchen anpassen, da die Widgets out of the Box für 67px gebaut sind