Jetpack Compose - Row Clipping Children When Width Increases

Question

Here on the right , I have a list of items in a composable , Every item is inside a row , All the items are inside a column

All the children of the are getting clipped to fit the screen which I don't want , I want these items to render completely even if outside of screen since I have a zoomable container above them

As you can see how text in the text field is all in one line vertically rather than expanding the width , This is the problem

Code :

Row(
        modifier = modifier.zIndex(3f),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
    ) {
        SimpleNodesList(
            modifier = Modifier.padding(8.dp),
            parentNode = state.center,
            nodes = state.center.left,
            renderRight = false,
        )

        SimpleNode(node = state.center, parentNode = null)

        SimpleNodesList(
            modifier = Modifier.padding(8.dp),
            parentNode = state.center,
            nodes = state.center.right,
            renderLeft = false
        )
    }

Simple Nodes List is a column of rows , I have one column on left and one on the right , If the width of the left column increases , right row get's clipped by the screen

Whiffle

I don't know which composable is responsible , whether row or column – Whiffle

Same container on the left however is being rendered completely and taking up its width causing this one to be on the right side – Whiffle

You can start posting your code – Sacristy

I've added the code – Whiffle

Trying to create a mindmap ! – Whiffle

Answer 1

Using this modifier does the job for the row , In my case I also needed this layout modifier , wrapContentSize(unbounded = true) was working but children weren't clickable for some reason outside the bounds of the zoom container !

I also had to create a modifier zoomable rather than use a zoomable box , so the zoomable touch events would be dispatched on the this composable rather than the parent !

modifier = Modifier
        .layout { measurable, constraints ->
            val r =
                measurable.measure(constraints = constraints.copy(maxWidth = Constraints.Infinity))
            layout(r.measuredWidth, r.measuredHeight, placementBlock = {
                r.placeWithLayer(0, 0, 0f) {

                }
            })
        }
        .wrapContentSize(unbounded = true)

Whiffle

Answer 2

If you are using hard-coded width for the text, applying Modifier.wrapContentSize() on every container might do the job

Deflect

Answer 3

Use SimpleFlowRow in place of Row. It will fix the clipping issue.

Hub