Hey is there a way to remove the lines/borders? In Chrome on the PC they are not displayed, on the PI with Chromium they are. noHairlinesBetween: true and noBorder: true do not help.
Chrome:
Chromium:
uid: Card_List_Geraete
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: icon name without ".png", located in static/icons/ folder
label: Icon
name: iconimage
required: false
type: TEXT
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
timestamp: May 3, 2024, 2:01:24 PM
component: f7-card
config:
style:
--f7-card-box-shadow: none
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
class:
- padding: 0px
color: black
height: 225px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: oh-image
config:
style:
height: 25px
left: 16px
opacity: 1
position: absolute
top: 1px
url: ='/icon/classic/' + props.iconimage + '.png'
visible: "=props.iconimage ? true : false"
- component: Label
config:
style:
color: black
font-size: 17px
font-weight: 600
margin-left: 35px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
class:
- padding: 0px
left: 16px
noShadow: true
position: absolute
top: 60px
width: 100%
slots:
default:
- component: oh-list-card
config:
style:
--f7-list-item-border-color: transparent
background-color: "=props.bgcolor ? props.bgcolor : ''"
color: black
slots:
default:
- component: oh-label-item
config:
icon: dishwasher
style:
--f7-list-item-border-color: transparent
background-color: "=props.bgcolor ? props.bgcolor : ''"
title: Spülmaschine
slots:
after:
- component: Label
config:
style:
color: black
text: =items.VI_Geraet_Spuelmaschine_Status.state
- component: oh-label-item
config:
icon: waschmaschine
style:
--f7-list-item-border-color: transparent
background-color: "=props.bgcolor ? props.bgcolor : ''"
title: Waschmaschine
slots:
after:
- component: Label
config:
style:
color: black
text: =items.VI_Geraet_Waschmaschine_Status.state
- component: oh-label-item
config:
icon: trockner
style:
--f7-list-item-border-color: transparent
background-color: "=props.bgcolor ? props.bgcolor : ''"
title: Trockner
slots:
after:
- component: Label
config:
style:
color: black
text: =items.VI_Geraet_Trockner_Status.state
JustinG
May 3, 2024, 2:43pm
2
Have you also tried noHairlinesBetweenMd ?
Yes, it makes no difference whether noHairlinesBetween or noHairlinesBetweenMd.
slots:
default:
- component: oh-list-card
config:
noHairlinesBetweenMd: true
style:
It seems to be disturbed somehow the in a test widget it works.
uid: widget_06a406840c
tags: []
props:
parameters: []
parameterGroups: []
timestamp: May 3, 2024, 6:15:34 PM
component: f7-card
config: {}
slots:
content:
- component: oh-list-card
config:
noHairlinesBetween: true
noHairlinesBetweenMd: true
style:
color: black
slots:
default:
- component: oh-label-item
config:
title: TEST
- component: oh-label-item
config:
title: TEST2
if I add background-color to oh-label-item, from then on it no longer works
TRUE
FALSE
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: oh-list-card
config:
noHairlinesBetweenMd: true
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
default:
- component: oh-label-item
config:
title: TEST
- component: oh-label-item
config:
title: TEST2
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: oh-list-card
config:
noHairlinesBetweenMd: true
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
default:
- component: oh-label-item
config:
title: TEST
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
- component: oh-label-item
config:
title: TEST2
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
JustinG
May 3, 2024, 5:23pm
5
Sorry, for chromium on the Pi it might be that you want noHairlinesBetweenAurora not Md.
That’s very strange. Are you sure that it’s not there but impossible to see do to color scheme? The hair is created by the f7 library as an after psuedo element. To get a better idea of what’s going on here it might be useful to use the page inspector and see what’s going on with the element:
<div class="item-inner">
<div class="item-title">
TEST
</div>
<div class="item-after">
<div>
-
</div>
</div>
<!---->
<!---->
<!---->
<!---->
::after <--if hairlines are truly not displayed this will not be here.
</div>
That pseudo element is added programtically by the f7 library. If changing one of the styles of a different element really impacts whether that happens or not, it sounds like it might be an issue with the f7 library and not OH. In that case, your back-up plan of modifying the list item border color variable is one reasonable solution. Although instead of placing it everywhere, I suspect you could just set it once at a higher container level but use
--f7-list-item-border-color: transparent !important
Although if there are strange things going on about how this is being generated then that still might not work.
Personally, I would eliminate all ambiguity and use a stylesheet to make sure the pseudo elements never get displayed, if that is what you are looking for:
- component: oh-list-card
config:
stylesheet: >
.item-inner::after {
display: none;
}
yes the ::after does not exist if i use background-color in the oh-label-item. use
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
And neither of the following variants was successful, the hairlines are still displayed.
uid: widget_06a406840c
tags: []
props:
parameters:
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: May 3, 2024, 6:56:33 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: oh-list-card
config:
noHairlinesBetween: true
noHairlinesBetweenMd: true
noHairlinesBetweenAurora: true
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
--f7-list-item-border-color: transparent !important
slots:
default:
- component: oh-label-item
config:
title: TEST
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
- component: oh-label-item
config:
title: TEST2
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
uid: widget_06a406840c
tags: []
props:
parameters:
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: May 3, 2024, 8:46:24 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: oh-list-card
config:
noHairlinesBetween: true
noHairlinesBetweenMd: true
noHairlinesBetweenAurora: true
stylesheet: >
.item-inner::after {
display: none;
}
slots:
default:
- component: oh-label-item
config:
title: TEST
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
- component: oh-label-item
config:
title: TEST2
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
JustinG
May 3, 2024, 7:04pm
7
That’s even more mysterious. There shouldn’t be any way for it to ignore the css directive in the style sheet. If you’re in the widget editor often you have to push the refresh link for the stylesheet to be properly rendered.
Do you get teh same problems if you use an oh-list instead of an oh-list-card?
No, with oh-list it works as it should, no matter on which device
uid: widget_06a406840c
tags: []
props:
parameters:
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: May 3, 2024, 9:33:03 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: oh-list
config:
noHairlinesBetween: true
slots:
default:
- component: oh-label-item
config:
title: TEST
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
- component: oh-label-item
config:
title: TEST2
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
JustinG
May 3, 2024, 8:28pm
9
That continues to suggest to me that this is some deeper f7 issue, but here’s one more test. This replicates the full construction of the oh-list-card out of primary components. Does the error occur again?
uid: widget_06a406840c
tags: []
props:
parameters:
- description: HEX or rgba
label: Background Color
name: bgcolor
required: false
type: TEXT
parameterGroups: []
timestamp: May 3, 2024, 9:33:03 PM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
slots:
content:
- component: f7-card
config: {}
slots:
default:
- component: f7-card-content
config: {}
slots:
default:
- component: oh-list
config:
noHairlinesBetween: true
slots:
default:
- component: oh-label-item
config:
title: TEST
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
- component: oh-label-item
config:
title: TEST2
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
Yes, the error still exists with your code.
JustinG
May 4, 2024, 6:02pm
11
Yeah, it must be some strange f7 issue then (or possibly chromium, though I’m not sure how if the issue isn’t present on chrome).
I think you’re best option is to go with the raw oh-list instead of the oh-list-card. If there’s some styling about the card that you really liked for your widget you can add a div or f7-block and create the same look with styling on that container.
Yes, then I will use the OH-LIST.
Thank you for the help