Autor Thema: (gelöst) Floorplan CSS und Select für ein Dropdown Menü  (Gelesen 1002 mal)

Offline Ma_Bo

  • Hero Member
  • *****
  • Beiträge: 1173
Hey Leute, ich versuche gerade mehrere Dropdownmenüs zu gestalten.

Wenn ich folgendes in der CSS stehen habe

Zitat
/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

bekomme ich das Aussehen wie auf Bild 1

wenn ich:

Zitat
/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

dann bekomme ich es wie in Bild 2.

Ich möchte aber für das Device Heizungsprogramm die Länge separat verstellen können, aber bekomme es nicht hin.
Kann mir jemand sagen, was ich eintragen muss, damit ich jedes Device einzeln einstellen kann?

Grüße Marcel
« Letzte Änderung: 22 Juli 2018, 18:20:12 von Ma_Bo »
NUC mit FHEM, HM Heizungsthermostate, HM Wandthermostate, Intertechno Funksteckdosen, 10" Tablet als Wanddisplay, KeyMatic, Fensterkontakte, Fensterkontakte umgebaut als Wassermelder und Briefkastenmelder, Aussenthermostat, Anwesenheitssteuerung über Fritz Box, Google Home usw. usw.

Offline mchilli

  • Jr. Member
  • **
  • Beiträge: 74
  • whoami?
Antw:Floorplan CSS und Select für ein Dropdown Menü
« Antwort #1 am: 22 Juli 2018, 12:41:47 »
Du kannst jedes div einzeln über die id ansprechen plus den zusatz das du alle child-elemente "select" ändern möchtest.

/* detail-selector & slider */
#div-name_des_device_1 select {  margin-left:5px; margin-right:5px;font-size:25px;width:170px; }
#div-name_des_device_2 select {  margin-left:5px; margin-right:5px;font-size:25px;width:270px; }
#div-name_des_device_3 select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
Mehr als 3, der eine macht das, der andere was ganz anderes und einer was ganz ähnliches, was ein anderer auch machen soll.

Offline Ma_Bo

  • Hero Member
  • *****
  • Beiträge: 1173
Antw:Floorplan CSS und Select für ein Dropdown Menü
« Antwort #2 am: 22 Juli 2018, 15:26:43 »
Super, das probiere ich nachher direkt mal aus...
Ich werde berichten...


Tapatalk iPhone, daher kurz gehalten.
NUC mit FHEM, HM Heizungsthermostate, HM Wandthermostate, Intertechno Funksteckdosen, 10" Tablet als Wanddisplay, KeyMatic, Fensterkontakte, Fensterkontakte umgebaut als Wassermelder und Briefkastenmelder, Aussenthermostat, Anwesenheitssteuerung über Fritz Box, Google Home usw. usw.

Offline Ma_Bo

  • Hero Member
  • *****
  • Beiträge: 1173
Antw:Floorplan CSS und Select für ein Dropdown Menü
« Antwort #3 am: 22 Juli 2018, 18:19:53 »
Du kannst jedes div einzeln über die id ansprechen plus den zusatz das du alle child-elemente "select" ändern möchtest.

/* detail-selector & slider */
#div-name_des_device_1 select {  margin-left:5px; margin-right:5px;font-size:25px;width:170px; }
#div-name_des_device_2 select {  margin-left:5px; margin-right:5px;font-size:25px;width:270px; }
#div-name_des_device_3 select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }


Vielen Dank, hat funktioniert...!
NUC mit FHEM, HM Heizungsthermostate, HM Wandthermostate, Intertechno Funksteckdosen, 10" Tablet als Wanddisplay, KeyMatic, Fensterkontakte, Fensterkontakte umgebaut als Wassermelder und Briefkastenmelder, Aussenthermostat, Anwesenheitssteuerung über Fritz Box, Google Home usw. usw.

 

decade-submarginal