Div on right of screen with orx-panel

OPENRNDR How to?
1

After much fiddling with an olive-program and a dive stylesheet, I cannot find any way to have a div occupy the right side of the screen, taking up a fixed percentage width.
Sorry if this is a pretty basic question. I have never been very good with html and css, and the panel library seems to assume a familiarity with the terms so that they don’t need explaining. The combinations of position and display changing the effects of everything else is very confusing to me.
Currently, the div sticks to the left side, no matter what I set the left property to.

2

Hi hi :slight_smile:

If you take this program

and replace the side-bar style for this:

            styleSheet(has class_ "side-bar") {
                this.height = 100.percent
                this.width = 20.percent // changed
                this.position = Position.ABSOLUTE // changed
                this.left = (program.width * 80 / 100).px // changed
                this.display = Display.FLEX
                this.flexDirection = FlexDirection.Column
                this.paddingLeft = 10.px
                this.paddingRight = 10.px
                this.background = Color.RGBa(ColorRGBa.GRAY)
            }

you get this

Screenshot from 2021-05-19 10-10-40
Screenshot from 2021-05-19 10-10-40761×585 24.1 KB

Is that what you are looking for? I agree that CSS can be tricky. I don’t know why the left property does not affect the result. update: probably it was the missing position: absolute.

I tried also this.left = 80.percent but it had no effect. In a way that’s consistent with my CSS experience: try different approaches until it works :slight_smile:

3

Thank you so much, that’s exactly what I was trying to do.