OH3: oh-button f7-segmented CSS? problem

maxmaximax · January 30, 2021, 4:37pm

… struggeling with a layout problem.

The border of the most left oh-button gets cut off somehow when f7-segmented is used…
I also notoced that I had this problem already with the Grafana time ranges widget.
I spent hours trying to fix this.

button border 1

Normal button works fine (see 1st row).
I tried different ways to use f7-segmented, but no success (rows 2-4).

I suspect that f7-segmented is causing the problem.

YAML:

uid: Button test
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Jan 30, 2021, 4:25:39 PM
component: f7-card
config:
  outline: true
  class:
    - no-padding
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom half
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - padding-top-half
                      - display-flex
                      - flex-direction-column
                    text: ON/OFF
                    action: toggle
                    actionItem: ZWaveNode007FGS223DoubleSwitch2_Switch1
                    actionCommand: ON
                    actionCommandAlt: OFF
                    icon-f7: power
                    iconSize: 15
                    iconColor: white
                    fill: "=(items.ZWaveNode007FGS223DoubleSwitch2_Switch1.state === 'ON') ? true : false"
                    style:
                      --f7-button-border-width: 1px
                      --f7-button-text-color: white
                      --f7-button-border-color: rgba(255, 255, 255, 0.15)
                      --f7-button-border-radius: 15px
                      --f7-button-padding-vertical: 0px
                      --f7-button-padding-horizontal: 0px
                      --f7-button-hover-bg-color: rgba(255, 255, 255, 0.15)
                      --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.05)
                      --f7-button-fill-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                      height: auto
                      font-size: 10px
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom half
      slots:
        default:
          - component: f7-segmented
            config:
              class:
                - segmented-strong
              style:
                --f7-segmented-strong-padding: 0px
                --f7-segmented-strong-between-buttons: 5px
                --f7-segmented-strong-button-font-weight: 300
                --f7-segmented-strong-bg-color: transparent
                --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
            slots:
              default:
                - component: oh-button
                  config:
                    class:
                      - padding-top-half
                      - display-flex
                      - flex-direction-column
                    text: ON/OFF
                    action: toggle
                    actionItem: ZWaveNode007FGS223DoubleSwitch2_Switch1
                    actionCommand: ON
                    actionCommandAlt: OFF
                    icon-f7: power
                    iconSize: 15
                    iconColor: white
                    fill: "=(items.ZWaveNode007FGS223DoubleSwitch2_Switch1.state === 'ON') ? true : false"
                    style:
                      --f7-button-border-width: 1px
                      --f7-button-text-color: white
                      --f7-button-border-color: rgba(255,255,255,.15)
                      --f7-button-border-radius: 15px
                      --f7-button-padding-vertical: 0px
                      --f7-button-padding-horizontal: 0px
                      height: auto
                      font-size: 10px
    - component: f7-segmented
      config:
        class:
          - segmented-strong
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom
        style:
          --f7-segmented-strong-padding: 0px
          --f7-segmented-strong-between-buttons: 5px
          --f7-segmented-strong-button-font-weight: 300
          --f7-segmented-strong-bg-color: transparent
          --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
      slots:
        default:
          - component: oh-button
            config:
              class:
                - padding-top-half
                - display-flex
                - flex-direction-column
              text: ON/OFF
              action: toggle
              actionItem: ZWaveNode007FGS223DoubleSwitch2_Switch1
              actionCommand: ON
              actionCommandAlt: OFF
              icon-f7: power
              iconSize: 15
              iconColor: white
              fill: "=(items.ZWaveNode007FGS223DoubleSwitch2_Switch1.state === 'ON') ? true : false"
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                height: auto
                font-size: 10px
    - component: f7-segmented
      config:
        visible: true
        round: false
        outline: false
        class:
          - segmented-strong
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom
        style:
          --f7-segmented-strong-padding: 0px
          --f7-segmented-strong-between-buttons: 5px
          --f7-segmented-strong-button-font-weight: 300
          --f7-segmented-strong-bg-color: transparent
          --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
      slots:
        default:
          - component: oh-button
            config:
              class:
                - padding-top-half
                - display-flex
                - flex-direction-column
              text: ON/OFF
              action: toggle
              actionItem: ZWaveNode007FGS223DoubleSwitch2_Switch1
              actionCommand: ON
              actionCommandAlt: OFF
              icon-f7: power
              iconSize: 15
              fill: "=(items.ZWaveNode007FGS223DoubleSwitch2_Switch1.state === 'ON') ? true : false"
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                height: auto
                font-size: 8px
          - component: oh-button
            config:
              iconF7: arrow_2_squarepath
              iconSize: 15px
              fill: "=(items.DaikinACUnit192168040_Mode.state === 'AUTO') ? true : false"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
                - padding-top-half
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
              text: AUTO
              action: command
              actionItem: DaikinACUnit192168040_Mode
              actionCommand: ="AUTO"
          - component: oh-button
            config:
              iconF7: thermometer_snowflake
              iconSize: 15px
              fill: "=(items.DaikinACUnit192168040_Mode.state === 'COLD') ? true : false"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
                - padding-top-half
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 1px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
              text: COOL
              action: command
              actionItem: DaikinACUnit192168040_Mode
              actionCommand: ="COLD"
          - component: oh-button
            config:
              iconF7: thermometer_sun
              iconSize: 15px
              fill: "=(items.DaikinACUnit192168040_Mode.state === 'HEAT') ? true : false"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
                - padding-top-half
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
              text: HEAT
              action: command
              actionItem: DaikinACUnit192168040_Mode
              actionCommand: ="HEAT"
          - component: oh-button
            config:
              iconF7: drop_fill
              iconSize: 15px
              fill: "=(items.DaikinACUnit192168040_Mode.state === 'DEHUMIDIFIER') ? true : false"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
                - padding-top-half
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
              text: DRY
              action: command
              actionItem: DaikinACUnit192168040_Mode
              actionCommand: ="DEHUMIDIFIER"
          - component: oh-button
            config:
              iconF7: wind
              iconSize: 15px
              fill: "=(items.DaikinACUnit192168040_Mode.state === 'FAN') ? true : false"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
                - padding-top-half
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
              text: FAN
              action: command
              actionItem: DaikinACUnit192168040_Mode
              actionCommand: ="FAN"
          - component: oh-button
            config:
              iconF7: ellipsis_vertical
              iconSize: 15px
              action: variable
              actionVariable: options
              actionVariableValue: "=vars.options || vars.options === undefined ? false : true"
              fill: "=vars.options || vars.options === undefined ? false : true"
              round: false
              outline: false
              class:
                - display-flex
                - flex-direction-column
              style:
                --f7-button-border-width: 1px
                --f7-button-text-color: white
                --f7-button-border-color: rgba(255,255,255,.15)
                --f7-button-border-radius: 15px
                --f7-button-padding-vertical: 0px
                --f7-button-padding-horizontal: 0px
                font-size: 8px
                height: auto
                width: 50%

