I’m developing a pop-up variant of a widget that I use to control the heating in each room/zone via HabPanel. Here’s how it looks as a non-popup widget:
When I use it as a widget, it functions fine–all the buttons work, I can adjust the slider, and use the dropdown to select the active profile. Unfortunately, when I try to put this widget in a pop-up, the drop-down menu choices appear underneath the popup:
Anyone know how to fix this? I assume it’s a simple CSS issue, but I can’t figure it out. Here’s my widget code:
<style>
.readout {
margin:0;
padding:0;
width:100%;
text-align:center;
margin-bottom: 12px;
margin-top: 12px;
overflow:auto;
}
.cdropdown {
margin:0;
padding:0;
margin-bottom: 12px;
margin-top: 12px;
overflow:auto;
}
.dropdown-menu {
overflow:auto;
}
</style>
<script type="text/ng-template" id="popup.html">
<div class="container" style="padding: 30px; border: 1px solid #456;">
<a ng-click="$close()" class="pull-right btn btn-danger">X</a>
<h3 style="color: white">{{getItem(config.zone_item).groupNames[0].replace('_', ' ').replace('_', ' ')}}</h3>
<font color='white'>
<h5>
<font size='2'>Temperature Control</font>
</h5>
<div>
<table class="readout">
<tr>
<th style="text-align:center">Current Temp</th>
<th style="text-align:center">Target Temp</th>
</tr>
<tr>
<td>
<div>
<font size=4>{{ itemState(getItem(config.zone_item).name.split('_')[0].concat('_Average_Temp')) }}</font>
<font size=1> °C</font>
</div>
</td>
<td>
<div>
<font size=4>{{ itemState(getItem(config.zone_item).name.split('_')[0].concat('1_Target_Temperature')) }}</font>
<font size=1> °C</font>
</div>
</td>
</tr>
</table>
</div>
<div>
<div class="btn-group btn-group-justified" ng-init="buttonitem = getItem(config.zone_item).name.split('_')[0].concat('_Automation_Mode')">
<div class="btn-group">
<button type="button" ng-class="(itemState(buttonitem) =='Static') ? 'btn btn-primary active':'btn btn-primary'" ng-click="sendCmd(buttonitem, 'Static')">Static</button>
</div>
<div class="btn-group">
<button type="button" ng-class="(itemState(buttonitem)=='Auto') ? 'btn btn-primary active':'btn btn-primary'" ng-click="sendCmd(buttonitem, 'Auto')">Auto</button>
</div>
<div class="btn-group">
<button type="button" ng-class="(itemState(buttonitem)=='Smart') ? 'btn btn-primary active':'btn btn-primary'" ng-click="sendCmd(buttonitem, 'Smart')">Smart</button>
</div>
</div>
</div>
<table class="readout">
<tr>
<td>
<div class="btn-group cdropdown" uib-dropdown dropdown-append-to-body="true" ng-init="profiles = itemState('Interval_Thermoschedules_List').split(',')">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{itemState(getItem(config.zone_item).name.split('_')[0].concat('_Automation_Setting'))}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button" style="z-index:1000;">
<li role="menuitem" ng-repeat="profile in profiles" ng-init="settingitem = ">
<a ng-click="sendCmd((getItem(config.zone_item).name.split('_')[0].concat('_Automation_Setting')), profile)">{{profile}}</a>
</li>
</ul>
</div>
</td>
<td>
<p><font size=1>Active Profile:</font></p>
<p>
{{itemState(getItem(config.zone_item).name.split('_')[0].concat('_Automation_Profile'))}}
</p>
</td>
</tr>
<tr>
<td>Window Supsension:</td>
<td>{{itemState(getItem(config.zone_item).name.split('_')[0].concat('_Window_Mode'))}}</td>
</tr>
</table>
<hr>
<div ng-init="offsetItem = getItem(config.zone_item).name.split('_')[0].concat('_Heating_Offset')">
<div class="slider-div" ng-init='offsetModel={"name": "Temperature Offset", "item": offsetItem, "floor" : -3, "ceil": 3, "step": 0.5, "hidelabel" : "false", "hidelimits": "false" }'>
<widget-slider ng-model="offsetModel"/>
</div>
</div>
<p>◄ Offset Control ►</p>
</font>
</div>
</script>
<button class="btn btn btn-lg" style="background-color:transparent;padding:0px" ng-click="openModal('popup.html', true, 'lg')">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 20 20" style=" fill:#000000;">
<g fill="#aaaaaa">
<path d="M5.739,4.034c-0.941,0-1.705,0.763-1.705,1.705c0,0.941,0.763,1.705,1.705,1.705c0.941,0,1.705-0.764,1.705-1.705C7.443,4.797,6.68,4.034,5.739,4.034 M5.739,6.591c-0.47,0-0.853-0.382-0.853-0.852s0.382-0.853,0.853-0.853s0.852,0.382,0.852,0.853S6.209,6.591,5.739,6.591 M13.194,12.723c-0.289,0.157-0.587,0.235-0.894,0.235c-0.393,0-0.747-0.076-1.064-0.229c-0.316-0.152-0.59-0.362-0.818-0.63s-0.404-0.585-0.529-0.952c-0.125-0.367-0.187-0.768-0.187-1.204c0-0.405,0.062-0.783,0.187-1.135c0.125-0.351,0.301-0.659,0.529-0.923s0.501-0.47,0.818-0.619c0.317-0.149,0.672-0.224,1.064-0.224c0.264,0,0.526,0.054,0.786,0.162c0.261,0.106,0.529,0.32,0.808,0.641l1.049-0.825c-0.379-0.466-0.786-0.797-1.226-0.992c-0.438-0.195-0.914-0.292-1.427-0.292c-0.585,0-1.122,0.101-1.61,0.304c-0.488,0.202-0.909,0.491-1.262,0.865C9.065,7.28,8.79,7.732,8.59,8.264c-0.199,0.531-0.299,1.122-0.299,1.771c0,0.634,0.1,1.211,0.299,1.73c0.2,0.52,0.476,0.965,0.829,1.336c0.353,0.371,0.773,0.657,1.262,0.859c0.488,0.203,1.025,0.304,1.61,0.304c0.556,0,1.08-0.114,1.571-0.344c0.492-0.229,0.909-0.596,1.252-1.101l-1.112-0.849C13.752,12.316,13.483,12.566,13.194,12.723 M17.671,0.625H2.33c-0.941,0-1.705,0.763-1.705,1.705v15.341c0,0.94,0.763,1.704,1.705,1.704h15.341c0.94,0,1.704-0.764,1.704-1.704V2.33C19.375,1.388,18.611,0.625,17.671,0.625M18.522,17.671c0,0.47-0.382,0.852-0.852,0.852H2.33c-0.47,0-0.853-0.382-0.853-0.852V2.33c0-0.47,0.382-0.853,0.853-0.853h15.341c0.47,0,0.852,0.382,0.852,0.853V17.671z"></path>
</g>
</svg>
</button>
Thanks!
