Hi!
i have adapted a weahter widget and it looks good on pc but one label is not shown properly on smartphones and tablets:
this is what it looks like on PC (it’s still ok when i use the “device” tool from developer options in chrome):
i usually try to find out what’s happening with developer tools but i couldn’t figure out how to use the tool on android…
this is my code:
component: f7-card
config:
style:
noShadow: false
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor ? props.bgcolor : ''"
height: "=props.wheight ? props.wheight : '140px'"
margin: 2px
padding: 0px
class:
- display-flex
slots:
default:
- component: f7-row
config:
style:
align-items: center
padding-top: 0px
slots:
default:
- component: f7-col
config:
style:
flex: 1
margin-left: 10px
margin-right: 10px
slots:
default:
- component: f7-icon
config:
f7: "=(items['OneCallAPIweatherandforecast_Current_Iconid'].state === '01d') ? 'sun_max' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '01n') ? 'moon_stars' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '02d') ? 'cloud_sun' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '02n') ? 'cloud_moon' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '03d') ? 'cloud' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '03n') ? 'cloud' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '04d') ? 'cloud' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '04n') ? 'cloud' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '09d') ? 'cloud_heavyrain' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '09n') ? 'cloud_heavyrain' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '10d') ? 'cloud_sun_rain' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '10n') ? 'cloud_moon_rain' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '11d') ? 'cloud_sun_bolt' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '11n') ? 'cloud_moon_bolt' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '13d') ? 'cloud_snow' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '13n') ? 'cloud_snow' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '50d') ? 'cloud_fog' : (items['OneCallAPIweatherandforecast_Current_Iconid'].state === '50n') ? 'cloud_fog' : '?'"
size: "=props.wwidth ? props.wwidth : '75'"
- component: f7-col
config:
style:
flex: 8
margin-right: 10px
slots:
default:
- component: f7-row
config:
style:
justify-content: flex-start
slots:
default:
- component: f7-chip
config:
iconF7: thermometer
text: =items[props.temp_item].state
style:
font-size: 16px
--f7-chip-bg-color: rgba(255, 255, 255, 0)
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconSize: 25
- component: Label
config:
text: =items[props.cond_item].state
style:
font-size: 16px
[...]
any ideas why the label “Mäßiger Regen” is above the temperature chip in the first row beside the “big” icon?
and i also noticed that the margin between the 2 rows is bigger on android, no idea on that, too…
as always i’d really appreciate your input!