cut it short:
setting custom:mod-card, even without any styling at all like:
- type: custom:mod-card
card:
type: custom:swipe-card
cards:
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
- type: custom:button-card
causes individual custom:button-card to disappear from the custom:swipe-card.
Not sure if that’s random, (though the order is seemingly so), because it’s always like this:
row 1 (4 cards) : loses card 2
row 2 (5 cards): loses card 4 + 5
row 3 (4 cards): always ok
row 4 (4 cards): loses card 1
now this is a bit complex, so forgive me for posting not just a short line of yaml.
I have a core vertical-stack of 4 custom:swipe-card configs, which each contain subviews with a vertical layout.
the main vertical-stack is in the form of:
type: vertical-stack
cards:
- !include /config/dashboard/buttons/buttons_dashboard_direct.yaml
- type: custom:swipe-card
# use anchors on all 3 other rows below this, but even when not using anchor, the issue remains unchanged
<<: &swipe
parameters:
effect: cards
pagination:
type: bullets #progressbar #fraction
navigation:
simulateTouch: true
spaceBetween: 12
preloadImages: false
preventInteractionOnTransition: true
preventClicks: true
freeMode: true
momentum: true
grabCursor: true
slidesPerView: 4 #in wide mode, 3 in mobile mode
cards:
and filled with these subviews for each area in my home.
also, this main vertical-stack itself is
inside a Panel view (to be able to mod-card that with a light/dark sensitive background), and inside a custom:state-switch, to be able to set the number of slidesPerView in the swipe card:
title: Plattegrond
path: plattegrond
icon: mdi:floor-plan
# background: center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed
panel: true
cards:
- type: custom:mod-card
style: |
ha-card {
background:
{% set dark = states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True) %}
{% set extension = '_inversed' if dark else '' %}
{{"center / cover no-repeat url('/local/images/areas/plattegrond"~extension~".png') fixed"}};
}
card:
type: custom:state-switch
entity: mediaquery
states:
'(min-width: 1000px)':
!include /config/dashboard/includes/include_plattegrond_swipe_4.yaml
all:
!include /config/dashboard/includes/include_plattegrond_swipe_3.yaml
main structure of a single area card is:
- type: custom:button-card
entity: light.laundry_ceiling
template: plattegrond
variables:
path: /ui-sub-views/bijkeuken
picture: bijkeuken_klein.jpg
tooltip: Bijkeuken
styles:
card:
- border-top: >
[[[ return (states['binary_sensor.laundry_sensor_motion'].state == 'on')
? '0.5rem solid red' : 'none'; ]]]
where the styles are only used in areas I actually have a motion sensor available. (for those of you familiar with custom:button-card: we can not use the additional entity of the motion-sensor in the variables, because the button-card wont update templates with these variable. Hence the hardcoded extra styles: on some of the cards)
so far so good, and working beautifully.
my issue arises, when I want/need to mod-card the custom:swipe-card, to be able to style the navigating elements in that swipe card.
in that case I use eg:
- type: custom:mod-card
card_mod:
style:
swipe-card:
$: |
/* colors the whole fraction element: '1/3' */
/*.swiper-pagination-fraction {
color: white;
}*/
/* colors the '1' in: '1/3' */
.swiper-pagination-current {
color: var(--swiper-navigation-color);
}
/* colors the '3' in: '1/3' */
.swiper-pagination-total {
color: gold;
}
.: |
ha-card {
font-weight: bold;
font-size: 20px;
color: white; */sets the full line, or only the '/', when the other elements are colored individually
}
and follow with the full swipe section of 4/5 cards.
using 4 rows currently, and this mod-card, on 3 of the 4 rows, individual, and always the same, cards are not displayed (also, not clickable, or anything, they are simply not there). Except for the gap they leave.
I have manipulated all single aspects of those cards, including the images they use, the template, and all of the variables. it does not change anything.
the only thing I accidentally noticed is that upon using a fake additional styles: section on those cards, I can make them show up:
- type: custom:button-card
entity: switch.espresso_keuken
template: plattegrond
variables:
path: /ui-sub-views/keuken
picture: keuken_detail_klein.jpg
tooltip: Keuken
#fake style so mod-card does not take out this card......
styles:
card:
- border-top: >
[[[ return (states['binary_sensor.laundry_sensor_motion'].state == 'on')
? 'none' : 'none'; ]]]
I’ve even tried to make that useful and use:
- border-top: >
[[[ return (states['binary_sensor.espresso_keuken'].state == 'on')
? '0.5rem solid red' : 'none'; ]]]
in this card, because that binary exists and indicates some particular value to the system, but that wont work. Somehow it just requires these styles to be I that form and content.
Its driving me mad because I have no clue why this is happening, nor where I should drop this as an issue.
hence the title…
even tried to visualize it like this:
V | X | V | V
V | V | V | X | X
V | V | V | V
X | V | V | V
but for now that does not help me… other than show the unbalance of the 5th card in the 2nd row?
well, of course I tried and deleted that 5th card. NO change however, still the identical cards are being left out
sorry for this long opening post.
since the top config using the mod-card seems to be as short and concise a config I can provide, Ill pop this in the card-mod repo as issue and hope its the correct spot