https://kotlinlang.org logo
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
benchmarks
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
confetti
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
lincheck
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by
Title
c

Colton Idle

01/10/2022, 9:36 PM
I'm trying to create a non-lazy carousel. i.e. Scrollable Row with each item being about 90% of the full screen width. I have a small sample showing that I'm failing. Anyone that can spot my issue?
Box(modifier = Modifier.fillMaxWidth().border(1.dp, Color.Red)) {
  Row(
      modifier =
          Modifier.height(IntrinsicSize.Min)
              .width(IntrinsicSize.Max)
              .horizontalScroll(rememberScrollState())) {
    Button(
        onClick = { /*TODO*/},
        modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
      Text(text = "One")
    }
    Button(
        onClick = { /*TODO*/},
        modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
      Text(text = "Two\nTwo\nTwo")
    }
    Button(
        onClick = { /*TODO*/},
        modifier = Modifier.fillMaxHeight().fillMaxWidth(.9f).border(1.dp, Color.Green)) {
      Text(text = "Three")
    }
  }
}
No matter what I do, I can't get each item to take up the full width.
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 9:45 PM
i don’t think this makes sense:
.width(IntrinsicSize.Max)
.horizontalScroll(rememberScrollState())
horizontalScroll
will measure its child with infinite max width, and the parent box is already
fillMaxWidth
, so i’m not sure what you’re trying to achieve with this combination of modifiers.
Also side note: any time you’re wrapping a single composable with a
Box
just to apply modifiers, you can just move the outer modifiers to the start of the inner component’s modifier chain
I’m not sure using
height(IntrinsicSize.Max)
makes sense either when all the children are
fillMaxHeight()
Never mind i just forgot the point of intrinsics 🤦‍♂️🏻
The reason the
fillMaxWidth
isn’t working on the children is because
horizontalScroll
causes its layout node to measure with infinite width, and 90% of infinity is still infinity.
If you use a lazy row, you could use
fillParentMaxWidth
which you can do manually here with a custom layout or
BoxWithConstraints
, but i also don’t see a reason not to just use a lazy row
c

Colton Idle

01/10/2022, 9:52 PM
SO the reason why I can't use a lazy row is because I need all items in the carousel to be the height of the tallest item in the carousel. I do have a guarantee that the carousel wont be more than like 5 items. This is my attempt at refactoring my lazyRow into just a regular row unfortunately.
Unless I can somehow get LazyRow + all items are the height of the tallest item.
WHich would be asweome, because then I could use chris banes' snapper lib.
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 9:54 PM
ah, right that makes sense. That seems fundamentally impossible – can’t know the height of all items without composing them, which is the definitely of “not lazy”
c

Colton Idle

01/10/2022, 9:58 PM
Well glad you could sanity check that thinking. 😄 So now as long as I can get these items 90% of the screen width, and have height of all the same size. then im golden. With your help, my items are now 90%. still working on the height part.
Current status:
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
              .border(1.dp, Color.Red)
              .horizontalScroll(rememberScrollState())) {
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier
                .width(boxWithConstraintsScope.maxWidth.times(.9f))
                .border(1.dp, Color.Green)) { Text(text = "One") }
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier
                .width(boxWithConstraintsScope.maxWidth.times(.9f))
                .border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier
                .width(boxWithConstraintsScope.maxWidth.times(.9f))
                .border(1.dp, Color.Green)) { Text(text = "Three") }
  }
}
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 9:59 PM
any reason not to use
maxWidth * 0.9f
?
c

Colton Idle

01/10/2022, 10:01 PM
I guess not? I just started chaning method calls because I didn't know if it was .dp for whatever reason and i know its easy to use method calls when operating on dps.
Updated to * instead of
times
. Is there a reason not to use times? Is it more overhead because its a method call or something?
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:02 PM
no it compiles to the exact same bytecode
but it’s more idiomatic to just use the
*
operator if you’re multiplying
it’s totally just a style nit 😛
c

Colton Idle

01/10/2022, 10:04 PM
your nit fix will live on forever in my codebase. 😄
So this is almost perfect, but the height of every item is like 2.5x of what it should be for some reason. Anything in here look terribly off at this point?
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
              .border(1.dp, Color.Red)
              .height(IntrinsicSize.Min)
              .horizontalScroll(rememberScrollState())) {
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "One") }
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
    Button(
        onClick = { /*TODO*/},
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Three") }
  }
}
above snippet running on a device.
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:08 PM
I’m not sure, but maybe it has something to do with
Button
not propagating intrinsics correctly? What happens if you replace the buttons with just their text (and move the button modifiers to
Text
)
c

Colton Idle

01/10/2022, 10:08 PM
if I take away the fillMaxHeights, and the height(Intrinsic.Min) then I get this though
Oh. good point about button. Let me try your sugg
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:11 PM
so i was wrong earlier, parent using intrinsic min and child using fill max height absolutely makes sense, because the parent will communicate the sibling’s heights through the max constraint, i believe. And fillMaxHeight shouldn’t affect the intrinsic height a component reports
intrinsics always turn me around until i think through them really hard 😅
c

Colton Idle

01/10/2022, 10:11 PM
Removed the button, and just used a box instead. Not perfect. but much closer to what it should be.
Intrinsics make my head hurt. I was like "No problem. I'll convert this lazy row into a regular row carousel." Now it's been 3 hours.
This is the code that repros the above. Not sure why there is space after the Two Two Two, but getting closer to my desired result
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
                  .height(IntrinsicSize.Min)
              .border(1.dp, Color.Red)
              .horizontalScroll(rememberScrollState())) {
    Box(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "One") }
    Box(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Two\nTwo\nTwo") }
    Box(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Three") }
  }
}
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:15 PM
So
Button
is
Box { Row {} }
internally. I would think both of those would just forward intrinsic height, but maybe not?
c

Colton Idle

01/10/2022, 10:16 PM
ok. officially out of ideas. This is my result:
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
              .height(IntrinsicSize.Min)
              .border(1.dp, Color.Red)
              .horizontalScroll(rememberScrollState())) {
    Text(
        text = "One",
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green))
    Text(
        text = "Two\nTwo\nTwo",
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green))
    Text(
        text = "Three",
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green))
  }
}
I'm going to downgrade compose from 1.1RC and see if I get a diff result
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:17 PM
wow it’s complicated
if you replace the child
Box
components in your second-last code snippet with `Row`s, does it break again?
c

Colton Idle

01/10/2022, 10:21 PM
If I replace the Boxes with Rows I get the same result as the last screenshot I sent.
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:21 PM
which is still wrong, correct?
c

Colton Idle

01/10/2022, 10:22 PM
Yeah. I would expect the red line to match up with the bottom Two
Maybe the issue is with the new line...
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:22 PM
There’s no other child that is that full height?
and how much height space is available?
c

Colton Idle

01/10/2022, 10:23 PM
Nope. End result should be this
One     Two     Three
        Two
        Two
Looks like this though
One     Two     Three
        Two
        Two
I'm somehow convinced its the newline in this example though...
nope. same thing with this code where there are no newlines
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
              .height(IntrinsicSize.Min)
              .border(1.dp, Color.Red)
              .horizontalScroll(rememberScrollState())) {
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "One") }
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) {
      Text(text = "Two")
      Text(text = "Two")
      Text(text = "Two")
    }
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Three") }
  }
}
added more borders to debug. something is def off...
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      modifier =
          Modifier.fillMaxWidth()
              .height(IntrinsicSize.Min)
              .border(1.dp, Color.Red)
              .horizontalScroll(rememberScrollState())) {
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                    .padding(4.dp)
                .border(1.dp, Color.Green)) { Text(text = "One") }
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) {
      Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
      Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
      Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
    }
    Column(
        modifier =
            Modifier.fillMaxHeight()
                .width(boxWithConstraintsScope.maxWidth * (.9f))
                .border(1.dp, Color.Green)) { Text(text = "Three") }
  }
}
Weird that the first item in the row seems to have a proper height, but the second and third items are funky
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 10:43 PM
huh so i got it working, but for some reason i needed a
wrapContentHeight
before the
height(IntrinsicSize.Min)
, or else the row and all the buttons fill the entire height.
Wrong:
Row(
        Modifier
//            .wrapContentHeight()
            .height(IntrinsicSize.Min)
    ) {
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("one")
        }
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("two\ntwo\ntwo")
        }
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("three\nthree")
        }
    }
Right:
Row(
        Modifier
            .wrapContentHeight()
            .height(IntrinsicSize.Min)
    ) {
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("one")
        }
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("two\ntwo\ntwo")
        }
        Button(
            onClick = {},
            Modifier.fillMaxHeight()
        ) {
            Text("three\nthree")
        }
    }
i left out the width stuff but i don’t think that should matter
c

Colton Idle

01/10/2022, 10:54 PM
woah. wrapContentHeight.
hm. so is this a compose bug or just how it works?
z

Zach Klippenstein (he/him) [MOD]

01/10/2022, 11:03 PM
I'm not sure actually
🙃 1
c

Colton Idle

01/10/2022, 11:09 PM
Something weird too that might point to this being a bug is that this code
Row(
    modifier =
        Modifier.wrapContentHeight()
            .height(IntrinsicSize.Min)
            .border(1.dp, Color.Red)
            .horizontalScroll(rememberScrollState())) {
  Column(modifier = Modifier.fillMaxHeight().padding(4.dp).border(1.dp, Color.Green)) {
    Text(text = "One")
  }
  Column(modifier = Modifier.fillMaxHeight().border(1.dp, Color.Green)) {
    Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
    Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
    Text(text = "Two", Modifier.border(1.dp, Color.Cyan))
  }
  Column(modifier = Modifier.fillMaxHeight().border(1.dp, Color.Green)) { Text(text = "Three") }
}
Leads to this. What's weird is that the heights are not the same of Two and Three. They start at the top, so the baseline of the top three text labels aren't in a single line.
Ah crap. I had an extra padding on the first column. LMAO. okay. probably a false alarm there. whooops
Crap. now if I wrap it with a simple boxWithConstraints then it breaks again.
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  Row(
      Modifier.wrapContentHeight()
          .height(IntrinsicSize.Min)
          .horizontalScroll(rememberScrollState())) {
    Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
      Text("one")
    }
    Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
      Text("two\ntwo\ntwo")
    }
    Button(onClick = {}, Modifier.fillMaxHeight().width(boxWithConstraintsScope.maxWidth * .9f)) {
      Text("three\nthree")
    }
  }
}
I added boxWithConstraints, and a width to each item, and a horizontal scroll, and its back to the previous behavior seemingly.
Going to try mashing on this for a little bit more and ill see what happens.
alright. so... cue spongebob 5 hours later cut scene.
😂 1
nothing makes sense anymore. This code... produces this
var blah by remember { mutableStateOf(0.dp) }
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
    val boxWithConstraintsScope = this
    blah = boxWithConstraintsScope.maxWidth
}

Row(
        Modifier.wrapContentHeight()
                .height(IntrinsicSize.Min)
                .horizontalScroll(rememberScrollState()),
) {
    Button(onClick = {}, Modifier.fillMaxHeight()) {
        Text("one")
    }
    Button(onClick = {}, Modifier.fillMaxHeight()) {
        Text("two\ntwo\ntwo")
    }
    Button(onClick = {}, Modifier.fillMaxHeight()) {
        Text("three\nthree")
    }
}
note in the above code, I dont wrap the row with the BoxWithConstraints.
once I change the width of the buttons. the height also changes
var blah by remember { mutableStateOf(0.dp) }
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
    val boxWithConstraintsScope = this
    blah = boxWithConstraintsScope.maxWidth
}

Row(
        Modifier.wrapContentHeight()
                .height(IntrinsicSize.Min)
                .horizontalScroll(rememberScrollState()),
) {
    Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
        Text("one")
    }
    Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
        Text("two\ntwo\ntwo")
    }
    Button(onClick = {}, Modifier.fillMaxHeight().width(blah * .9f)) {
        Text("three\nthree")
    }
}
I quit (for the night). Opened a bug with a crazy simple repro case, as well as some screenshots. Hopefully someone can chime in. https://issuetracker.google.com/issues/213924413 Tomorrow... I will look for a workaround. I gotta ship this asap and the ios team is already done. 😭
m

Mihai Popa

01/11/2022, 4:48 PM
Hi 🙂 what you want is to put the
horizontalScroll
before
height
on
Row
. So just:
Row(Modifier.horizontalScroll(rememberScrollState()).height(IntrinsicSize.Min))
🙏🏻 1
Having a width constraint (the screen width) when calculating the min intrinsic height messes with the calculation in this scenario. Did not look to understand exactly why, but it might be WAI; will look closer at the bug you filed soon hopefully.
Also, looking at your code, I would suggest moving the
Row
inside the
BoxWithConstraints
. This is the intended usage and will not introduce a 1 frame delay between the first measurement and the drawing of the buttons
c

Colton Idle

01/11/2022, 5:50 PM
@Mihai Popa it worked! ALL IS RIGHT WITH THE UNIVERSE. For real tho. Thank you and @Zach Klippenstein (he/him) [MOD] so much. This was driving me crazy. This is what I ended up with:
BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
  val boxWithConstraintsScope = this
  val blah = boxWithConstraintsScope.maxWidth * .9f

  Row(
      Modifier.horizontalScroll(rememberScrollState()).height(IntrinsicSize.Min),
  ) {
    Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) { Text("one") }
    Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) {
      Text("two\ntwo\ntwo")
    }
    Box(Modifier.width(blah).fillMaxHeight().border(1.dp, Color.Green)) { Text("three\nthree") }
  }
}
As a final question. Is there really no other way to get the 90% width besides using BoxWithConstraints. I've heard BWC isn't the best thing to use if its not necessary, so I'm trying to make sure there isn't something else I can do.
z

Zach Klippenstein (he/him) [MOD]

01/11/2022, 5:57 PM
There definitely is, although it's a little more boilerplate for a one-off. You could provide a custom layout Modifier for your children that adjusts the constraints based on the parent size, and get the parent size via
onSizeChanged
or another custom layout around the parent.
c

Colton Idle

01/11/2022, 5:59 PM
Oof. Custom layout. Not today... gotta get this PR in.
^ That's def not the right attitude as I know custom layouts are way easier in compose and not as scary as view-land, but I can make the release train with the advice from Mihai! lol
d

dimsuz

01/31/2022, 2:52 PM
sigh. I thought this thread would save me, but it doesnt. I've done everything like Colton demonstrated in the last snippet and in my case all row items are still cut-off at bottom and don't fill in.
c

Colton Idle

01/31/2022, 4:35 PM
Show code?
d

dimsuz

01/31/2022, 4:44 PM
a bit later, was coding in anger 🙂 It seems my problems stem from the fact that I have long texts which are wrapped and compose continues to calculate intrinsic height as though the texts are not wrapped -> ends up with smaller height. I.e. in your example if you hadn't `\n`'s but instead had a really long text which would result in wrapped 2-3 lines. I'm planning to try to come up with minimal example a bit later. Thanks for the thread!
Done some digging, posted sample into a new thread: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1643674208275499