New update broke dataview table formatting: now it is too wide/tall and scrolls off screen horizontally

[velociraptor]

What I’m trying to do

Before the recent update, my habits tracker looked like this:

After the update it now looks like this:

The entire table has become wider and taller for each entry, forcing a scrollbar to appear (indicated by the red arrow). Due to my limited knowledge of HTML/CSS, I have been unsuccessful in my attempts to change it so that all entries appear on the page without the scrollbar, as it had before the update.

For reference,

• I used this to format my table/habits tracker.
• I am using the Readable Line Length option and would like to keep that on for the rest of my notes.
• I am using custom CSS (notably the “Readable Line Length” section that forces wide view) that this tutorial recommended here. The CSS snippet in question:

/* 
Optional css that can be added to make dashboards use wide margin 
if "Readable line length" is enabled in Editor
 
Updated 2023-11-02

*/

.dashboard.markdown-preview-view.is-readable-line-width .markdown-preview-section,
.dashboard.markdown-preview-view.is-readable-line-width .markdown-preview-section > div {   
   width: 100% !important;
   max-width: 100% !important;
 }

I’ve searched and found many table formatting methods using CSS, but I have not been able to find anything to change the height/width of my specific case. Especially because it worked before the update and I have zero idea why there is now a horizontal scrollbar. I am not very familiar with CSS, dataview or tables, and previously just followed the tutorials I found.

Any pointers for what to search for or any help with fixing this would be much appreciated.

[velociraptor]

Bumping this, as I’ve still not found a solution.

[GwenAEther]

I understand why the change was implemented, but there needs to be a way to revert. I was just going about my business, using a table with css checkboxes to track my habits, and after this new update it’s completely broken. Checking random boxes will uncheck other random boxes. And when I try to highlight the table to see what it looks like, I can’t see shit, it just goes entry by entry. Even aside from the update breaking my habit tracker, I just don’t like the new system. It’s a step removed from the simple markdown that I feel wasn’t needed. They could have just made it a core plugin that can be disabled, because I liked being able to highlight the whole table, and see the whole table. Now when I highlight it just turns purple. Or goes entry by entry like I said before. Neither of which are helpful. It’s also probably deleted some hidden text I had stored outside of my tables for later reference. I legit would downgrade my install if it wasn’t such a hassle. Please make it possible to disable this ASAP because I legit cannot use my habit tracker in this state.
Thank you, much love,
Gwen Æther <3

[velociraptor]

That’s unfortunate that it affected you as well. Agreed on the option to revert it, that would help solve my issue too.

[velociraptor]

Is there a way using CSS to force the table to stay within the page width?

[holroy]

I just might have gone a little overboard with variant, but add #_/habits somewhere in your table, like in Date #_/habits", and add the following CSS to a snippet and enable it:

[href="#_/habits"] {
    display: none;
}

table:has([href="#_/habits"]) {
    & tr > th,
    & tr > td {
       max-width: 40px;
        min-width: 40px;
        width: 40px;
        padding: 0px;
        margin: 0px;
    }

    & tr > td {
        padding-left: 1px;
        padding-right: 1px;
        text-align: center;
    }
    & tr > td:first-child {
        min-width: 125px;
        max-width: inherit;
    }
}

When combined with a slightly larger setup for habits, I got this output from it:

I think it’s not requiring just as much screen estate as your current solution…

[velociraptor]

Incredible, that looks like just what I’m hoping for!

Could you explain a bit more on what you mean by adding #_/habits into the table? I am admittedly not versed in CSS at all, and don’t quite understand where I should put it. I tried putting it at the top where it says “table without ID” but it threw an error.

Here’s what my table code looks like:

Thanks a ton for the help!

[holroy]

As long as it is shown within the table, it doesn’t matter where you put it, so you could try doing:

file.link + " #_/habits" as Date

or

choice(Habits.....) + " #_/habits" as Icon

It really shouldn’t matter where you put it, as it’s going to become hidden anyways!

Update: I seemed to have used a different casing in this, versus the actual CSS snippet above. Sorry about that

[velociraptor]

That worked! You are a lifesaver, seriously thanks so much for the help!

[joshk]

I tried this but the #/Habits shows up as a tag within my table
I tried placing it in other positions in the Dataview query as well with no luck.
Any ideas what I’m doing wrong?

[holroy]

And you did follow the instructions on creating the CSS snippets, and enabling it from Settings > Appearance > CSS snippets ?

Bonus tip: How to add a custom CSS snippet

• Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
• In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
• Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
• Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
• If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.

[joshk]

@holroy

+ " #_/Habits"

Sorry my mistake was not using the correct case! Works perfectly when using “#/habits" instead of "#/Habits”

[holroy]

Sorry @joshk , I seemed to have used the wrong casing in my example after the actual posting with the CSS, so no wonder you also used the wrong casing. Corrected my original post, so hopefully it’s not as confusing anymore.