+1.
Cast no longer appears to work with layout-card or a modified lovelace format. Just casts a white screen. Any idea why?
If I first turn on casting with Lovelace configured to use the default Masonry view, (which obviously works) then change to the Layout-card format while itās already casting, it works and displays my 4 column setup. However, casting will not begin if the layout is set to layout-card to begin with.
Iāve been looking for 3 evenings on the custom:layout-card. I have installed this resource via HACS and have struggled through the manual several times but I keep getting stuck on the grid component that just doesnāt do what I expect it to do.
When I use the code in Dwain Scheerenās tutorials, I have a discrepancy between my result and the example in the manual:
type: custom:layout-card
layout_type: vertical
column_width: 100%
cards:
- type: markdown
content: '# Grid'
- type: custom:layout-card
layout: grid
gridrows: 180px 200px auto
gridcols: 180px auto 180px
cards:
- type: glance
entities:
- sun.sun
gridrow: 1 / 2
gridcol: 1 / 2
style: 'ha-card { height: 100%; }'
- type: entities
entities: &ref_0
- light.wc
- light.vestiaire
- light.keuken_d
gridrow: 1 / 3
gridcol: 2 / 4
style: 'ha-card { height: 100%; }'
- type: markdown
content: test
gridrow: 2 / 4
gridcol: 1 / 2
style: 'ha-card { height: 100%; }'
- type: entities
entities: *ref_0
gridrow: 3 / 4
gridcol: 2 / 3
This is the resut:
This is the expected result:
Could somebody give me a tip or guide me in the right direction, please?
Thanks in advance and best regards.
Hi,
When I use the grid layout, there is always 4px right and lift margins.
Is there anyway to control those margins?
#root {
display: grid;
margin-left: 4px;
margin-right: 4px;
justify-content: stretch;
}
Yes, but you will need to install card-mod for that, wrapping the layout card in a mod-card and applying the styles to the mod-card.
Hey,
I actually tried, with no success.
Probably I am not setting the correct CSS path.
I have finally managed, this way:
- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
#root {
margin: 0 !important;
}
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 0px 4px
mediaquery:
"(max-width: 450px)":
grid-template-columns: 1fr 1fr
cards:
I was just about to provide you with my code examples (was out getting food this morning). Congratulations on figuring it out !!!
Do you think same will be possible when using custom layout to define the type of view?
Maybe inside theme fileā¦
I honestly donāt know. Perhaps someone on the card-mod theme thread can help you out.
Also succeeded.
Here is the code in theme file, for who even might need.
card-mod-view-yaml: |
grid-layout$: |
#root {
margin-left: 0 !important;
margin-right: 0 !important;
}
Hi everyone,
I am trying to make mediaquery work properly on iOS.
I have the following code:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto repeat(8, 43px) 43px 43px
grid-template-areas: |
"base eight seven six five four three two one alarm profile"
mediaquery:
"(max-device-width: 650px)":
grid-template-columns: auto repeat(3, 43px)
grid-template-areas: |
"base message alarm profile"
and in my cards I have something like this:
view_layout:
show:
mediaquery: "(max-width: 650px)"
This should show me 4 columns on a small screen and 11 columns on a large screen. This seems to work perfectly fine on my browsers, android phones and large iphones (though it might be that it is an iOS thing).
I have an iPhone 11 pro max that shows this perfectly fine (iOS 14 if Iām correct, they are not mine so canāt really tell atm, nor can I update them). I also have an iPhone X with iOS 13.5 and it shows all the items regardless of mediaquery rules. Is there anyone that knows if support was added in later iOS versions or if Iām simply missing something?
Thanks!
Sure with 650? afaik max-device-width is more than 650 on iphone x. Perhaps you should add more on this (portrait, landscape, ā¦).
I know, but I have literally tried everything with this (so add portrait, adding pixel ratio, changing width to 2000px etc etc.) It all works fine on all devices but some iPhones and iPads.
But someone was able to help, it seems this depends on iOS version.
I got 2x iPhone X now, one with iOS 13.5 and one with iOS 15.4 and the latter works perfectly fine. So probably it is a feature that was added to iOS later on.
Edit: todays layout-card update did make it slightly better, but still not hiding elements.
in grid-layout, how can I remove the space between the cards?
from the linked CCS guide:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}
I would appreciate some help with the following problem. I want to have on a Samsung Tab A7 (according to the specifications is 2000 x 1200 pixels) my dashboard in full screen. I have tried many things but with the current settings I just canāt get it done. The screen is filled full width but at the bottom I always keep a bit of screen left (about 20%). That remains black.How do I adjust my yaml so that the whole screen is filled and it may even be scalable and it also looks the same on a laptop (1920 x 1080) in full screen.
I use Fully Kiosk Browser (pro) on my tablet in Kiosk mode (landscape).
I have greatly simplified the yaml below. In reality both the sidebar and the main screen are filled with data. On the sidebar buttons to navigate and on the main screen the state of the property etc. Note that the text under the time is also not quite aligned properly here, whereas it is in the original.
square: false
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 20% 80%
grid-template-rows: auto
grid-template-areas: |
"sidebar main"
cards:
- type: picture-elements
image: /local/plan/sidebar.png
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: sidebar
elements:
- type: state-label
entity: sensor.time
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.8)
font-size: 5.41vw
font-weight: 3100
left: 1.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 8%
tap_action:
action: none
- type: state-label
entity: sensor.date_long
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.7)
font-size: 1.3vw
font-weight: 600
left: 20.3%
letter-spacing: '-0.05vw'
text-align: left justified
top: 16%
width: 30%
tap_action:
action: none
- type: picture-elements
image: /local/plan/main.png
tap_action:
action: none
hold_action:
action: none
view_layout:
grid-area: main
elements:
- type: image
entity: sun.sun
tap_action: none
hold_action: none
state_image:
above_horizon: /local/plan/transparant.png
below_horizon: /local/plan/testhouse.png
style:
mix-blend-mode: lighten
opacity: ${ states['sensor.sunlight_opacity'].state }
left: 50%
top: 45%
width: 100%
is there a way to set the gap card width?
Use āgrid-column-gap: 1%ā or āgrid-column-gap: 10pxā
I didnāt find a way to remove the gap completely yet.
Did you try 0px instead of 1% and 10px. I wonder, why 0px should not work, if 10px is working. I just tried it locally and grid-gap: 0px is working.
For me it doesnāt work. 0px and 1px makes no difference. But perhaps this has something to do with the problem Iām facing and my lack of knowledge of CCS etc. As stated yesterday on this forum.
