Adjustable column size for properties

Feature requests
1

Hi,

probably that feature already has been requested, but I couldn’t find it by search, so:

Some of my properties have short names, like “aliases”, some have long names, like “Listenpreis € (brutto)”. The long names are not completely visible (instead you can see “…” as a hint, that the name has been cut), because the size of the properties-column in that frontmatter part is too narrow and the size of that column is also not adjustable.

image

Feature request:
adjustable size of property-column

2

a tooltip when hovering over property names in case the property name is too long and gets cut off will be added in 1.4.9

3

Will the increased/adjustable column size be considered for addition later?

The hover option would likely help a bit, but I can see it being tiresome to work with. Especially when you speak a language that heavily use compound word, and thus have several properties that all start with the same and you need to hover over each to figure out which one is which.

4

You could use a CSS snippet for the time being:

/* adjust properties label width - default is 9em */
body {
    --metadata-label-width: 20em;
}

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

Screenshot 2023-10-09 at 11.29.39
Screenshot 2023-10-09 at 11.29.391944×806 20.8 KB

5

Slight correction, I just realized it said 1.4.9 and we’re at 1.4.14 and it’s implemented :sweat_smile:.

My original point still stands, the tooltip is cumbersome to work with when you speak a compound word heavy language and several of the properties in the same note end up looking identical in the editing view because they start with the same compound words.

6

That worked like a charm :smile:
Tyvm

7

Thanks for the tip. It works fine on desktop, however it doesn’t seem to work on mobile app. I tried to sync, make sure to enable the CSS file, reload, restart, however, the property label name column is still too narrow. Is there a way how to make it work on mobile app as well?

8

I can confirm that the above variable alone isn’t working on mobile at the moment.

Either of these will take care if it:

body.is-mobile  {
    --metadata-label-width: 12em !important;
}

or

body.is-mobile .metadata-property-key {
    min-width: 12em;
}
9

What about using CSS only in some notes (in cssclasses) ?

Note A.md:

---
cssclasses: myclass
---

myclass.css:

/* adjust properties label width - default is 9em */
.myclass body {
	--metadata-label-width: 20em;
}

seems not working. Is it possible achieve that?

10

A bit late to reply, but cssclasses are applied further down/within the body, so you would flip that around:

body .myclass  {
    --metadata-label-width: 20em;
}

this works as well

.myclass  {
    --metadata-label-width: 20em;
}
12

The following CSS snippet will auto-adjust the properties column width:

.metadata-properties
{
display: grid;
grid-template-columns: max-content 1fr;
}

.metadata-property
{
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}

.metadata-property-key
{
width: auto;
}

.metadata-property-key-input
{
field-sizing: content;
width: auto;
}
14

Forgot to mention:

It does override some of Obsidian’s internal Properties layout CSS, so it would be useful to hear whether it also behaves correctly across themes/mobile.

Tested successfully on desktop.

The mechanism is:

  • .metadata-properties becomes a two-column grid.
  • The first column uses max-content, so its width is determined by the widest property key.
  • Each .metadata-property uses subgrid, so all rows share that same key/value column boundary.
  • field-sizing: content makes the property-name <input> contribute the width of its actual text instead of its normal fixed input width.

So unlike:

body {
    --metadata-label-width: 15em;
}

this adjusts automatically from note to note according to the property names present.