# Responsive TreeView

**URL:** <https://community.silverbullet.md/t/responsive-treeview/2188>\
**Category:** Tricks & Techniques\
**Created:** [April 17, 2025, 3:15pm UTC](https://community.silverbullet.md/t/responsive-treeview/2188 "2025-04-17T15:15:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MatthiasBenaets](https://community.silverbullet.md/letter_avatar_proxy/v4/letter/m/ecb155/32.png) [@MatthiasBenaets](https://community.silverbullet.md/u/MatthiasBenaets)\
**Post date:** [April 17, 2025, 3:15pm UTC](https://community.silverbullet.md/t/responsive-treeview/2188/1 "2025-04-17T15:15:11Z")

</div>

TreeView is a great plug for browsing pages in directories I don’t open often.  
The only problem I have with it, is that it’s not very responsive.  
It either works for landscape or portrait, but not both.  
There is a GitHub issue open to have device specific configurations and/or a switch button, but I haven’t seen much development in it.

For me, this page solves (almost) all issues.

* * *

#style

Improved TreeView styling.

- Correctly resizes depending on screen width
- Moves menu to side in landscape mode and to bottom in portrait mode.
- Resizes font depending on viewport for better readability
- Required in [[SETTINGS]]:

```yaml
treeview:
  position: bhs

```

```css
html {
  --treeview-phone-height: 25vh;
  --treeview-tablet-width: 25vw;
  --treeview-tablet-height: 100vh;
  --treeview-desktop-width: 20vw; 
}

.sb-bhs {
  height: var(--treeview-phone-height);
}

.tree__label > span {
  font-size: calc(14px + 0.5vh); 
}

@media (min-width: 960px) {
  #sb-root:has(.sb-bhs) #sb-main,
  #sb-root:has(.sb-bhs) #sb-top {
    margin-left: var(--treeview-tablet-width);
  }

  .sb-bhs {
    position: fixed;
    left: 0;
    height: var(--treeview-tablet-height);
    width: var(--treeview-tablet-width);
    border-right: 1px solid var(--top-border-color);
  }
}

@media (min-width: 1440px) {
  #sb-root:has(.sb-bhs) #sb-main,
  #sb-root:has(.sb-bhs) #sb-top {
    margin-left: var(--treeview-desktop-width);
  }

  .sb-bhs {
    width: var(--treeview-desktop-width);
  }
}

```

* * *

The only part about this code I don’t like is the `.tree__label > span` font size.  
Since TreeView is loaded in as an iframe, media queries don’t really work.  
If anyone knows of a good approach to do this, feel free to share.  
It will give a lot more freedom regarding customisation, yet more control over sizing.