Improve compatibility of Bases Cards with CSS Snippets

[TomasWeiss]

Use case or problem

I’m trying to use CSS snippets to customize the look of Cards in Bases to:

1. Hide the property labels.
2. Customize the positions of properties beyond order in a list.
3. Adding custom looks to property values like lists.
4. Show longer text without the overflow being hidden.
5. Color cards or their elements based on values of properties in them.

Since Cards and their contents are layed out using absolute positioning, it is not possible to use regular CSS layouts like flex, grid and auto sizing to change up the layout. And even if the elements are rearanged using other methods, the height of cards is not modifiable which can lead to blank space or overflow.

Here’s a comparison of the default layout and what I’ve been able to get with CSS (note the extra blank space at the bottom).
backlog-cards.css (3.0 KB)

Proposed solution

The easiest way to implement this would probably be to have the contents of cards layed out using regular CSS mechanisms instead of using absolute positions. I however assume there is a good reason it was implemented this way. If this cannot change, I’m not sure how the process could be made easier than what I’ve done in the CSS snippet provided.

For card height, a multiplier could be added to each property which would inform the layout what fraction of the property’s height should be counted towards the total height of the card.

Styling cards based on values of their properties could be done by adding an option that would attach an HTML property to the root of each card with the key and value of the property, something like data-property-[name]="[value]" which would make it targetable in CSS. Putting the property on the root element would allow customizing the look of the whole card or any of its elements based on the value of any property, increasing flexibility.

Current workaround

Properties can be moved around using transform: translate() or by overriding top, left etc. with !important. The variable --bases-cards-line-height is useful for offseting vertically.

I have however not figured out a way to decrease the height of cards so that cards below them would adjust their position, as their set absolutely.

[dina84]

Hello,

CSS layouts like flex or grid won’t work—the elements don’t flow; they’re locked to specific coordinates.Card height is fixed, so even if you reposition elements or show longer text, you can get clipping or blank space.
Property labels and values can be targeted via CSS, but some tricks are needed for dynamic styling based on values.

[peeragetalkers]

Related:

Bases: Word wrap in cards

Use case or problem Similar to the Bases: Word wrap in tables request, there is also sometimes a need to word wrap property values in Card view. For example in a quotation database, the quotation gets cut off: [image] Or in a movie database (peeragetalkers’s example mentioned near the end of the other request thread), the movie title might be cut off. Proposed solution Allow to set the height of a property in card view similarly to table view. Or alternatively allow word wrap to the end of …

[EzraMarks]

Seconding this feature request — the fixed height and absolute positioning are perfect and I love the efficiency. All that’s missing for this kind of elegant CSS styling is a way to manually specify the card height. I’m assuming the limitation here is that Obsidian needs to have the card height accessible from JavaScript, not just as a CSS style, but someone from the team please correct me if I’m wrong.

It seems like a clean solution for the Obsidian team would be to expose the card height as a CSS custom property (e.g. --card-height).
That way, users can override it via CSS:

:root {
–card-height: 280px;
}

Then Obsidian’s JavaScript could read that variable via getComputedStyle() and size the card accordingly.

I realize that this does not account for different Cards views using different heights — that would require being able to target a specific .base note and specific view with CSS classes, in order to know when to override the --card-height property. This may already be a feature that I’m not aware of (file name and other metadata being exposed as CSS class names).

[EzraMarks]

After posting my last reply, I’ve had a blast this past week experimenting with some out-there tricks for Bases Cards CSS. I wrote up a full guide which I hope is of use to someone: GitHub - EzraMarks/obsidian-bases-css-guide

@TomasWeiss I cited you as one of the motivating use-cases; let me know if you have any questions!