Ich versuche gerade die Bedienelemente für einen meiner SB-Player etwas "platzsparender" zu Organisieren. Dabei möchte ich die Dropdownliste der Favoriten in die Anzeige integrieren, so dass ich von dort aus die Favoriten anwählen kann. Da wo auf dem Bild die Ellipse ist, soll man das Dropdown öffnen können. Ich weiß ja wo ich hin-touchen muss ;-)
Damit das einigermaßen sauber ausschaut, sollte der Dropdown-Pfeil und der Rahmen verschwinden, sowie die Anzeige des jeweilig gewählten Favoriten "mittig" angezeigt werden. Irgendwie scheinen aber die css-Klassen nicht richtig so wie ich will angewendet zu werden.
Border bekomme ich noch recht einfach in der select-Klasse weg, aber beim Pfeil und dem center kommt mir anscheinend der select-wrapper in die Quere. Auch auskommentieren führt nur teilweise zum gewünschten Ergebnis (Pfeil is weg, aber der Text steht linksbündig).
select,
input.textinput {
border: none !important;
text-align: center;
.select_wrapper:after {
/* position: absolute;
right: 6px;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
text-decoration: inherit;
font-size: 150%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
-webkit-appearance: none !important;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;*/
}
Was mache ich denn falsch, bzw. wo verstehe ich das Zusammenspiel der CSS-Klassen nicht richtig?
Gib deinem select-widgets eine eigene CSS-Class
<div data-type="select" data-device="AvReceiverZ2" class="wthBorder"></div>
,die du dann in deiner fhem-tablet-ui-user.css definierst
[data-type="select"].wthBorder select {
border: 0px solid transparent;
text-indent: 25px;
}
[data-type="select"].wthBorder .select_wrapper:after {
font-size: 0px;
}
in der index.html muss diese dann im <head> eingefügt werden
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
Servus setstate,
so einfach geht's. Vielen Dank für die rasche Hilfe!