[Projekt] Material Design CSS für ioBroker.vis

MaikB85

Warum ist die Schrift in Safari eigentlich anders wie in Chrome? Muss ich da erst eine Schrift installieren?

EDIT: Hmm… jetzt wo ich das so nebeneinander sehe ist der Unterschied doch nicht so groß...ist nur leicht dicker. Hatte mich nur gewundert warum der in Safari bei einem Textlabel einen Zeilenumbruch gemacht hatte. musste dann die Breite noch etwas erhöhen
1528_screen_material.png

Uhula

Im MD CSS wird die Schriftart Roboto (Google-Schriftart für MD) als Vorgabe angenommen, alternativ Arial. Sind beide nicht vorhanden, sucht der Browser vergleichbare Schriftarten. Pixelabweichungen in Höhe/Breite sind bei unterschiedlichen Browsers leider immer in Kauf zu nehmen.

.vis_container_edit>.vis-view {
  font-family: Roboto, Arial;
}

FlyingM

Hallo Zusammen,

ich habe in meinem Projekt, CSS und Script Manuell eingefügt um die Klassen zu nutzen.

Ich habe eine View über die ich per Klick auf andere Views komme. (Habe mir einfach den button(?) "Start" aus der Demo kopiert).

Nach einem Klick lande ich auch in der angegebenen View jedoch wird auch gleich der sich an dieser stelle befindende button ausgeführt.

In meinem Fall "TV on".

Er wechselt also auf die neue VIEW und sendet "TV on".

Wie kann ich das verhindern, außer die Buttons zu verschieben?

VG

Michael

Uhula

~~@Uhula:~~

Wie kann ich das verhindern, außer die Buttons zu verschieben? `
Das kann ich dir leider auch (noch) nicht beantworten. Ich konnte das bisher in meinen Projekten noch nicht nachstellen. Hier im Forum gibt es einige Themen zum "Entprellen" der Views untereinander. Bisher, soweit ich das beurteilen kann, ohne eindeutige Lösung. Es wäre schön, wenn ich ein solches Projekt zur Verfügung gestellt bekomme; inkl der Infos, mit welchem Browser auf welcher Hardware es passiert (da kann e sgroße Unterschiede geben, z.B. ist ein KLICK nicht gleich einem TAP). Dann kann ich zumindest eine Abhängigkeit zum Material Design untersuchen. Danke.

Kai0182

Vorneweg, das Design gefällt mir außerordentlich gut.

Aber scheinbar bin ich schon zu blöd, das Beispiel Projekt zu importieren um damit zu spielen.

Ich lade das ZIP File runter, importiere dies dann als neues Projekt in mein VIS, aber danach passiert nichts mehr.

Es entsteht einfach ein neues Projekt mit dem Standard Demo Bild.

Kein importiertes CSS, keine Buttons, kein nichts.

Entweder steh ich auf dem Schlauch oder ich hab doch was vergessen

Uhula

~~@Kai0182:~~

Entweder steh ich auf dem Schlauch oder ich hab doch was vergessen `
Nö, klingt alles korrekt. ZIP als Projekt importieren, mehr ist nicht notwendig. Wenn beim Import irgendwas schief läuft, schaltet vis wohl auf ein Standardprojekt um. An eine Abhängigkeit von installierten Adaptern glaube ich nicht, basic und jqui reichen eigentlich aus (timeandweather wird noch genutzt, stört aber nicht, wenn der Adpater nicht installiert wurde).

Welche vis-Version hast du im Einsatz? Erstellt wurden die Projekte mit 0.15.5, laufen aber auch unter der aktuellen vis-Version 1.0.4.

Kai0182

Vis läuft bei mir auf 1.0.4.

Habe jetzt nochmal importiert, mir wird auch immer bestätigt, dass das Projekt richtig importiert wurde.

Aber danach wieder alles leer

Uhula

Hast du schon mal beide Projekte versucht, funktionieren beide nicht? Also MD_Demo und MD_Simple? Kannst du die Projekte unter dem vis Dateimanager korrekt sehen? Kannst du evtl die ZIP Datei öffnen und via vis Dateimanager die Dateien dann korrekt hochladen?

Eine Ursache kann ich leider nicht erkennen.

speedy78

Mal eine ganz einfache Frage…..

Wie kann ich die Eigenschaft von mdui-raisedbutton ändern. Da ich damit einen Befehl Ausführen muss setze xxx bei Drücken.

Nur leider bekomme ich die Größe nicht angepasst ist einfach zu Groß der Text. Den Button kann ich ja anpassen nur ändert sich der Text nicht dazu.

:)

Kai0182

Ich hab es gefunden.

Die Projekte wurden zwar hochgeladen aber irgendwie falsch ver/entpackt.

