Hi All.
Looking for help again.
I am trying to convert my oh-buttons to be populated by an oh-repeater. Got that part working, but when the widget is resized I cannot seem to prevent the ellipses from showing.
Works in my setup with multiple oh-buttons however. So not sure if this is an oh-button issue or an issue with my layout/syntax?
I have tried the:
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
In all the places I can think. Even tested the border-radius: 12px which seems to work?
My yaml:
uid: Test_Overflow
tags: []
props:
parameterGroups: []
timestamp: Jul 13, 2021, 7:02:51 PM
component: f7-page
config:
style:
--f7-popup-tablet-width: 40px
--f7-navbar-height: 35px
--f7-navbar-font-size: 15px
--f7-navbar-bg-color: transparent
--f7-navbar-border-color: transparent
--f7-navbar-link-color: white
--f7-navbar-text-color: white
--f7-navbar-shadow-image: none
text-overflow: ellipsis
left: 0px
top: 0px
background-color: rgb(220,220,220)
--f7-card-margin-horizontal: 0px
border-radius: 30px
width: 100%
height: 100%
--f7-bars-translucent-opacity: none
--f7-bars-translucent-blur: none
slots:
default:
- component: Label
config:
text: ="Overflow Test"
style:
position: absolute
left: 40%
top: 0%
color: white
font-size: 25px
line-height: 32px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
text-shadow: -1px 1px 1px hsl(0,0%,66%)
- component: oh-button
config:
tooltip-trigger: hover
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 1 to current run"'
text: P1
textColor: white
bgColor: '=(items.Partition1_Armed.state === "ON") ? "red" : "green"'
action: variable
actionVariable: selectedPartition
actionVariableValue: Partition1
style:
position: absolute
left: 5%
top: 50.5%
border-radius: 12px
- component: oh-button
config:
tooltip-trigger: hover
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 2 to current run"'
text: P2
bgColor: '=(items.Partition2_Armed.state === "ON") ? "red" : "green"'
textColor: white
action: variable
actionVariable: selectedPartition
actionVariableValue: Partition2
style:
position: absolute
left: 17%
top: 50.5%
border-radius: 12px
- component: oh-button
config:
tooltip-trigger: hover
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 3 to current run"'
text: P3
bgColor: '=(items.Partition3_Armed.state === "ON") ? "red" : "green"'
textColor: white
action: variable
actionVariable: selectedPartition
actionVariableValue: Partition3
style:
position: absolute
left: 29%
top: 50.5%
border-radius: 12px
- component: oh-button
config:
tooltip-trigger: hover
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition 4 to current run"'
text: P4
bgColor: '=(items.Partition4_Armed.state === "ON") ? "red" : "green"'
textColor: white
action: variable
actionVariable: selectedPartition
actionVariableValue: Partition4
style:
position: absolute
left: 41%
top: 50.5%
border-radius: 12px
- component: f7-block
config:
style:
--f7-button-text-color: var(--f7-text-color)
--f7-button-bg-color: var(--f7-card-bg-color)
--f7-theme-color-rgb: var(--f7-color-blue-rgb)
top: 55%
position: absolute
width: 100%
class:
- padding
slots:
default:
- component: f7-row
config:
style:
--f7-theme-color: var(--f7-color-blue)
--f7-button-bg-color: transparent
class: margin
slots:
default:
- component: oh-repeater
config:
fragment: true
for: partition
in:
- 1
- 2
- 3
- 4
slots:
default:
- component: f7-col
config:
width: "10"
slots:
default:
- component: oh-button
config:
tooltip-trigger: hover
tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"'
bgColor: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_Armed"].state === "ON") ? "red" : "green"'
style:
--f7-button-hover-bg-color: var(--f7-color-blue-tint)
--f7-button-pressed-bg-color: var(--f7-color-blue-tint)
border-radius: 12px
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
text: =["P" + loop.partition]
fill: true
textColor: white
disabled: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? true : false'
raised: false
action: variable
actionVariable: selectedPartition
actionVariableValue: ='Partition' + loop.partition
Any suggestions please?
Thanks
Mark