Display on iPad mini (iOS 9.5) does not work porperly. I have issues with openweathermap display (OpenWeatherMap widget for HABPanel).
It works on all other devices (Macbook, iPad Pro, iPad mini 4, iPhone XS). Is there a limitation for old devices ?
I fixed it using a template instead the widget
<!-- For more information goto: https://github.com/BasvanH/habpanel-widget-openweathermap -->
<link rel="stylesheet" type="text/css" href="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/weather-icons-master/css/weather-icons.css">
<style>
@media (min-width: 992px) {
.col-sm-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-sm-border + .col-sm-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
.owm-to-upper:first-letter {
text-transform: uppercase;
}
.owm-condition {
height: 2em;
}
.owm-row-current {
margin: 1em 0em 2em;
}
.owm-row-forecast {
margin-bottom: 1em;
}
}
</style>
<div id="container">
<div class="row owm-row-current">
<div class="col-sm-4">
<h2 class="text-left owm-to-upper">{{itemValue('Weather_OWM_Condition')}}</h2>
</div>
<div class="col-sm-3">
<i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId')}} pull-center" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_current == NULL) ? '10em' : config.icon_size_current + 'em' }"></i>
</div>
<div class = "col-sm-5 text-right">
<h2>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temperature').split(' ')[0]}} {{itemValue('Weather_OWM_Temperature').split(' ')[1]}}</h2>
<h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/humidity.png"/> {{itemValue('Weather_OWM_Humidity')}}</h5>
<h5><img style="height:16px;" src="{{ config.html_path == NULL ? '/static/openweathermap' : config.html_path}}/images/wind.png"/> {{'%.1f' | sprintf:itemValue('Weather_OWM_Wind_Speed').split(' ')[0]}} {{itemValue('Weather_OWM_Wind_Speed').split(' ')[1]}}</h5>
<h5>{{itemValue('Weather_OWM_ObservationTime') | date: 'HH:mm'}}</h5>
</div>
</div>
<div class="row owm-row-forecast">
<div class="col-sm-3 col-sm-border">
<h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time0') | date:'EEE'}}</h4>
<i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId0')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!-- <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition0')}}</h5> -->
<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp0').split(' ')[0]}} {{itemValue('Weather_OWM_Temp0').split(' ')[1]}}</b></h6>
</div>
<div class="col-sm-3 col-sm-border">
<h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time1') | date:'EEE'}}</h4>
<i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId1')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!-- <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition1')}}</h5> -->
<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp1').split(' ')[0]}} {{itemValue('Weather_OWM_Temp1').split(' ')[1]}}</b></h6>
</div>
<div class="col-sm-3 col-sm-border">
<h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time2') | date:'EEE'}}</h4>
<i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId2')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!-- <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition2')}}</h5> -->
<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp2').split(' ')[0]}} {{itemValue('Weather_OWM_Temp2').split(' ')[1]}}</b></h6>
</div>
<div class="col-sm-3 col-sm-border">
<h4 class="owm-to-upper">{{itemValue('Weather_OWM_Forecast_Time3') | date:'EEE'}}</h4>
<i class="wi wi-owm-{{itemValue('Weather_OWM_ConditionId3')}}" ng-style="{ 'color' : '#00ccff', 'font-size' : (config.icon_size_forecast == NULL) ? '3em' : config.icon_size_forecast + 'em' }"></i>
<!-- <h5 class="owm-condition owm-to-upper">{{itemValue('Weather_OWM_Condition3')}}</h5> -->
<h6><b>{{'%.1f' | sprintf:itemValue('Weather_OWM_Temp3').split(' ')[0]}} {{itemValue('Weather_OWM_Temp3').split(' ')[1]}}</b></h6>
</div>
</div>
</div>
3 Likes