# Embeds without scrollbar (Resolved)

**URL:** <https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206>\
**Category:** Devs: Theme Design & Custom CSS\
**Created:** [January 30, 2021, 6:10pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206 "2021-01-30T18:10:09Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![I-d-as](https://forum.obsidian.md/user_avatar/forum.obsidian.md/i-d-as/32/59965_2.png) [@I-d-as](https://forum.obsidian.md/u/I-d-as)\
**Post date:** [January 30, 2021, 6:10pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/1 "2021-01-30T18:10:09Z")

</div>

### 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.

---

<div class="post-metadata">

**Author:** ![atiz](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@atiz](https://forum.obsidian.md/u/atiz)\
**Post date:** [January 30, 2021, 7:25pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/2 "2021-01-30T19:25:51Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![I-d-as](https://forum.obsidian.md/user_avatar/forum.obsidian.md/i-d-as/32/59965_2.png) [@I-d-as](https://forum.obsidian.md/u/I-d-as)\
**Post date:** [February 24, 2021, 5:44am UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/3 "2021-02-24T05:44:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![I-d-as](https://forum.obsidian.md/user_avatar/forum.obsidian.md/i-d-as/32/59965_2.png) [@I-d-as](https://forum.obsidian.md/u/I-d-as)\
**Post date:** [March 7, 2021, 8:13pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/4 "2021-03-07T20:13:41Z")

</div>

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

> [@Flush Inline embeds](https://forum.obsidian.md/t/flush-inline-embeds/7747/9):
>
> @1stprinciples: I don’t know if this is of interest: /\* eliminate scrollbars in transclusions \*/ .markdown-preview-view .markdown-embed-content, .markdown-preview-view .markdown-embed-content\>.markdown-preview-view { max-height: unset; }

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!

---

<div class="post-metadata">

**Author:** ![atiz](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@atiz](https://forum.obsidian.md/u/atiz)\
**Post date:** [March 11, 2021, 2:28am UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/5 "2021-03-11T02:28:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![I-d-as](https://forum.obsidian.md/user_avatar/forum.obsidian.md/i-d-as/32/59965_2.png) [@I-d-as](https://forum.obsidian.md/u/I-d-as)\
**Post date:** [March 11, 2021, 5:27am UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/6 "2021-03-11T05:27:47Z")

</div>

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:

> [@atiz](#):
>
> ```auto
> .markdown-preview-view .markdown-embed-content>.markdown-preview-view {
> max-height: unset;
> }
> 
> ```

Klaas posted this:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![atiz](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/b38774/32.png) [@atiz](https://forum.obsidian.md/u/atiz)\
**Post date:** [March 11, 2021, 11:12pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/7 "2021-03-11T23:12:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![akjames](https://forum.obsidian.md/user_avatar/forum.obsidian.md/akjames/32/15956_2.png) [@akjames](https://forum.obsidian.md/u/akjames)\
**Post date:** [June 10, 2021, 8:47pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/8 "2021-06-10T20:47:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![akjames](https://forum.obsidian.md/user_avatar/forum.obsidian.md/akjames/32/15956_2.png) [@akjames](https://forum.obsidian.md/u/akjames)\
**Post date:** [June 10, 2021, 8:52pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/9 "2021-06-10T20:52:09Z")

</div>

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;  
}

---

<div class="post-metadata">

**Author:** ![Moonbase59](https://forum.obsidian.md/user_avatar/forum.obsidian.md/moonbase59/32/13648_2.png) [@Moonbase59](https://forum.obsidian.md/u/Moonbase59)\
**Post date:** [June 10, 2021, 8:58pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/10 "2021-06-10T20:58:09Z")

</div>

You could also simply use my [clean-embeds.css](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/394) or [clean-embeds-all.css](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/411) CSS snippets. 😉

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

---

<div class="post-metadata">

**Author:** ![hidingdissident](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/h/8491ac/32.png) [@hidingdissident](https://forum.obsidian.md/u/hidingdissident)\
**Post date:** [June 2, 2022, 11:56am UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/11 "2022-06-02T11:56:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chrsle](https://forum.obsidian.md/user_avatar/forum.obsidian.md/chrsle/32/33701_2.png) [@chrsle](https://forum.obsidian.md/u/chrsle)\
**Post date:** [June 2, 2022, 3:19pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/12 "2022-06-02T15:19:41Z")

</div>

It still works, in another post someone wrote:

> [@How do I embed notes without the title](https://forum.obsidian.md/t/how-do-i-embed-notes-without-the-title/11427/9):
>
> I had to remove ".markdown-preview-view " from the entire document to make it work. Just letting you know if you’ll decide to update it.

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?

---

<div class="post-metadata">

**Author:** ![Craig](https://forum.obsidian.md/user_avatar/forum.obsidian.md/craig/32/8831_2.png) [@Craig](https://forum.obsidian.md/u/Craig)\
**Post date:** [June 2, 2022, 3:31pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/13 "2022-06-02T15:31:02Z")

</div>

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

```css
/* 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;
}

```

---

<div class="post-metadata">

**Author:** ![chrsle](https://forum.obsidian.md/user_avatar/forum.obsidian.md/chrsle/32/33701_2.png) [@chrsle](https://forum.obsidian.md/u/chrsle)\
**Post date:** [June 3, 2022, 8:01am UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/14 "2022-06-03T08:01:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Craig](https://forum.obsidian.md/user_avatar/forum.obsidian.md/craig/32/8831_2.png) [@Craig](https://forum.obsidian.md/u/Craig)\
**Post date:** [June 3, 2022, 2:02pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/15 "2022-06-03T14:02:30Z")

</div>

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

```css
/* 
 * 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;
}

```

---

<div class="post-metadata">

**Author:** ![chrsle](https://forum.obsidian.md/user_avatar/forum.obsidian.md/chrsle/32/33701_2.png) [@chrsle](https://forum.obsidian.md/u/chrsle)\
**Post date:** [June 7, 2022, 3:33pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/16 "2022-06-07T15:33:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Craig](https://forum.obsidian.md/user_avatar/forum.obsidian.md/craig/32/8831_2.png) [@Craig](https://forum.obsidian.md/u/Craig)\
**Post date:** [June 7, 2022, 3:42pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/17 "2022-06-07T15:42:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [October 16, 2022, 6:29pm UTC](https://forum.obsidian.md/t/embeds-without-scrollbar-resolved/12206/18 "2022-10-16T18:29:13Z")

</div>

Closed on October 16, 2022, 6:29pm UTC


