For everyone who uses FormulaOne API
I have created a card to display the data!
18 Likes
2 Likes
i cant get the cards display next to each other like you show here. they all get in one column in the middle. What did you have for cards/dahs config @BebeMischa ?
attempt with horizontal stack
without stack, it’s always out of displpay and scrolling needed:
That attempt with horizontal stack was almost good, Sander, you just need to change the dashboard view from tiles to panel 
Hi, I created the same layout but for some reason I have a blanc space between the 3 rows.
Can you share how you get the cards close to each other?
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:formulaone-card
card_type: next_race
sensor: sensor.formula_one_sensor_races
title: Next Race
date_locale: nl
image_clickable: false
- type: custom:formulaone-card
card_type: last_result
sensor: sensor.formula_one_sensor_last_result
title: Last Result
- type: vertical-stack
cards:
- type: custom:formulaone-card
card_type: driver_standings
sensor: sensor.formula_one_sensor_drivers
title: Driver Standings
- type: custom:formulaone-card
card_type: constructor_standings
sensor: sensor.formula_one_sensor_constructors
title: Constructor Standings
- type: vertical-stack
cards:
- type: custom:formulaone-card
card_type: schedule
sensor: sensor.formula_one_sensor_races
title: Schedule
date_locale: nl
3 Likes
Thanks!
My mistake was I used grid instead of vertical-stack 
1 Like
could have thought of that myself 
better
still think the cards dont adhere to lovelace rules somehow. when i added a normal entity card, the stuf got split in 2 columns, without that cards it remained one.
and thanks fellow amsterdammer 
1 Like
But why do you want the card sticking together? That wont be a pretty sight xD
When i add the 4 cards to an empty wide dashboard, I would expect them to order themselves in 3 or 4 columns. They dont, the only present themselves as ‘vertically locked’, which is not the default responsive behavior. I would expect that on a phone screen only, not on a desktop with lots of space sideways to put them next to each other for a bit at least.
see, there is room on both sides, but the responsiveness is not using it, just like it is a narrow screen, all vertical ordered… this is indeed not pretty
2 Likes
Yeah that is the type of dashboard you choose. Has nothing to do with the card. I wish I could influence that. It will help a lot of people but unfortunately I can’t
No, Marco, Sander is right. The cards do not behave same, as all other cards, when the dashboard view is in tiles mode. They all automatically stack vertically, normally they have to go next each other.
I had this issue also, that is, why after some fight against it I decided to go panel mode and horizontal stack. Right, because in standard mode there was no way to get them in more columns.
2 Likes
I used this :
Well I did nothing special with the card. So I don’t know how I can fix your issue. Its just a card with simple HTML. Any thing that happens with the placing/position of the card, thats what HA/the theme does. I have the same stacking vertical issue with all other cards that I use. For example Im using masonry default on my main dashboard with 2 vertical stacks.
But the card is open source, so if you can spot the problem I would be very thankful.
1 Like
i’m totally no web UI expert, so wont judge , just an observation i do. It is completely unexplainable for me, maybe i try a colleague tomorrow (both front-ender and HA hobbyist)
before i forget… i love the data and the view, so please dont stop developing these additions !
1 Like
I won’t don’t you worry haha. I hope your colleague will find it. I’m also not a frontender, but a .NET developer. I’m learning with every card I make.
1 Like
Hi @marcokreeft87 ,
Thanks for the cards, looks great. Only the schedule card doesn’t work well for me. It is not properly aligned. I managed to do it with CSS Style, but then it doesn’t look like it on Mobile. The first image is without editing with CSS Style, the second with.
Perhaps you know what it is?
Thanks in advance,
- badges:
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: vertical-stack
cards:
- color: rgb(238, 238, 238)
color_type: card
name: Next Race
styles:
card:
- height: 25px
type: 'custom:button-card'
- type: custom:formulaone-card
card_type: next_race
sensor: sensor.formula_one_sensor_races
title: Next Race
date_locale: nl
image_clickable: false
- type: vertical-stack
cards:
- color: rgb(238, 238, 238)
color_type: card
name: Driver Standings
styles:
card:
- height: 25px
type: 'custom:button-card'
- type: custom:formulaone-card
card_type: driver_standings
sensor: sensor.formula_one_sensor_drivers
title: Driver Standings
- type: vertical-stack
cards:
- color: rgb(238, 238, 238)
color_type: card
name: Constructor Standings
styles:
card:
- height: 25px
type: 'custom:button-card'
- type: custom:formulaone-card
card_type: constructor_standings
sensor: sensor.formula_one_sensor_constructors
title: Constructor Standings
- type: vertical-stack
cards:
- color: rgb(238, 238, 238)
color_type: card
name: Schedule
styles:
card:
- height: 25px
type: 'custom:button-card'
- type: custom:formulaone-card
card_type: schedule
sensor: sensor.formula_one_sensor_races
title: Schedule
date_locale: nl
style: |
th, td {
overflow: hidden;
max-width: 70px;
width: 100%;
text-align: left;
}
title: Formula One
Hey, @marcokreeft87 ,
something weird is happening here. USA is not finished, but Mexico is already there. So we have no sight on the current race.
Can we do something about that?
Think that’s the API cause, saw it too this morning. Data API from development state
Known issue seems
1 Like
Yeah we fixed it
2 Likes