Hi,
I face a problem with vertical scroll tried a lot and couldn’t solve it.
the problem as you can see in the video that when I open my dashboard there will be a vertical scroll once I click in any button of the paper buttons the vertical scroll will stop not sure why ? when I delete the card that use paper buttons row this behaver don’t appear.
here is my code:
type: custom:paper-buttons-row
styles:
gap: 8px
justify-content: flex-start
'-ms-overflow-style': none;
overflow-x: scroll
margin: 24px 8px 0px 8px
buttons:
- icon: mdi:door
layout: icon|name
name: Door
entity: lock.mousa_door
tap_action:
action: toggle
confirmation:
text: realy?
state_styles:
unlocked:
button:
background: var(--active-big)
name:
color: var(--black)
icon:
background-color: var(--white)
color: var(--black)
styles:
name:
padding: 0 10px
color: var(--gray000)
button:
display: flex
background-color: var(--gray800)
border-radius: 24px
color: var(--white)
height: 34px
margin-right: 0px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:washing-machine
layout: icon|state
entity: sensor.vaskemaskin
state:
attribute: remain_time
styles:
state:
padding: 0 10px
color: var(--black)
button:
display: '{{ ''flex'' if is_state(config.entity, ''on'') else ''none'' }}'
background: var(--active-big)
border-radius: 24px
color: var(--black)
height: 34px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:power-plug
layout: icon|state
entity: binary_sensor.car_charging_new
state:
entity: sensor.car_cahrging_time
styles:
state:
padding: 0 10px
color: var(--black)
button:
flex-basis: 1
flex-shrink: 0
display: '{{ ''flex'' if is_state(config.entity, ''on'') else ''none'' }}'
background: var(--active-big)
border-radius: 24px
color: var(--black)
height: 34px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:parking
entity: sensor.car_parking_status
layout: icon|state
name: Parking
styles:
name:
padding: 0 10px
button:
flex-basis: 1
flex-shrink: 0
display: '{{ ''flex'' if is_state(config.entity, ''Parking'') else ''flex'' }}'
background: var(--active-big)
border-radius: 24px
color: black
height: 34px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:solar-power-variant-outline
layout: icon|state
entity: sensor.solar_production_power
state: '{{ states(config.entity) }} w'
styles:
state:
padding: 0 10px
color: var(--gray000)
button:
flex-basis: 1
flex-shrink: 0
display: >-
{% if states(config.entity) | float < 20 %}none{% else %}flex{% endif
%}
background-color: var(--gray800)
border-radius: 24px
color: var(--white)
height: 34px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:transmission-tower
layout: icon|state
entity: sensor.house_with_solar_power_new
state: '{{ states(config.entity) }} w'
styles:
state:
padding: 0 10px
color: var(--gray000)
button:
flex-basis: 1
flex-shrink: 0
display: flex
background-color: var(--gray800)
border-radius: 24px
color: var(--white)
height: 34px
icon:
'--mdc-icon-size': 26px
color: var(--gray800)
width: 36px
height: 36px
display: flex
margin-left: '-2px'
justify-content: center
align-items: center
background: var(--gray000)
border-radius: 50%
- icon: mdi:wifi
layout: icon
name: Wifi
ripple: none
tap_action:
action: navigate
navigation_path: '#wifi'
styles:
name:
padding: 0px 0px
button:
flex-basis: 0
flex-shrink: 0
display: flex
background-color: var(--gray800)
border-radius: 50%
color: white
height: 34px
icon:
'--mdc-icon-size': 24px
color: var(--gray000)
width: 34px
height: 34px
display: flex
margin-left: 0px
justify-content: center
align-items: center
kindly find the video here to under stand what I mean 
.