What are you trying to accomplish? It’s difficult to guess what you’re trying to do with only short code with a template I have no idea its meant to do either.
Is that you have a swipe card, with in there only one grid card (so nothing to swipe). And in that grid you use the option columns: 2 which means it will put 2 cards next to eachother before it goes down a line. And in that grid card you use 2 horizontal-stacks, which each 2 button-cards. Which would mean:
The grid card will show 2 cards next to echother, in your case 2 horizontal stacks. Left:
Horizontal stack with button-card with Kamer label and a button-card with an empty label.
Right
Another horizontal-stack with two button-cards that have a (what I would guess) light entity.
Which is exactly what you see in the picture. A grid with 2 column option and 2 cards, with each card a horizontal-stack, that has 2 cards. So you will get:
Kamer - empty label - light card - light card.
If you want the cards to be below another card, use vertical-stack, not horizontal. You can also change the grid columns option to 1 which means all cards will be in one column, so vertical.
- type: custom:swipe-card
cards:
- type: vertical-stack
cards:
- YOUR TITLE CARD CODE (FIRST CARD IN SWIPE)
- YOUR EMPTY LABEL CODE (? don't know why you have that) OR LEAVE OUT
- type: grid
columns: 2
square: false
cards:
- YOUR LIGHT CARD
- YOUR LIGHT CARD
- YOUR LIGHT CARD
- YOUR LIGHT CARD
- type: vertical-stack
cards:
- YOUR TITLE CARD CODE (SECOND CARD OF SWIPE)
- YOUR EMPTY LABEL CODE (? don't know why you have that) OR LEAVE OUT
- type: grid
columns: 2
square: false
cards:
- YOUR LIGHT CARD
- YOUR LIGHT CARD
- YOUR LIGHT CARD
- YOUR LIGHT CARD
This will give you a swipe-card with 2 cards you can swipe back and forth. Each swipe card has a title and under there 4 lights (grouped by 2). If you want more lights next to eachother, change the columns option. I think this is what you’re trying to achieve.
SO basically you have a swipe-card that can swipe between two vertical-stacks. And each vertical-stack has a title card at the top, and then under there a grid with light cards.
I’m not sure why you use a title card with empty label. If your goal is to have more distance between your title and the light cards under there, you should just change the card size (height) of your button-card and configure that properly. Adding empty cards will not help your Dashboard later on.
Btw I forgot: if you just want a title and don’t need a specific style, you can also use the built-in title option in grid card. Just add title: Kamer for instance and the grid will display that at the top. This way you can leave out the button-card and even vertical-stack. Just place each grid card directly in the swiper card with title option and you’ll get swipeable grids with titles.
Can I somehow make this work with a single card? I have these mushroom chips that’s vary in lenght and I want them on a single row only. I can make one card per chip also but then they all be on different pages and it’s only one per page.
Hello, I wonder if someone could help me as well with something that I’m struggling. Essentially I’m looking for a simple flip-swipe between a light. and a switch. entity (using minimalist-UI).
The problem is that the button cards that represent those entities have almost the same width and height as the swiper container and even if a set their tap_action: to none , it’s still difficult on touch screens to swipe back and forth. I have to touch in a very specific area of the UI as can be seen in the pictures.
I went through as many parameters as I could “imagine” might help such as: spaceBetween , height , width , edgeSwipeThreshold and touchEventsTarget but either I used them wrong or they are not the ones to be used in the first place.
Hi. Is anyone having the same problem as me in swiper-card?
I consistently get this error when refreshing:
Uncaught (in promise) TypeError: this.createCardElement is not a function
_rebuildCard swipe-card.js:19
_createCardElement swipe-card.js:19
i fire_event.ts:76
u create-element-base.ts:129
promise callback*7778/u/< create-element-base.ts:127
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
_createCardElement swipe-card.js:19
_cardPromises swipe-card.js:19
_createCards swipe-card.js:19
setConfig swipe-card.js:6
a create-element-base.ts:97
u create-element-base.ts:111
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
value hui-view.ts:64
value hui-view.ts:299
value hui-view.ts:78
i fire_event.ts:76
u create-element-base.ts:129
promise callback*7778/u/< create-element-base.ts:127
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
value hui-view.ts:64
_cards hui-view.ts:283
value hui-view.ts:282
value hui-view.ts:216
value hui-view.ts:130
performUpdate reactive-element.ts:1329
scheduleUpdate reactive-element.ts:1263
_$Ej reactive-element.ts:1235
requestUpdate reactive-element.ts:1210
u reactive-element.ts:948
3 swipe-card.js:19:1842
_rebuildCard swipe-card.js:19
_createCardElement swipe-card.js:19
i fire_event.ts:76
u create-element-base.ts:129
(Async: promise callback)
u create-element-base.ts:127
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
_createCardElement swipe-card.js:19
InterpretGeneratorResume self-hosted:1413
AsyncFunctionNext self-hosted:810
(Async: async)
_cardPromises swipe-card.js:19
map self-hosted:221
_createCards swipe-card.js:19
setConfig swipe-card.js:6
a create-element-base.ts:97
u create-element-base.ts:111
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
value hui-view.ts:64
value hui-view.ts:299
value hui-view.ts:78
i fire_event.ts:76
u create-element-base.ts:129
(Async: promise callback)
u create-element-base.ts:127
u create-element-base.ts:215
d create-element-base.ts:172
w create-card-element.ts:99
value hui-view.ts:64
_cards hui-view.ts:283
map self-hosted:221
value hui-view.ts:282
value hui-view.ts:216
value hui-view.ts:130
performUpdate reactive-element.ts:1329
scheduleUpdate reactive-element.ts:1263
_$Ej reactive-element.ts:1235
AsyncFunctionNext self-hosted:810
(Async: async)
requestUpdate reactive-element.ts:1210
u reactive-element.ts:948
The card doesn’t render correctly. Or, more precisely, my card includes 3 todoist cards and a markdown card, and the error shows 3 times and only the markdown card renders correctly.
But it’s strange:
the first time after a HASS restart, I get the errors
when I hit F5 to refresh, I get the errors
BUT if I navigate to a different dashboard, and then navigate to the one that has the swiper-card, I don’t get the error, and the card shows just fine, with all sub-cards in it.
I understand this might be a problem with the sub-cards, but I can’t tell what it is, and I can’t fix it because the exception is getting thrown in the swiper-card object…
And my sub-cards work well when they are laid directly on the dashboard, they only break when inside the swiper-card…
The code in the part that throws the exception is this:
async _rebuildCard(e, t) {
let a = this.createCardElement(t);
try {
a.hass = this.hass
}
catch (e) {
a = document.createElement("ha-alert"), a.alertType = "error", a.innerText = e.message
}
(...)
}
Can anybody help me troubleshoot this, please? Thanks
I’m having the same issue with the swipe card expanding forever horizontally and vertically. I adjusted the column width to percentages but then when I add cards to a column, they overlap and cover up the previous card. How did you set your rows so that cards go below each other vertically? I’ve tried vertical stack cards but the swipe problem still persists.
I have exactly the same issue here.
I’m guessing you both are on firefox ?
I’ve tried to nail down what was wrong with my config, and it turns out, it’s a problem only on firefox, when I open HA on chromium, there isn’t any problem with swiper card
Hi. Thanks for sharing your experience. And yes, I am using Firefox on Windows.
But I also get the problems on the Home Assistant Android app, I don’t know which browser it uses underneath. I don’t see the JS error in the console, because there is no console, but I get the same behaviour where my cards show broken the first time, except if I am coming from a different dashboard into the one that has the card.
So, I don’t know if the problem is something in the browser or not, but it doesn’t seem to be only Firefox…
I think the height of the swiper card is always equal to the highest card that is part of the swiper group of cards. So if you have a very tall 3rd card in the swipe set, also the 1st and 2nd cards will show as very tall cards, and it looks strange because you don’t see why until you swipe.
So vandaag and the 2 cards below are in the swipe. They are equal in height. But the go below is I think 1,5 the size of the whole swipe card. It makes no sense…
I don’t know, then. If you are fluent with HTML and CSS you might gain some clues from using the browser’s inspector tools. Figure out which element is filling up the space, and then trying to edit the configs to change it.
