Is there a way to limit `fillMaxWidth()` , say up to `500.dp`? What `maxWidth` used to be

# compose

[ursus]

Is there a way to limit fillMaxWidth() , say up to 500.dp?

What maxWidth used to be

[Zach Klippenstein (he/him) [MOD]]

widthIn?

[Alex Styl]

iirc i was having troubles using fillmaxwidth with widthIn. couldnt get them to work together

[Zach Klippenstein (he/him) [MOD]]

how so?

[ursus]

Box(
    modifier = Modifier
        .fillMaxWidth()
        .widthIn(max = 200.dp)
        .aspectRatio(1.94f)
        .clickable { onScratchCardClick(item.promotionId) }
) {

like this? doesn't work

[ursus]

Neither does sizeIn

Box(
    modifier = Modifier
        .fillMaxWidth()
        .sizeIn(maxWidth = 50.dp)
        .height(100.dp)
        .background(Color.Red)
)

still fills all of the width

[Stylianos Gakis]

aspectRatio may be making your composable go outside of its bounds.
If you remove that modifier, does it work as you'd expect it to?

Also try reordering your modifiers, the order in which you put the max constraints and do fillMaxWidth also matter a lot.

[ursus]

no, take a look at last example

[ursus]

hm dammit that worked 😄

[Stylianos Gakis]

So to confirm, what was the final approach which did work for you?

[Zach Klippenstein (he/him) [MOD]]

That behavior matches the doc on `widthIn`:
> Constrain the width of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.
I always find it helpful to think about size modifiers in terms of constraints. That documentation means that widthIn effectively does:

minWidth = requestedMin.coerceAtLeast(incomingMin) 
maxWidth = requestedMax.coerceAtMost(incomingMax)

So that the incoming constraints always win.

fillMaxWidth is effectively:

widthIn(min = incomingMax, max = incomingMax)

So fillMaxWidth().widthIn() will ignore the widthIn params in most cases.

[ursus]

is there something special about lazy list? if I copy paste the composable into a normal column, it works as you guys describe

[Zach Klippenstein (he/him) [MOD]]

There are many special things about lazy lists, but i'm not sure how you are using it

[ursus]

Box(
        modifier = Modifier
            .width(200.dp)
            .height(100.dp)
            .clickable { onScratchCardClick(item.promotionId) }
    ) {

even if I do this, it's still full width for what ever reason

[Zach Klippenstein (he/him) [MOD]]

width() also always obeys incoming constraints (it's just widthIn(min = width, max = width), so it sounds like you've got incoming constraints that are forcing it to be bigger.

[ursus]

yes but why, its a capital M modifier

[Zach Klippenstein (he/him) [MOD]]

"incoming constraints" means coming from the layout system, doesn't necessarily have anything to do with the modifier chain. All composables get constraints from their container/parent.

[ursus]

okay it is lazy column doing it

My exact usecase is that I have a sort of ticket card thingy, where I need to hardcode a aspect ratio to match the physical thing - but fillMaxWidth on landscape makes the card too tall (2:1 aspect ratio), so I want to limit the width to something reasonable

and it's in bunch of places, when in a detail screen (no lazy list), then what you suggest works

Card(shape = MaterialTheme.shapes.large, elevation = 6.dp) {
        Box(
            modifier = Modifier
                .sizeIn(maxWidth = 200.dp)
                .fillMaxWidth()
                .aspectRatio(0.98f)
        ) {

great

but same code as a item in lazy column, no dice

[Zach Klippenstein (he/him) [MOD]]

hm, maybe add a wrapContentWidth() before width? You could also use requiredWidth, but then you lose control over alignment.