I’m struggling with a responsive layout issue using card_mod. Currently, my cards use @media queries, but these fail when the sidebar is expanded because the screen width stays the same while the available dashboard space shrinks.
The Goal: I want the card to hide its ha-tile-info based on the ha-card width (or similar). So if screen is 1000px and sidebar is open, it should be 1000px-256px=744px. Doesn’t have to be precise though
If the card is narrow (because of a phone OR because the sidebar is open), hide info.
If the card is wide (because the sidebar is closed), show info.
The Problem: Standard @media (max-width: 750px) doesn’t care if the sidebar is open. I’ve tried using container-type: inline-size on ha-card, but since the card-mod CSS is injected inside the element it’s trying to measure, the query often fails to trigger correctly.
card_mod:
tile_card_mod: &tile_card_mod
.: |
ha-card {
height: 30px !important;
/* I want to replace @media with something that
checks ha-card width specifically */
}
@media (max-width: 750px) {
ha-tile-info { display: none !important; }
}
Question: is there a way to target the expanded attribute of home-assistant-main from within the card’s Shadow DOM to act as a toggle? If not, is there a better way to get the actual width of the ha-card?
No complete answer, but I am focussing on --mdc-drawer-width being different if expanded or not. But alas, how to turn that into CSS rule. The experiemntal if() is not widely supported otherwise you would likely have a solution.
Do you often keep your sidebar expanded ?
I ask because i also got tired of the “Default” behavior, sure it’s nice to see the Icon-Stack , and Slightly easier to tap/change Dashboard.
But in Your Profile-Settings you can choose to “Always hide the sidebar” so you have it like it looks like in Your Mobile, (Toggle Sidebar)
This way on Laptop etc with Larger View, the Sidebar will “Overflow” the dashboard(also on your phone!), which stays the same, and siderbar vanish again at first click on dashboard, or if you choose another dashboard
PS: There is another way, if you want to “use it as is”
I don’t know which View-Type you generally uses, but card-mod includes 4 View-Types
Masonry/Horizontal/ Vertical/Grid --Layout-card ( Use only grid if you know howto)
You find them clicking edit Dashboard, then Pencil to your Left.
First 2 View-Type, you can change Layout, and scroll down, where you can choose i.e amount of column etc, also set width of columns ie" width: 300 max_cols: 3"
These columns expand to the viewport, and reduce to the Width 300(min width), when open sidebar, and shrink the cards within
I named 300, because you mentioned i.e 1000px viewport/screen,
width 400, will reduce to 2 columns, and rearrange your cards, when sidebar open, i.e cards in 3rd colum below in the first 2 columns
Thank you for your reply! It’s only for mobile devices with smaller screen, for example when my iPhone is in horizantal view the sidebar is a problem. In all other cases it works fine. For iPhone in vertical view, the sidebar becomes floating panel, which I really hope something also work the same way in horizantal view.
As i mentioned, in Your Profile left-bottom , then scroll down to " Always hide the sidebar " Turn it on
This will work everywhere , but the “price” is, you have to “tap” menu/siderbar, in top, to open, And You never see the sider-bar icons in any Devices
Thanks! I think this will also hide the sidebar for desktop as the setting is linked to user profile, right? On desktop I actually prefer to keep the sidebar expanded. Only on mobile iphone I’d like to show sidebar as floating
Im not sure i know what you mean ?, Phone-View, is Phone-view, on my device(Android)
It will always “overflow” even in horizontal , showing 2 columns , so i doubt it’s view-port depended.
The only place you can have use of “Always hide Sidebar” is on Desktop
Thats the reason i suggested this, because it’s ugly in desktop, because they for some wierd reason, not have “overflow”
And Yes, It the MOST Weird&Ugly pointless lack of usability/user-experince in HA, A dropdown/out should never move the whole View, it should overflow
And no it’s Not a user-setting, it’s a Session-Settings
So have it on your Phone, if you really means you for some reason have Problems there ( With Default Phone View ), and live with the weird behavior on Desktop, if you like/want to have your Menu Open , for some Reason
Ok maybe it works differently on iPhone, when I view the dashboard in horizontal mode, the sidebar can be hidden/expanded the same way as in a desktop browser. For vertical mode yes it’s not visible and when click the icon it shows a floating panel for sidebar.
Yep, Apple have always tried to go their “Own” way, even when it comes to Browsers, and their use/support of “standard” behavior for functions in a website HTML/CSS/javascript behavior
EDIT: “Modal” which HA partly uses to build the Frontend, has a widely and comprehensive support, for i.e Menu’s , so maybe it’s the underlying construction and generating of the Frontend which come in “Conflicts”, or maybe it’s on purpose they try to “avoid” people to be able to “Change” some aspects do to their “Product Philosophy”
I.E The Header of the SideBar, " Home Assistant " kind of “Dictates” the min width of the Menu/Sidebar “Module” ( It’s not in a programmable sense, because you can change the Width, thou The Header-Name will be cut ) , If this was not the “case” And People were allowed to Change the Names i.e “Home Assistant”, “Developer Tools” “Notifications” etc.
The Menu/Sidebar could be “responsive” Adapt to the width of Longest name in the column. Personally I find it ugly that the extended Sidebar fills about twice as much as Longest Name( Lots of Air/Free space ). That it has to have a Min value i can understand, also that this have to be set in PX ( because of various browsers/brands way of treating “things”, and also bc of Usability )
Maybe we eventually also will get this and other “free world” options easily, But as Devs Buils upon a “Live” website, initially constructed years ago, it’s a PITA to evolve/change/ add and enhance, without breaking something , and a total refactoring is Not an Option
But why they still haven’t made the sidebar default “Floating” is actually a mystery to me
Thanks - I have configured to always hide the sidebar on mobile phone and it works as expected. The desktop is not affected, so I think it’s a good solution.
One thing I noticed though, is the dashboard in horizental mode is no longer centered, seems it aligns to the left - not a big deal but strange to me.
