`Modifier.fillMaxWidth()` doesn't work on `Row` with horizontal scroll enabled. I need it to fill th...

# compose

[Pablo]

Modifier.fillMaxWidth() doesn't work on Row with horizontal scroll enabled. I need it to fill the entire width of the screen, but it is ignoring fillMaxWidth(). On lazyrow this issue was solved using fillParentMaxWidth() on lazyrow items... but that modifier is not available on Row.

Column(
    modifier = Modifier.padding(paddingValues).verticalScroll(rememberScrollState()).fillMaxWidth().background(Color.Yellow)
) {
    Row(
        modifier = Modifier.horizontalScroll(rememberScrollState()).fillMaxWidth().background(Color.Green)
    ) {
        AsyncImage(
            model = imageRoute,
            contentDescription = "",
            contentScale = ContentScale.FillWidth,
            modifier = modifier.fillMaxWidth().background(Color.Red)
        )
    }
}

The image is filling only around 75% of the width of the screen... can't understand why

[Stylianos Gakis]

Yeah, you can't fill the max width when the max width is Int.MAX_VALUE aka infinite.
Do you perhaps want a Pager here? Or if not, can you just use a lazy row?

[Pablo]

I need it to be a Column, by the way, I tryed removing the infinite max size adding

.heightIn(max = Short.MAX_VALUE.toInt().dp)

on the column and

.widthIn(max = Short.MAX_VALUE.toInt().dp)

on the row, but it gives then this exception: java.lang.IllegalArgumentException: Can't represent a width of 86013 and height of 86013 in Constraints

[Stylianos Gakis]

If you need it to be in a column, why is there a horizontally scrollable row?

[Pablo]

Because it must be a container that will have one image on it, and that image can be more higher than the screen and more wider than the screen, so I'm adding it inside a column and inside a row, both with scrolls

[Pablo]

the image must be scrollable if it is bigger than screen, and also, on top of the image, I'll add some more content, like clickable areas and routes painted

[Pablo]

above the image I mean

[Stylianos Gakis]

I am not sure I can picture exactly what you want to achieve. If you have a video that'd be helpful.

[Pablo]

Imagine a map

[Pablo]

with clickable areas

[Pablo]

and routes

[Pablo]

that map is a image

[Pablo]

that image can be 200% of the width of the screen, so you can scroll it horizontally

[Pablo]

that map can be also more higher than the screen, so you can scroll it vertically

[Pablo]

that is

[Pablo]

the areas and the routes part are still future things, for the moment, I need to paint a image that can have more width and height than the screen

[Pablo]

for that, I suposse the correct thing is to add it inside a row, and inside a column, both with scroll

[Pablo]

well, I finally solved it this way:

val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
val screenHeight = configuration.screenHeightDp.dp

Column(
    modifier = Modifier.padding(paddingValues)
        .verticalScroll(rememberScrollState())
        .fillMaxWidth()
        .heightIn(max = screenHeight*2)
        .background(Color.Yellow)
) {
    Row(
        modifier = Modifier.horizontalScroll(rememberScrollState())
            .widthIn(max = screenWidth*2)
            .background(Color.Green)
    ) {

Seems that Short.MAX_VALUE.toInt().dp was too much for a Column and a Row... lazycolumn and lazyrow instead are capable of measure that

[Pablo]

well, something is not working, now the image can't be set of a lower width of the screen if their parents haves max width and height higher than the screen

[Pablo]

if max screenwidth of the row is 2xscreenwidth, then

modifier.fillMaxWidth(0.5f)

on the image sets the image to 100% of the screen width

[Pablo]

😕