Hallo Zusammen,
ich versuche mich gerade in Tablet UI und bin schon gut vorangekommen.
Nun stehe ich vor folgenden Problem:
Die Länge von "Select" wird scheinbar automatisch durch die Inhalte bestimmt.
Jedoch ist der Pfeil dann im Text bei "Internetradio" wenn nicht
Zitat"data-items=..."internetradio123"]'
eingebaut wird.
Kann man die Länge irgendwie dirket z.B. auf 16 Zeichen setzen, ohne einen "falschen / unnötigen Wert" einzubauen?
<td colspan="1">
<div data-type="select"
data-device="DualIR6S"
data-get="input"
data-set="input"
data-items='["aux-modus","dab","dmr","internetradio","mediaplayer","spotify","ukw","internetradio123"]'
class="large top-space"
data-colors="#0088CC">
</div>
</td>Dankeschön
Gruß aherby
Hey, du kannst entweder die voreingestellten festen Breiten (w1x, w2x, oder w3x) in der fhem-tablet-ui.css nutzen:
class="w2x"
.w3x select,
[data-type="label"].w3x,
[data-type="input"].w3x {
min-width: 160px;
max-width: 160px;
width: 160px;
}
.w2x select,
[data-type="label"].w2x,
[data-type="input"].w2x {
min-width: 110px;
max-width: 110px;
width: 110px;
}
.w1x select,
[data-type="label"].w1x,
[data-type="input"].w1x {
min-width: 70px;
max-width: 70px;
width: 70px;
}
Oder eine neue Breite in der fhem-tablet-ui-user.css anlegen
Hallo,
danke für deinen Vorschlag.
Ja durch
class="w3x top-space"
passt der Text in das Feld aber dann ist ja auch die Schrift kleiner.
Bisher hatte ich
class="large top-space"
verwendet um es halt besser am 13,3 Zoll Touchdisplay auswählen zu können.
(siehe Beispiele)
Die Länge vom "Select" hängt ja scheinbar von den Inhalten/ String ab
data-items='["aux-modus","dab","dmr","internetradio","mediaplayer","spotify","ukw","internetradio123"]'
Durch "internetradio123" habe ist ja genug Platz für den "Pfeil" aber ist ja nicht hilfreich falsche "Werte" einzufügen.
Wie gebe ich denn die Breite in "fhem-tablet-ui-user.css" vor?
Versuche gerade das TabletUI von "www.ueberueck.com", finde ich für den Start sehr gut aufgebaut.
https://www.ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6[/url]
Danke
class="large w3x top-space" geht auch. Man kann da ja Sachen mischen und du siehst ja dein Ergebnis beim Testen
Bzgl. der user.css einfach eine Datei mit dem Namen fhem-tablet-ui-user.css im Ordner css/ erstellen mit dem Inhalt, den du magst.
In die Html Seite im Head dann noch das angaben: <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
und in der user.css dann zb das:
.w4x select,
[data-type="label"].w4x,
[data-type="input"].w4x {
min-width: 300px;
max-width: 300px;
width: 300px;
}
Servus,
dankeschön.
Naja eine fhem-tablet-ui-user.css gibt es daher keine neue angelegt.
Das "verketten" von
class="w3x large top-space"
brachte keinen Erfolg. Erst das Einfügen von
.w4x select,
[data-type="label"].w4x,
[data-type="input"].w4x {
min-width: 200px;
max-width: 200px;
width: 200px;
}
in die fhem-tablet-ui-user.css und beim Select mit
class="w4x large top-space"
führte zum Ziel.
Ich hatte immer gedacht das muss beim Select direkt beschrieben werden aber wenn das so funktioniert ist ja auch gut.