Hope this is not a bug …

Any idea how to fix this?

maxmaximax · January 30, 2021, 4:57pm

… when I use a very small border radius for the button - the edges of the most right button get cut off as well and the border is a bit thinner on the right hand side of the button.
Seems as if f7-segmented has the same problem on the left and on the right end.

Very strange…

DiegoDf · May 7, 2024, 8:39am

I had the same problem when using f7-segmented in a css grid. This is my test:

with code:

uid: testSegmented
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: May 7, 2024, 10:23:33 AM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          display: grid
          grid-template-columns: 2fr 4fr
        stylesheet: >
          .button {   
            border: 1px solid grey;      
          }
      slots:
        default:
          - component: Label
            config:
              text: Label
          - component: f7-segmented
            slots:
              default:
                - component: oh-button
                  config:
                    class: = 'button'
                    text: left
                - component: oh-button
                  config:
                    class: = 'button'
                    text: right

The solution was not to use the stylesheet for the border, but to place the style directly in the button component:

uid: testSegmented
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: May 7, 2024, 10:23:33 AM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          display: grid
          grid-template-columns: 2fr 4fr
      slots:
        default:
          - component: Label
            config:
              text: Label
          - component: f7-segmented
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      border: 1px solid grey
                    text: left
                - component: oh-button
                  config:
                    style:
                      border: 1px solid grey
                    text: right

Don’t ask me why