What is the problem?
In the Files section of the sidebar, I'd like to add whitespace (a gap) between each file.
Here's what it looks like, and then also what I'm trying to do
I have Themeify installed, and I created a custom style to do just this. The style has
selector: .entry.machinecode
CSS rule: margin-bottom
value: 40px
... and I've found that if I go into settings, add/or change this style, and then click Save, the custom CSS rule is applied and looks as desired. However, if the sidebar is updated (eg, when a new file is added) or when the page is refreshed, the custom CSS rule is not applied.
At this point, you might be saying that this is a Themefy issue, and go post this in the Plugins category. However, I don't think this is a Themeify issue because:
- the other custom CSS styles I've created (via Themeify) aren't having any issues, just this one in the dashboard
- when inspecting the DOM that's generated, I see markup that uses $root, like this:
attr: { id: $root.getEntryId($data) }, template: { name: $root.templateFor($data), data: $data }, css: $data.type
I haven't looked at the git repro, but I'm guessing OctoPrint is using Knockout(?) If so, I suspect it (or whatever framework OctoPrint is using) is somehow ignoring this CSS rule I've created.
My ask here is:
- could one of the devs look into this? Is this a dashboard issue, or is this a Themeify issuse? And if not a Themeify issue, can a fix be issued?
- could extra bottom margin be added to the dashboard file items? This way, I wouldn't need to define a custom rule in Themeify.
What did you already try to solve it?
I performed a number of A-B tests to troubleshoot this. I've narrowed down the issue, and I think I've described the exact (and minimum) steps needed to repro the issue.
Complete Logs
no logs
Other Information
Mac, using the latest version of Chrome