https://kotlinlang.org logo
#kobweb
Title
# kobweb
g

Garrett Coughlin

10/19/2023, 10:42 PM
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!
d

David Herman

10/19/2023, 11:18 PM
I should probably consider adding a vertical divider variant
So
You can declare an HR element and set its borderLeft parameter
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)
Copy code
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)
Copy code
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
g

Garrett Coughlin

10/19/2023, 11:30 PM
awesome! Thank you so much for the info! I’ll play around with this and see if I can get this to work
💪 1
d

David Herman

10/19/2023, 11:31 PM
This surprises me, but you can also do this:
Copy code
Divider(Modifier.width(1.px).height(100.px))
Quite a few options. Good luck! (And let me know if you have any more questions)
g

Garrett Coughlin

10/19/2023, 11:37 PM
wow this is a very simple approach
Copy code
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.
I will test out some of these approaches, and If I come up witha dynamic solution I’ll let you know!
as always really appreciate your help!
d

David Herman

10/19/2023, 11:39 PM
For a dynamic solution, usually use something like
height(90.percent)
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
That's really rough advice and even giving it, I'm worried it's wrong 🙂
g

Garrett Coughlin

10/19/2023, 11:44 PM
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
the advice makes perfect sense!
d

David Herman

10/19/2023, 11:44 PM
Yeah, it's shockingly hard sometimes.
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
g

Garrett Coughlin

10/19/2023, 11:45 PM
hahaha
so true!
d

David Herman

10/19/2023, 11:45 PM
You'll want to become friends with your browser devtools if not already
g

Garrett Coughlin

10/19/2023, 11:45 PM
yes I need to start using that more for debugging
d

David Herman

10/19/2023, 11:45 PM
You can set / tweak CSS styles in real time there until things start to work again
I checked in some code so that a vertical divider variant will be available in 0.14.3. Thanks for bringing this up!
c

Christiano

10/20/2023, 10:43 AM
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 😅
d

David Herman

10/20/2023, 4:44 PM
Ah, I did not know. Thanks @Christiano!
Kobweb is a mix of things forced by the world of the DOM and thinks that are trying to look like Jetpack Compose.
I believe Divider is the latter. So if the official APIs are moving in that direction, I am happy to do that as well.
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 🙂
🎉 1
💯 1
g

Garrett Coughlin

10/20/2023, 5:52 PM
hey thank you David!!
kodee greetings 1