Rendering cssclasses progress bar in live preview mode?

Custom CSS & Theme Design
1

First post here! I am having trouble getting a css class snippet to render in live preview mode. Specifically, I am trying to make progress bars half as wide (from 220 down to 110px) so they look better in Dataview tables with the use of ‘cssclasses: narrow-progress’.

I am using Minimal theme and its css code contains this:

.markdown-preview-view progress,.markdown-rendered progress,.markdown-source-view.is-live-preview progress{
    width:220px
    }

When I try adding ‘.narrow-progress’ in front of that snippet, the width renders correctly in both reading and live preview modes, but in ALL my files instead of just the ones with the cssclasses: narrow-progress property. Here’s the code:

.narrow-progress .markdown-preview-view progress,.markdown-rendered progress,.markdown-source-view.is-live-preview progress{
    width:110px
}

When I change it to this:

.narrow-progress progress {
    width:110px
}

it then responds to the use of the cssclass…but only in Reading View. It does not work in Live Preview.

I am not experienced with CSS, so apologies if this is a stupid question, but does anyone know how I can get the narrow-progress class to both respond to the cssclasses property AND render in both reading and live preview modes? Thanks!

2

Can you share an example of the Markdown and/or Dataview query as written in the note (in a code block) that’s creating the progress bar?

That will help folks jump right in to have a look without much setup.

3

Using this as an example in a note:

90 -> <progress max="100" value="90" ></progress>

100 -> <progress max="100" value="100" ></progress>

110 -> <progress max="100" value="110" ></progress>

and this CSS:

.markdown-preview-view.narrow-progress progress,
.markdown-rendered.narrow-progress progress,
.markdown-source-view.narrow-progress progress {
    width: 110px;
}

or

.markdown-preview-view.narrow-progress progress,
.markdown-source-view.narrow-progress progress {
    width: 110px;
}

should achieve what you are looking for, I think.

left note: no cssclass | right note: has a cssclass of narrow-progress

Obsidian_nTV92BjMO4

4

Thanks a lot for the input. Here’s the Dataview query that is producing the progress bars:

```dataview
TABLE WITHOUT ID 
	file.link AS Module, 
	description AS Description, 
	deadline as Deadline,
	status AS Status, 
	progress AS Progress
FROM #project AND #CFWI/Cohorts AND -"System"
SORT file.name ASC


The progress bars are in the 'Progress' column and are referencing this dataviewjs query from the other files:

$= const value = Math.round(((dv.page("filename").file.tasks.where(t => t.completed).length) / (dv.page("filename").file.tasks).length || 0) * 100); "<progress value='" + value + "' max='100'></progress>" + " " + value + "%"