Are there hard limits to the length of CSS files to be imported into dashboards?
I have a 30-tile dashboard, and after about 2100 bytes of CSS, any additional modifications are ignored. It doesn't matter if I insert the CSS directly into the layout, or if I @import it from a local file.
@relifram I would suggest trying to break up your CSS into separate files. I cannot guarantee it will work, but it is the best I can offer 
Now that I think about it for 5 more minutes, I may have a stake in the outcome of this issue... 
Didn't realize this post is fixed, so this is duplicated in the topic about the reply issue...
I have several dashboard css files that are over 50k, with my largest being 64K. I have not had any issues of it clipping the file.
My guess is something in your css is stopping it from reading the file at some point. Should be easy to find as it should be right where the css stops getting loaded.
1 Like
I'd also side with this theory at the moment. Might be worth posting your CSS file @relifram
Yeah, seeing the CSS would help. I remember running into this problem a few months ago, where only about half my file was loading. It think it was when I was playing around with animations, and it was clear that it stopped loading after the line I was fiddling with.
I commented it out and then it loaded the whole file, so I knew that piece was the issue. So this confirms you can break the file loading with just a bad line in the file.
Mac quotes can also play havoc... so the file would ultimately answer these kind of questions.
This is the content of the CSS file I'm loading. Dashboard starts ignoring it after the first block after #tile-12. It doesn't matter which tile I modify after #tile-12, that's the last one it reads.
I'll try breaking it up into multiple files tonight to see if that helps.
@import url("https://sburke781.github.io/ecowitt/html/ecowitt.css");
#tile-22 {
background-color: rgba(128,128,128,0.0);
.tile-title {visibility: hidden;}
.tile-edit {display: none;}
.tile-primary {position:absolute; top: 5%}
}
#tile-23 {
background-color: rgba(128,128,128,0.0) !important;
.tile-title {visibility: hidden;}
.tile-edit {display: none;}
.tile-primary {position: absolute; top: 5%;}
}
#tile-24 {
background-color: rgba(128,128,128,0.0) !important;
.tile-title {visibility: hidden;}
.tile-edit {display: none;}
.tile-primary {position: absolute; top: 5%;}
}
#tile-2[style*="background-color: rgba(250,242,0,0.87)"] {
background-color: rgba(0,0,255,.67) !important;
}
#tile-2[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 200, 0, 0.67) !important;
}
#tile-3[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 200, 0, 0.67) !important;
}
#tile-4[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-5[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-6[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-7[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-8[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-9[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-10[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-11[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-12[style*="background-color: rgba(250, 242, 0, 0.87)"] {
background-color: rgba(0, 0, 200, 0.67) !important;
}
#tile-26 {
.tile-title {visibility: hidden; !important;}
.tile-title:after {content: 'Today+24'; visibility: visible; display: block;)
}
#tile-25 {
.tile-title {visibility: hidden; !important;}
.tile-title:after {content: 'Cancel Pause'; visibility: visible; display: block;)
}
#tile-27 {
.tile-title {visibility: hidden; !important;}
.tile-title:after {content: '- 24'; visibility: visible; display: block;)
}
#tile-28 {
.tile-title {visibility: hidden; !important;}
.tile-title:after {content: '+ 24'; visibility: visible; display: block;)
}
#tile-30 {
background-color: rgba(0,0,0,0.0);
.tile-title {visibility: hidden; !important;}
.tile-title:after {content: 'Elapsed'; visibility: visible;}
}
Probably time to go to bed....
But before I do. I don't seriously think there's any issue with the EcoWitt file. The more likely issue is some kind of special character.
These are malformed. You have a paren after "display: block;)" instead of a curly brace (four times).
1 Like
You have a few code issues as mentioned above.
Run your code through this:
2 Likes
Doh! ya, that's it... Must be time to increase the strength on my reading glasses again.
2 Likes
