Hi All,
I’m building my first custom dashboard (a family calendar) and having problems with the CSS. Some styles are rendering correctly, other styles are rendering but incorrectly (wrong colour, or wrong placement, etc), and other styles are not rendering at all.
Background:
-
I’m using the Hass Calendar Addon to pull calendar data from multiple calendars hassio-addons/hass-addon-calendar at master · kdw2060/hassio-addons · GitHub
-
I have card_mod installed and working
-
I’m using a custom: button-card as the base
-
The calendar also uses ttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css for some css settings - I have included this as a resource in HA - which seems to be working fine.
-
I’m trying to achieve is on the left - what I’ve currently got is on the right:
Ignoring some of the issues with colouring - the example I gave was obviously a light version - and I’m shooting for a dark-mode version. You can see that there are issues with alignment (boxes should extend all the way to the bottom, text on the left should be spaced evenly, boxes should be lined up with the text correctly on the left, text in the box should be left aligned).
Here is a min example of how the dashboard is being constructed. For brevity I’ve cut out a heap of styles and JS that is outputting the final HTML but hopefully it gives you the basic idea of how this is working. I’ve taken the output as raw HTML and styles and validated it as correct outside an HA environment and it all works perfectly.
views:
- title: Home
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: planner
show_icon: false
show_name: false
custom_fields:
header: |
[[[
let calendarPage = Number(states['input_number.calendarpage'].state);
let date_master = new Date();
let date_master_page = new Date(date_master.setDate(date_master.getDate() + calendarPage));
let month = date_master_page.toLocaleString('en-au', { month: 'long' });
let year = date_master_page.getFullYear();
let day = date_master_page.toLocaleDateString('en-au', { day: '2-digit' });
let dayName = date_master_page.toLocaleDateString('en-au', { weekday: 'long' });
let header = `<div class="headerContainer">${dayName} ${day} ${month} ${year}</div>`
return header;
]]]
calendar: |
[[[
let calendarArray = ["person1", "person2", "person3"];
let calendar = `<div class="calendar">
<div class="timeline">`;
/* Pulling from a sensor for each calendar and returning valid HTML */
return calendar;
]]]
styles:
card:
- box-shadow: none
- color: rgba(0, 0, 0, 0.85)
- padding: 0px
grid:
- grid-template-areas: '"header" "calendar"'
- grid-template-columns: 100%
- grid-template-rows: auto 1fr
card_mod:
style: |
:root {
--numDays: 3;
--numHours: 23;
--timeHeight: 60px;
--calBgColor: #fff1f8;
--eventBorderColor: #f2d3d8;
--eventColor1: #ffd6d1;
--eventColor2: #fafaa3;
--eventColor3: #e2f8ff;
--eventColor4: #d1ffe6;
}
body {
font-family: system-ui, sans-serif;
}
.corp-fi {
background: var(--eventColor1);
}
.ent-law {
background: var(--eventColor2);
}
.writing {
background: var(--eventColor3);
}
.securities {
background: var(--eventColor4);
}
.date {
display: flex;
gap: 1em;
}
.date-num {
font-size: 3rem;
font-weight: 600;
display: inline;
}
.date-day {
display: inline;
font-size: 3rem;
font-weight: 100;
}
/* Place on Timeline */
.start-0 {
grid-row-start: 1;
}
.start-1 {
grid-row-start: 2;
}
.start-2 {
grid-row-start: 3;
}
.start-3 {
grid-row-start: 4;
}
My questions are:
-
What else can I try to get the styles rendering correctly?
-
Are there any specific limitations on CSS? I’m using CSS variables, flexbox, and grid to align everything. Are or should all of these be supported?
-
What is the best way to debug the css in the browser?
For the adventurous - full code for this dashboard is here: