TreeView plug restyling issues

General
1

I would like to ask this community CSS gurus to help me to make the TreeView (actually iframe inside of the SilverBullet main panel, but as I hope that fact is not so important) to float over the SilverBullet’s content on the left side of the screen. Here’s what I tried so far:

```space-style
#sb-main .sb-panel {
  display: block;
  width: 40vw;
  height: 100vh;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: hidden;
}
```

This works but not perfectly, looks good, etc. The issue is that the #sb-top with the mini-editor for page name and the buttons are moved to the right (and not fully, for some reason). I think it may be because of the flex layout but I am not sure. I tried many variants and tricks already, with no success. The variant provided above is the only one that does not destroy the overall layout. But still not perfect, as described.

Could you please give me a hand to fix this? It’s very SB-specific styling issue, otherwise I would had asked in some CSS forum… Thank you for ideas.

2

Inside #sb-top there’s also a .panel that you should style. That is what is ‘pushing’ the title to the right, as it’s part of the flexbox on the top.

image
image936×228 28.5 KB

3

@janssen-io I see, thanks. But how do we style it only if the #sb-main .sb-panel is firing? Are both the #sb-top .panel and #sb-main .sb-panel somehow related according the the flex layout? I must be missing something… :frowning:

4

Yeah, they both appear when the left or right panel opens.

You can use #sb-top div:first-child:is(.panel) to just target the left panel (or last-child for the right panel) if you want to distinguish left and right. If not, then disregard this paragraph. :smiley:

5 
```space-style
#sb-top .panel,
#sb-main .sb-panel {
  display: block;
  width: 30vw;
  height: 100vh;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: hidden;
}
```

This seems to work. Hm, I’ll study :is etc. a little more. It would be nice to apply only if there is really the TreeView inside. Would that be possible? There can be anything in the panels…

6

For that to be possible, SilverBullet or the TreeView plug needs to add a unique id or data-attribute to the iframe. CSS can’t look inside the iframe’s document.

7

Should I create FR for it on GH? @janssen-io

8

I think this would be a pretty harmless, but useful extension.
I can imagine this changes the signature of the syscall editor.showPanel though (maybe with an optional argument). So maybe @zef wants to weigh in here as well.

Then it woul be great if both the main-panel as well as the top-panel gets this attribute/id. Otherwise it becomes hard to target both of them conditionally.

So maybe the iframe shouldn’t get it, but the panel div themselves.

1 Like