Ich vermute fast das liegt daran, das ich mit den ZIP Dateien am Mac Probleme hatte.

Habe jetzt manuell das Ganze über den Dateimanager hochgeladen in die richtigen Verzeichnisse und siehe da, jetzt passt es.

Vielen Dank für die Unterstützung
4078_bildschirmfoto_2017-11-20_um_17.50.19.png

Uhula

~~@Kai0182:~~

Vielen Dank für die Unterstützung `
Gerne

~~@speedy78:~~

Mal eine ganz einfache Frage….. `
… die ich leider nicht verstehe;-) Vielleicht hilft ein kleines Bild vom Problem mir auf die Sprünge.

speedy78

Hatte ich mir fast gedacht :)

Ich möchte die Button klein haben inkl. der Schrift !
3717_mdui-raised.png

Uhula

~~@speedy78:~~

Ich möchte die Button klein haben inkl. der Schrift ! `
Das ist das Blöde an einem vorgegeben Design, man kann es nicht leicht ändern (ist auch so gewollt) ;-)

Durch die mdui-raisedbutton CSS Zuweisung wird die Schriftgröße auf 1em (16 Px) festgelegt, das kannst du über die Widget-Eigenschaften auch nicht verändern, da die CSS Zuweisung durch Nutzung von "!important" stärker ist.

Du kannst es aber wie folgt lösen:

(1) Anlage einer neuen, eigenen CSS Klasse am Ende des CSS-Scripts

.mdui-font-small {

font-size:0.8em !important;

} (2) Zuweisung auch dieser Klasse mdui-font-small in der CSS-Eigenschaft des Widgets

Mit der Größenangabe kannst du dann spielen, ob dir 0.8em oder 0.9em oder 0.92em oder 12px oder oder besser passen.

speedy78

HAHAHAHAHAHA ich bin jetzt schon so lange am basteln und habe die Werte gesucht bis ich gerade gesehen habe das es bei CSS ( GLOBAL / Projekt ) gibt … * facepalm

Aber irgendwas mache ich wohl noch falsch denn leider ändert sich nichts.

Der Befehl Funktioniert bei normalen HTML das habe ich gerade getestet. Nur beim Button(Knopftext) leider nicht.

Ändere ich den Wert im oberen Bereich geht es ohne Probleme. Sollte es nicht so sein das er es überschreibt wenn ich mdui-small-font als Klasse dazu packe ? !important

Update:

so bin leider kein HTML / CSS Mensch aber habe es gefunden. Wenn ich das mache geht es.

.mdui-raisedbutton-small {

font-size:0.6em !important;

}
3717_mdui-small.png

Uhula

~~@speedy78:~~

Aber irgendwas mache ich wohl noch falsch denn leider ändert sich nichts. `
So kann es auch nicht gehen. Du hast die CSS Klasse .mdui-font-small in die CSS aufgenommen, im Widget gibst du aber mdui-small-font ein. Überliest mal leicht, dass font und small vertauscht sind ;-)

speedy78

hahahahahahahahahhahaahahahah …. zuviel Text wobei. Jetzt habe ich wieder was gelernt. Und du hattest Recht :oops:

Meistertr

Es ist echt der Hamma was man mit css und ein paar codezeilen alles ändern kann….
1768_2017-11-23_07h35_20.png

htrecksler

~~@Uhula:~~

Ich persönlich mag die Textdarstellung, da es nie vorkommt, dass ich die Jalousien auf 14% oder 97% absenken möchte. Außerdem kann man die Fixpunkte frei festlegen. `
Kriegt man es vielleicht irgendwie hin, das die Werte im RadioList Widget nicht horizontal sondern vertikal (also untereinander) angezeigt werden?

Uhula

~~@htrecksler:~~

Kriegt man es vielleicht irgendwie hin, das die Werte im RadioList Widget nicht horizontal sondern vertikal (also untereinander) angezeigt werden? `
Jo. Das "jqui-Radiobuttons Valuelist" Widget rendert sich als , die Texte stehen dabei in

| Elementen. Man muss nur dafür sorgen, dass die | Elemente sich nicht als td, sondern sich als Block-Elemente darstellen.

Wie das?

(1) Du erweiterst deine CSS Anweisungen um

.mdui-radio.mdui-vertical td {

display: block;

}

(2) Und weist dann deinem Widget zusätzlich zum mdui-radio noch die CSS Klasse mdui-vertical zu.

Hinweis: Damit wird vis natürlich ein wenig an der Nase herumgeführt, so dass die width/height Angaben nicht mehr passen. Funktioniert aber trotzdem. |

htrecksler

<size size="150">DANKE</size>…funktioniert natürlich

Community Forum

NEWS

[Projekt] Material Design CSS für ioBroker.vis

Support us

728

32.4k

81.4k

1.3m