Channels
#kobweb
Title
# kobweb
g
Garrett Coughlin
10/19/2023, 10:42 PMHi @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 PMI 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)
}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))
}g
Garrett Coughlin
10/19/2023, 11:30 PMawesome! 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 PMThis 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 PMwow this is a very simple approach
Copy code
Divider(Modifier.width(1.px).height(100.px))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 PMFor 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 PMyeah 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 PMYeah, 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 PMhahaha
so true!
d
David Herman
10/19/2023, 11:45 PMYou'll want to become friends with your browser devtools if not already
g
Garrett Coughlin
10/19/2023, 11:45 PMyes I need to start using that more for debugging
d
David Herman
10/19/2023, 11:45 PMYou 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 AMNewer version of Jetpack Compose for Android has the
DividerHorizontalDividerVerticalDividerd
David Herman
10/20/2023, 4:44 PMAh, 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🎉 1
💯 1
g
Garrett Coughlin
10/20/2023, 5:52 PMhey thank you David!!
kodee greetings 1