[SOLVED] Not all buttons work

Apps & Services HABPanel
1

For days i am busy changing my habpanel layout. and maybe i dont see it anymore

but making some controlls for lights. i tought just some copy and past. but only the buttons down below keep working. the ones above doesnt. if i make new buttons again . only the last ones work. the one above not

again maybe getting some css blindness. any help very welcome

<div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width: 5px; height: 10px">
  <div class="template-contents">
    <div style="
            margin-top: 10px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div> 
<small style="color: darkorange; font-size:12pt">Hanglamp Woonkamer</small><br>

<button class="btn btn-lg" style="background-color: transparent; border-color: black; color: darkorange" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 0)">&nbsp&nbsp UIT
 </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
   ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>
  
<div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:405px; height: 90px">
  <div class="template-contents">
    <div style="
            margin-top: 110px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div> 
<small style="color: darkorange; font-size:12pt">Staandelamp TV </small><br>

   <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 2);sendCmd('RFSwitchType', 0)">&nbsp&nbsp 0%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 2);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">
  25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
   ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 2);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
    ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 2);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 2);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>

<div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:405px; height: 90px">
  <div class="template-contents">
    <div style="
            margin-top: 210px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div>
<small style="color: darkorange; font-size:12pt">Staande Lamp Achterdeur</small><br>

   <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 3);sendCmd('RFSwitchType', 0)">&nbsp&nbsp UIT
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 3);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">
  25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
    ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 3);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
    ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 3);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 3);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>
  
<div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:405px; height: 90px">
  <div class="template-contents">
    <div style="
            margin-top: 310px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div>
<small style="color: darkorange; font-size:12pt">Eetkamer Lamp</small><br>

   <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit',4);sendCmd('RFSwitchType', 0)">&nbsp&nbsp 0%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 4);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">
  25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 4);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 4);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 4);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>
    
 <div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:405px; height: 90px">
  <div class="template-contents">
    <div style="
            margin-top: 410px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div> 
<small style="color: darkorange; font-size:12pt">Keuken Lamp</small><br>

   <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 6);sendCmd('RFSwitchType', 0)">&nbsp&nbsp 0%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 6);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">
  25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 6);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 6);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 6);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>
2

not very clear :slight_smile:

maybe it’s better to post the section of the code that works separate from the section of the code that doesn’t work for you.

Anything in the logs (or the Chrome DevTools? (press F12 in Chrome))

3

exm
exm.png479Ă—646 29.6 KB

only the last 5 buttons keep working. so “ganglamp”… all buttons above dont work anymore. if i remove “ganglamp” then “keukemlamp” starts workin again… but above not…
i checked the code for a hour…

4

there are 6 identical containers, 1 by 1 they work perfect… but all togehter not
this is 1 container

<div class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width: 5px; height: 10px">
  <div class="template-contents">
    <div style="
            margin-top: 10px;
            margin-left: 20px;
            border-radius: 10px;
            border: 2px;
            border-style: solid;
            font-weigth: bold;
            border-color: darkorange ;
            width:405px; height: 90px;
            ">
<div class="row" style="height: 5px" ></div> 
<small style="color: darkorange; font-size:12pt">Hanglamp Woonkamer</small><br>

<button class="btn btn-lg" style="background-color: transparent; border-color: black; color: darkorange" 
 ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 0)">&nbsp&nbsp UIT
 </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 3)">25%
  </button>
 <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
   ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 7)"> 50%
  </button>
<button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white" 
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 11)">  75%
  </button>
  <button class="btn btn-lg" style="background-color: transparent; border-color: transparent; color: white"
  ng-click="sendCmd('RfAdres', 123);sendCmd('Rfunit', 1);sendCmd('RFSwitchType', 2);sendCmd('RFDim', 15)">
 100%
  </button></br></div></div></div>
5

I think you have 2 problems in your code:
a small one (font-weight instead of font-weigth)
a big one: remove position:absolute. You are drawing the buttons on top of each other now

1 Like
6

yup your the best
only the first contanair needs the position:absolute … the others dont
it was css blindness
Thanks

1 Like