i’m trying to get my first custom widget up and running and came across an, hopeful, small problem.
The drop down menu in the widget is getting blocked/cover by the value of the underneath slider.
is there a possibility that the same goes, as everything else, in the background?
<style>
.icon-tile.colorize {
filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
}
.rzc-title {
color: #FFAA00;
}
.caret#rzc-caret {
position: absolute;
left: 95%;
top: 45%;
}
.rzc-button {
background-color: rgb(95,95,95);
color: #FFAA00;
border: none;
box-shadow: 0px 2px 4px #76899E;
overflow: hidden;
width: 100%;
border-radius: 5px;
font-size: 18px;
font-weight: normal;
}
ul.dropdown-menu#rzc-ac-dropdown {
background-color: rgb(55,55,55);
text-align: center;
border: 0px;
border-radius: 5px;
width: 100%;
}
ul.dropdown-menu#rzc-ac-dropdown li {
color: #FFAA00;
border-collapse: separate;
padding: 5px;
border-radius: inherit;
}
ul.dropdown-menu#rzc-ac-dropdown li a {
color: #FFAA00;
font-weight: bold;
}
ul.dropdown-menu#rzc-ac-dropdown li a:hover {
color: #000;
}
#receiver-knob path#valueArc {
fill: #FFAA00 !important;
}
#receiver-knob text#text {
fill: #FFAA00 !important;
}
</style>
<div ng-init="ACMode={
'1': 'FAN_ONLY',
'2': 'COOL',
'3': 'HEAT',
'0': 'OFF'}" />
<div ng-init="FanMode={
'1': 'AUTO',
'2': 'HIGH',
'3': 'MEDIUM',
'4': 'LOW'}" />
<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
<tr>
<td colspan="2">
<h2 class="rzc-title">{{config.title}}</h2>
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 100%;" class="btn-group" uib-dropdown>
<button type="button" class="rzc-button" uib-dropdown-toggle>
<span>AC Mode: {{ACMode[itemValue(config.ACMode)]}}</span><span class="caret" id="rzc-caret"></span>
</button>
<ul class="dropdown-menu" id="rzc-ac-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd(config.ACMode, '1')">FAN_ONLY</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.ACMode, '2')">COOL</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.ACMode, '3')">HEAT</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.ACMode, '0')">OFF</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style="width: 100%;" class="btn-group" uib-dropdown>
<button type="button" class="rzc-button" uib-dropdown-toggle>
<span>Fan Mode: {{FanMode[itemValue(config.FanMode)]}}</span><span class="caret" id="rzc-caret"></span>
</button>
<ul class="dropdown-menu" id="rzc-ac-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd(config.FanMode, '1')">AUTO</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.FanMode, '2')">HIGH</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.FanMode, '3')">MEDIUM</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.FanMode, '0')">LOW</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<br>
<br>
<div class="slider-div" ng-init='volumeModel={"name": "AC Temperature",
"sizeX": 3,
"sizeY": 2,
"item": "S_LR_AC_SC",
"type": "slider",
"row": 4,
"col": 0,
"floor": 10,
"ceil": 30,
"step": 0.5,
"unit": "C",
"showticks": true,
"bigslider": true,
"hidelabel": true }'>
<widget-slider ng-model="volumeModel"/>
</div>