Capital letters in personalized widget

Apps & Services Android App
1

I built a widget that shows today’s weather in just one button. The title appears as stored on the PC, but in capital letters on Android. It works correctly with other widgets.
Any ideas why this is?

uid: Weather_Button
tags:
  - in use
props:
  parameters:
    - description: title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Rain
      label: Rain
      name: itemRain
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Backgroundimage
      name: bgimage
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 24, 2023, 12:13:57 PM
component: f7-card
config:
  style:
    background: '=(items[props.itemRain].state) === "ON" ?  "#000050" : "#1c1c1e"'
    border-radius: var(--f7-card-expandable-border-radius)
    class:
      - padding
    height: 8.5em
    max-width: 150px
    min-width: 100px
slots:
  content:
    - component: oh-button
      config:
        action: popup
        actionModal: '=(props.page) ? props.page : "page:page_18d50bb683"'
        style:
          color: white
          height: 100%
          padding: 0px
          width: 100%
          margin-top: -6px
      slots:
        default:
          - component: f7-row
            config:
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 15px
                            margin-bottom: 0px
                            margin-top: -7px
                          text: =props.title
                      - component: f7-icon
                        config:
                          f7: "=(items.OpenWeatherMap_ForecastToday_Iconid.state === '01d') ? 'sun_max' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '01n') ? 'moon_stars' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '02d') ? 'cloud_sun' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '02n') ? 'cloud_moon' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '03d') ? 'cloud' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '03n') ? 'cloud' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '04d') ? 'cloud' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '04n') ? 'cloud' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '13d') ? 'cloud_snow' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '13n') ? 'cloud_snow' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '50d') ? 'cloud_fog' : (items.OpenWeatherMap_ForecastToday_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 70
                          style:
                            margin-top: -5px
                            margin-left: 0px
                      - component: Label
                        config:
                          style:
                            font-size: 18px
                            font-weight: 400
                            margin-bottom: 0px
                            margin-top: -12px
                          text: =Math.round(items.OpenWeatherMap_ForecastToday_Precipprobability.state.split(' ')[0] * 1) + '%'
    - component: f7-icon
      config:
        f7: umbrella_fill
        size: 30
        style:
          color: gray
          margin-top: -210px
          margin-left: -10px
        visible: =(items[props.itemRain].state === "ON")

Screenshot PC
Screenshot Android

2

Pretty much the most likely way I can see that this could happen is if there’s an errant text-transform: uppercase css style applied somewhere along the line. I don’t know where exactly this would come from as I’ve never noted this problem before.

You should be able to at least work around the problem by adding text-transform: none !important to the label style.

3

The problem only occurs with buttons with integrated links. Maybe that’s where the cause is. In any case, the workaround helped - thank you very much.