HabPanel Widget CSS issue

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!

I am not a CSS expert. Does this help ?: https://www.w3schools.com/cssref/pr_pos_z-index.asp
See also https://stackoverflow.com/questions/18722645/z-index-issue-with-css-dropdown-menu-appearing-behind-jquery-slider/18723049

I’ve tried adding a very high z-index to the style at multiple places, but no matter how high I set it, the dropdown choices still appear behind the popup. I suspect that the popup is somehow above all the z-indexes

Alright, I’ve fixed it using this stackexchange post.

1 Like