Hi there! Struggling with a simple IconButton insi...

# compose-desktop

[Remo]

Hi there! Struggling with a simple IconButton inside of a BasicTextField… Whenever I put a width for the row/textfield, the X-Button is not shown. I’ve been trying to remove this space in between, since the input in the textfield in this case is only 2 chars… Does anyone have a clue on what is missing exactly? Imo the horizontalArrangment should do it (which it obviously doesn’t)…

BasicTextField(
        value = "Hi",
        onValueChange = { },
        textStyle = TextStyle(color = ColorsUtil.get(FormColors.NORMALTEXT)),
        readOnly = true,
        modifier = Modifier.height(20.dp).background(Color.Cyan, CircleShape).border(border = BorderStroke(1.dp, Color.Red))
    ) { innerTextField ->
        Row(horizontalArrangement = Arrangement.Start, modifier = Modifier.padding(horizontal = 5.dp)) {
            innerTextField()
            if (isRemovable) {
                IconButton(
                    onClick = {  },
                    modifier = Modifier.clip(CircleShape).height(20.dp).border(border = BorderStroke(1.dp, Color.Magenta))
                ) {
                    Icon(Icons.Filled.Close, "Remove", tint = Color.Black)
                }
            }
        }
    }

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

My guess is that innerTextField has a minimum size that it's using here. Try wrapping it in a Box(Modifier.weight(1f))