#1
  • Obsidian 0.12.9

Does anyone know of a css hack to disable word wrapping for tables that are indented within bulleted or numbered lists? (in Edit mode)

E.g. try pasting this markdown into the Obsidian editor:

1. Foo
2. Bar

    | Alice                                  | Bob                                 | Charlie                                    |
    |:-------------------------------------- |:----------------------------------- |:------------------------------------------ |
    | Long lines are not always nice to have | But sometimes you need to have them | And When You Do, it's great to be able to  |
    | So, hopefully                          | There's a way...                    | To Make This more readable                 | 

3. Baz

| Alice                                  | Bob                                 | Charlie                                    |
|:-------------------------------------- |:----------------------------------- |:------------------------------------------ |
| Long lines are not always nice to have | But sometimes you need to have them | And When You Do, it's great to be able to  |
| So, hopefully                          | There's a way...                    | To Make This more readable                 |

For me at least, the indented table is rendered with word wrap, so it looks like this:

image

…vs. the non-indented one, which looks nice and neat…

image

Any way to avoid this? (I understand it looks ok in preview mode, but the jumble in edit mode is what’s problematic)

#2

I used Advance Tables plugin and it looked fine with the indent in preview mode. Yes, it looks odd in edit mode. I hope this helps.

  1. Testing

  2. Testing

    | One | Two | There |
    | : — | : — | : ----- |
    | This is a test of the emergency broadcast network | Objects in the mirror may appear closer to you than you think | No shirt, no shoes, no mask, no service |

#3

Right- sorry if this wasn’t clear (I updated the original post). Yes it looks fine in preview. Edit mode is the problem! Hoping there’s a way to fix.

#4

One of the problems is that in preview mode the ‘indented table’ is not identified as a table.
Your second table has the class class=" HyperMD-table-2 HyperMD-table-row HyperMD-table-row-0 CodeMirror-line " (row-1, row-2, …) with white-space: pre. But the ‘indented table’ has the class class=" HyperMD-list-line-nobullet HyperMD-list-line HyperMD-list-line-1 CodeMirror-line " with white-space: pre-wrap.
Any change to this last class can affect others unwanted elements.
But you can try this and see…:

.cm-s-obsidian .HyperMD-list-line.HyperMD-list-line-nobullet {
    white-space: nowrap;
}
#5

Thanks @mnvwvnm - do you know if this is something that Obsidian devs can fix themselves or is it a CodeMirror problem? (btw: that CSS you posted does sort of work! But since the selector is so nonspecific I wonder what other consequences this will have)

edit 2: I quickly realized that using .HyperMD-list-line.HyperMD-list-line-nobullet causes all sorts of problems, basically any indented text e.g. a > BlahBlah....... callout will also have wrap disabled. And it also does something weird with the spacing.

Too bad. I wonder if I should move this to bug reports? @WhiteNoise ?

#6

Sorry, but no. I’m not a ‘coder’, this isn’t my field! I just look to the dev console… :slight_smile:

#7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.