Hi :slightly_smiling_face: I have a strange issue ...

# compose

[Anders Kielsholm]

Hi 🙂 I have a strange issue with DropdownMenu and I don't know if it's me doing something wrong. I want the `DropdownMenuItem`s to contain an icon and text. It however seems like the width of the items are based on the text solely and not the combined width. I have this implementation as an example (in the actions part of a TopAppBar):

IconButton(onClick = { showMenu = !showMenu }) {
    Icon(<http://Icons.Default.Menu|Icons.Default.Menu>, contentDescription = null)
}

DropdownMenu(
    expanded = showMenu,
    onDismissRequest = { showMenu = false }
) {
    DropdownMenuItem(
        onClick = { }
    ) {
        Icon(Icons.Default.ThumbUp, contentDescription = null)
        Text("This is a line", maxLines = 1)
    }
    DropdownMenuItem(
        onClick = { }
    ) {
        Icon(Icons.Default.Clear, contentDescription = null)
        Text("This is another line", maxLines = 1)
    }
}

I've attached some Screenshots. The first is how it looks with the above implementation (see the second line is cut off). The second is how it looks without the icons - notice how the width of the box is exactly the same as the first. The third is how I want it to look in the end (I achieved this by setting a static with on one of the `Text`s to 170 dp).

Does anyone know what I'm doing wrong - or could it be a bug?

[Felix Schütz]

What happens without maxLines?

[Anders Kielsholm]

Thanks for asking 🙂 It splits the text into two lines - and for a long word, it splits the word as well. I think it's the same case, it actually meassures the text as being the widest composable, but forgets to take into consideration there are others as well.

[Felix Schütz]

To test this theory, can you please show the same dropdown menu with an even longer text?

[Anders Kielsholm]

Sure 🙂 I've tried to make a short video where try to expand the text on the fly. Click the top one inserts a "a" and pressing the bottom inserts a whitespace. Don't know if that helps anything?

screencapture-1630406298515_Trim.mp4

[Albert Chang]

I believe it's a bug that the intrinsic size of the Icon is zero. Filed an issue: https://issuetracker.google.com/issues/198206454

[Anders Kielsholm]

Oh, that would make sense! Any way I can fix this locally?

[Albert Chang]

For now you can explicitly specify the size of the icon. Since material icons are all 24dp, you can specify Modifier.size(24.dp).

[Anders Kielsholm]

Thanks a lot, it worked! 🙂

[Shivam Kumar Jha]

I was facing the same issue, thanks for this thread 🙂