Collection table widget note-details-pane overlaps properties ribbon

[lzinga]

Describe feature

It appears when trying to add a widget to a collection of type table the html will be rendered on top of the ribbon.

I have been playing with some CSS in the developer tools and even adding extra margin above or below seems to push in other places.

with margin for top and bottom at 100px for testing.

Looking at the raw html, it also appears above the ribbon container for all the other configuration options. My instincts would have assumed it would be at the top but below the built in/core options available.

Additional Information

For this example, I want to have a table that I can enter a podcast name and it goes and uses the Taddy API to collect the info and then create a note for the table with the information, this would allow easy collection of the various podcasts I list to in my own notes.

[dosubot[bot]]

This overlap happens because the collection table widget and the properties ribbon are rendered as siblings in the UI, and the table widget's CSS (.table-view { position: relative; height: 100%; }) can cause it to fill its parent and visually cover the ribbon if the stacking or spacing isn't managed carefully. The ribbon itself uses .ribbon-container { position: relative; z-index: 998; }, but the table widget doesn't explicitly respect this stacking context, so overlap can occur, especially with large tables or certain layout modes. This is a known issue in Trilium and CKEditor, and recent layout changes haven't fully resolved it yet see discussion.

Recommended approaches:

• Instead of adding custom widgets to the note-detail-pane, consider placing them in the center-pane or right-pane to avoid conflicts with the ribbon see maintainer advice.
• If you must use CSS, try adjusting the z-index or adding margin/padding to the table widget, but be aware this can have side effects elsewhere in the layout. For example, you could experiment with:

  .table-view {
    margin-top: 40px; /* or enough to clear the ribbon */
    z-index: 1;
  }

  However, this may push content in unwanted ways due to the flexbox layout.
• Direct DOM manipulation (moving elements with JavaScript) is possible but fragile in Trilium's React-based UI, as React may revert changes on re-render. If you go this route, use a polling pattern to wait for elements to appear before moving them see example.

There is also an experimental layout mode (experimental-feature-new-layout) that changes the stacking order of ribbon elements, which might help in some cases see ribbon CSS.

If the overlap is blocking your workflow, temporary workarounds include splitting large tables into smaller ones or reducing the number of visible rows see workaround.

Let me know if you want more specific CSS or widget placement examples for your use case!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[lzinga]

@dosu thanks it also looks like I accidentally made this a feature, is there a way to change it to a bug instead?

The discussion you linked doesn't seem to be the same issue and isn't necessarily an issue with CKEditor. Also the CSS you mentioned does not change anything. I played around more with the CSS and found if I use display:table; on the widgets root element it does a little better but still doesn't look the best.

[dosubot[bot]]

You can't directly change a GitHub issue from feature to bug yourself—maintainers handle reclassification if needed. If you want it tracked as a bug, you can clarify in a comment and a maintainer can update the label or move it.

About the overlap: the issue comes from how Trilium renders the ribbon and note-detail-pane widgets as siblings, with the ribbon using a relatively high z-index but no enforced stacking order for custom widgets. The table widget (or any widget with display: block or height: 100%) can easily overlap the ribbon unless you constrain its layout. Using display: table helps a bit, but for more robust results, try explicitly adding a top margin to your widget root (e.g., margin-top: 40px;) or experiment with z-index and position: relative on your widget’s container. If that still causes layout issues elsewhere, consider moving your widget to the center-pane or right-pane, which avoids ribbon conflicts entirely.

There's also an experimental layout mode (experimental-feature-new-layout) that changes the stacking order and may resolve this overlap—worth trying if you haven't already. The previous CKEditor reference wasn't relevant here; this is a Trilium layout quirk, not an editor bug.
See code and CSS details

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[eliandoran]

@lzinga , can you provide the widget to be able to reproduce the problem?

[lzinga]

@lzinga , can you provide the widget to be able to reproduce the problem?

whoops, I knew I forgot something...

const TPL = `
<div class="search-bar" style="padding: 10px; border-bottom: 1px solid var(--main-border-color); background: var(--accented-background-color);">
    <div style="display: flex; gap: 10px; align-items: center;">
        <input 
            type="text" 
            class="title-input form-control" 
            placeholder="Enter title to search..."
            style="flex: 1;"
        />
        <button class="search-btn btn btn-primary" type="button">
            <span class="bx bx-search"></span> Search
        </button>
        <span class="search-status" style="margin-left: 10px;"></span>
    </div>
</div>`;

class TestWidget extends api.NoteContextAwareWidget {
    constructor() {
        super();
    }

    get parentWidget() {
        return 'note-detail-pane';
    }
    get position() {
        return 10;
    }

    isEnabled() {
        if (!this.note) {
            return false;
        }
        
        const viewType = this.note.getLabelValue('viewType');
        const hasLabel = this.note.hasLabel('testWidget');
        
        return viewType === 'table' && hasLabel;
    }

    doRender() {
        this.$widget = $(TPL);
    }
}

module.exports = new TestWidget();

[eliandoran]

Widgets in Trilium are sized by default by the available space in its container (contain: size). To avoid this and make it use the space it needs for its content, you need to alter the constructor:

constructor() {
   super();
+  this.contentSized();
}

[lzinga]

Thanks! I looked through the code itself for the frontend script and didn't see this method and in general not as familiar with the contain css styling.

Just as note it may be a small thing and may be nitpicky, but it looks like the styling still seems off to some degree. The main ribbon bar icons don't seem to have the correct padding/margin and are closer to the top. Could not be considered an issue for some people I guess. It just looks odd to me personally.

Again, not really a big deal.

[eliandoran]

In the upcoming version, it seems to render just fine. Anyway, you can probably target the ribbon container from your widget with something like .search-bar + .ribbon-container and adjust its padding or height.

In the new layout, there won't be an issue: