Hi All
I am trying to create a scrolling text “banner” to show the Label and State of a group of items.
Group is created as follows:
Expecting to see the Following Scrolling from right to left:
Partition 1 Partition State - Disarmed Partition 2 Partition State - Disarmed Partition 3 Partition State - Armed Partition 4 Partition State - Disarmed
I am however getting the following:
Note also that only 2 out the 4 items are displayed - assuming this is part of the overlap issue?
From what I can see it looks like the 4 loop members are overlapping each other and I cannot work out how to fix this.
Changing the width values for the components and stylesheet has some effect, but can get the full text to display.
My widget is as follows:
uid: Test_Scrolling_Animation_Repeater
tags: []
props:
parameterGroups: []
timestamp: Dec 29, 2022, 11:23:14 AM
component: f7-page
config: {}
slots:
default:
- component: f7-badge
config:
style:
background: rgba(39,26,226,255)
border-radius: 5px
display: flex
height: 90px
left: 30px
overflow: hidden
position: absolute
top: 5%
width: 300px
slots:
default:
- component: oh-repeater
config:
for: PartitionState
sourceType: itemsInGroup
groupItem: PartitionState_Group
fragment: true
slots:
default:
- component: f7-row
config:
style:
stylesheet: >
.scroll_text {
display: block; /* Important to give the content a width */
width: 300px;
overflow: hidden;
position: relative;
transform: translateX(100%); /* Animation start out of the screen */
/* Add the animation */
animation: move 6s linear infinite /* infinite make reapeat the animation indefinitely */;
} /* Create the animation */ @keyframes move {
to { transform: translateX(-100%); }
}
slots:
default:
- component: Label
config:
class: scroll_text
large: true
raised: true
style:
background: rgba(39,26,226,255)
color: rgba(6,192,232,255)
font-size: 30px
font-weight: 700
left: 30px
top: 40px
width: 300px
text: =loop.PartitionState.label +" - " + loop.PartitionState.state
Any suggestions would be appreciated.
Mark