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

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.

1 Like

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

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

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

1 Like

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

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… :stuck_out_tongue:

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!

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! :smiley:

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

1 Like