Embeds without scrollbar (Resolved)

Help
1

Use case or problem

When you want embeds without scrollbars.

Proposed solution

To have an option for embedding without scrollbars.

Current workaround (optional)

@atiz has a snippet below that unfortunately does not work for me. I’d love to hear if anyone has a way.

Thanks.

5 Likes
2

+1 for this, although this CSS snippet did the trick for me:

.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
  max-height: unset;
}
2 Likes
3

Just saw a feature request that gave me a thought of a possible solution for this. Unfortunately the request had multiple requests and the title was not descriptive of the request that is relevant here.

The idea is that embedded content could have a collapse function allowing the entirety of the embedded content to be expanded and shown (without scrollbars). I responded to the request and will return here and link to it if they change their title and/or separate their requests into independent topics.

Thanks.

1 Like
4

I am so happy to report that for some reason this solution is now working for me:

I think it was possibly an issue created by a conflict with other css I had been trying.

@atiz: I think you may have been trying to get this work as well. Perhaps the css you posted was slightly different than what @Klaas had posted here all along.

Phew! What a relief!

Thank you all!

1 Like
5

I think “my” solution was also from Klaas, and is basically the same. It’s been working fine for me. Glad you found a way!

6

Thanks. What I should have said is that I think you may have accidentally copied the snippet wrong here in this thread.

You posted this:

Klaas posted this:

.markdown-preview-view .markdown-embed-content, 
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
  max-height: unset;
}

I am showing this so that no one else gets confused. To be clear, the bottom one works.

Thanks again.

4 Likes
7

You’re right. I apparently didn’t copy the first line at all. Sorry.

1 Like
8

This does work, but it does not render the full embedded file. It only eliminates the scroll bar. After the maximum length of an embed, it just stops. Is there a solution to this? Thanks

9

Found the solution. This works:

/* Remove scroll bar from transclusions */
.markdown-preview-view .markdown-embed-content {
max-height: unset;
}
.markdown-preview-view .markdown-embed-content > .markdown-preview-view {
max-height: unset;
}

10

You could also simply use my clean-embeds.css or clean-embeds-all.css CSS snippets. :wink:

There’s also a video that shows how it works.

4 Likes
11

great work, but apparently this does no longer work with the new live preview.
do you have an idea how to resolve this?

12

It still works, in another post someone wrote:

I followed this, and it works.
The only thing I’m missing is how to remove the padding from a transcluded block. Does anyone have an idea?

1 Like
13

Here are my typical embed settings. Maybe they will help?

/* Remove scroll bar from transclusions */
.markdown-preview-view .markdown-embed-content {
    max-height: unset;
}
.markdown-preview-view .markdown-embed-content > .markdown-preview-view {
    max-height: unset;
    background-color: var(--theme-transclude-background);
}

/* Make transclusions pretty */
.markdown-preview-view .markdown-embed, .markdown-preview-view .file-embed {
    padding: 5px;
    margin: 0px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    box-shadow: 2px 2px 2px var(--background-modifier-border);
    background-color: var(--theme-transclude-background);
}

/* Remove scroll bar from search results */
.markdown-preview-view .internal-query.is-embed .search-results-children {
    max-height: unset;
}
1 Like
14

Thanks so much Craig. It didn’t change how block or header embeds look for me, I still got the thick borders and wide padding around.

15

Oh, I see, I didn’t realize you wanted to remove the embed decorations altogether. In that case you might find this CSS helpful:

/* 
 * Hide decoration and borders from embeds 
 */
.markdown-preview-view .markdown-embed {
    background-color: var(--theme-page-background);
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.markdown-preview-view .markdown-embed-content > .markdown-preview-view {
    padding: 0;
    margin: 0;
}

.markdown-preview-view .markdown-embed .dataview.list-view-ul {
    margin: 0;
}
1 Like
16

Thanks so much for taking the time and answering, Craig.
Unfortunately this CSS also didn’t work. Nothing changes. I think I’ll use Klaas’ css for now and live with the borders around embeds.

17

Darn. Sorry it didn’t work for you. I hope you’re able to find a solution that works.

1 Like