Hi <@U02AB5P2XU6> Do you have any insight or resources on creating a vertical divider? the built in ...

# kobweb

[Garrett Coughlin]

Hi @David Herman
Do you have any insight or resources on creating a vertical divider? the built in Divider() composable is perfect when needing a horizontal divider, I am trying to create one that has the same behavior, except vertical.

I’ve tried applying the .rotate(90.deg) attribute on the modifier, which does make it vertical, however the alignment gets messed up.

Not sure if you’ve come across this before, but any insight would be greatly appreciated. Thank you!

[David Herman]

I should probably consider adding a vertical divider variant

[David Herman]

So

[David Herman]

You can declare an HR element and set its borderLeft parameter

[David Herman]

You can also do this in your codebase (note that I'm likely to add it to Silk so this will cause an exception in the future due to duplicate style names, but it can work for you in a pinch)

[David Herman]

val VerticalDividerVariant by DividerStyle.addVariantBase {
    Modifier
        .borderTop {
            width(0.px)
        }
        .maxWidth(0.percent)
        .borderLeft(1.px, LineStyle.Solid, DividerVars.Color.value())
        .fillMaxHeight(90.percent)
}

Then: Divider(variant = VerticalDividerVariant)

[David Herman]

Row(Modifier.gap(20.px), verticalAlignment = Alignment.CenterVertically) {
    Box(Modifier.size(200.px).background(Colors.Red))
    Divider(variant = VerticalDividerVariant)
    Box(Modifier.size(100.px).background(Colors.Green))
    Divider(variant = VerticalDividerVariant)
    Box(Modifier.size(150.px).background(Colors.Blue))
}

See attached screenshot

[Garrett Coughlin]

awesome! Thank you so much for the info! I’ll play around with this and see if I can get this to work

[David Herman]

This surprises me, but you can also do this:

Divider(Modifier.width(1.px).height(100.px))

[David Herman]

Quite a few options. Good luck! (And let me know if you have any more questions)

[Garrett Coughlin]

wow this is a very simple approach

Divider(Modifier.width(1.px).height(100.px))

I tried something similar with the Box scope and was able to get a vertical line, but the issue is getting the height to be dynamic.

[Garrett Coughlin]

I will test out some of these approaches, and If I come up witha dynamic solution I’ll let you know!

[Garrett Coughlin]

as always really appreciate your help!

[David Herman]

For a dynamic solution, usually use something like height(90.percent)

[David Herman]

Sizing in HTML / CSS can sometimes be really hard and I still fight with things myself, but usually you want some form of setting %'s all the way down from top to bottom, until you get to the leaf elements

[David Herman]

That's really rough advice and even giving it, I'm worried it's wrong 🙂

[Garrett Coughlin]

yeah I tried using the height(90.percent) but it always ends up just a small dot on the screen. I think it has to do with making sure the columns and rows are set up so the Vertical Divider has context for the height of the parent container. What im building looks simple, but gosh it’s hard to implement

[Garrett Coughlin]

the advice makes perfect sense!

[David Herman]

Yeah, it's shockingly hard sometimes.

[David Herman]

Sometimes it works beautifully and elegantly, and sometimes you stomp around for a day trying to get your page to stop scrolling horizontally for no good reason that you can tell

[Garrett Coughlin]

hahaha

[Garrett Coughlin]

so true!

[David Herman]

You'll want to become friends with your browser devtools if not already

[Garrett Coughlin]

yes I need to start using that more for debugging

[David Herman]

You can set / tweak CSS styles in real time there until things start to work again

[David Herman]

I checked in some code so that a vertical divider variant will be available in 0.14.3. Thanks for bringing this up!

[Christiano]

Newer version of Jetpack Compose for Android has the Divider deprecated in favor of the more specific one's like HorizontalDivider and VerticalDivider.

Not sure if you want to keep it close to the Android Jetpack Compose things. Or maybe that was already part of your plan 😅

[David Herman]

Ah, I did not know. Thanks @Christiano!

[David Herman]

Kobweb is a mix of things forced by the world of the DOM and thinks that are trying to look like Jetpack Compose.

[David Herman]

I believe Divider is the latter. So if the official APIs are moving in that direction, I am happy to do that as well.

[David Herman]

https://github.com/varabyte/kobweb/commit/42e9a2a8540475842f4c8a476d2e405d4fbd98cb

Christiano, this is why I love open source / communities like this. This would probably not have gotten onto my radar for a long time otherwise.

Garrett, in 0.14.3, you'll be able to use VerticalDivider. If you set your Kobweb version to 0.14.3-SNAPSHOT about...... 20 minutes after this comment is posted, you'll be able to use it today 🙂

[Garrett Coughlin]

hey thank you David!!