(gelöst) Tabelt UI Widget Select Länge verändern, Länger als längstes Element

[aherby]

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

"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?

Code Auswählen Erweitern


<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

[MKeY]

Hey, du kannst entweder die voreingestellten festen Breiten (w1x, w2x, oder w3x) in der fhem-tablet-ui.css nutzen:

Code Auswählen Erweitern

class="w2x"

Code Auswählen Erweitern

.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

[aherby]

Hallo,

danke für deinen Vorschlag.

Ja durch

Code Auswählen Erweitern


class="w3x top-space"
passt der Text in das Feld aber dann ist ja auch die Schrift kleiner.

Bisher hatte ich

Code Auswählen Erweitern


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

Code Auswählen Erweitern


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

[MKeY]

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

und in der user.css dann zb das:

Code Auswählen Erweitern

.w4x select,
[data-type="label"].w4x,
[data-type="input"].w4x {
    min-width: 300px;
    max-width: 300px;
    width: 300px;
}

[aherby]

Servus,

dankeschön.

Naja eine fhem-tablet-ui-user.css gibt es daher keine neue angelegt.

Das "verketten" von

Code Auswählen Erweitern


class="w3x large top-space"

brachte keinen Erfolg. Erst das Einfügen von

Code Auswählen Erweitern


.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

Code Auswählen Erweitern


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.