I have a surface (which acts like a card) and at the right top corner I have menu dots. The idea is that when a user taps the menu dots a drop down menu should appear.
The issue I have is that the dropdownmenu is only shown if the surface is large enough to display the dropdown inside of the surface. So I need a way to draw the dropdown menu outside the bounds of the surface.
This is what I'm trying to accomplish:
I have also tried putting the surface inside a box, and the adding the menu dots outside of the surface (even though this feels very hacky) but also couldn't get that to work.
Just a side note, these cards are in a lazycolumn, so there is a chance that the dropdown could go over the next item in the column as well. I just have no idea how to implement something like that.
Here is some example code of what I have tried:
@Composable
fun DropDownDemo() {
var expanded by remember { mutableStateOf(false) }
Surface(
modifier = Modifier.height(50.dp),
shape = RoundedCornerShape(dimen_xs),
color = MaterialTheme.colorScheme.surface,
elevation = 2.dp
) {
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.Top,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = "Some text")
Box {
IconButton(
onClick = { expanded = !expanded }
) {
Icon(Icons.Default.MoreHoriz, "We want more")
}
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false },
) {
DropdownMenuItem(onClick = { expanded = false }) {
Text("Delete")
}
DropdownMenuItem(onClick = { expanded = false }) {
Text("Save")
}
}
}
}
}
}
And this is the result when surface is too small:
And this is the result when the surface is large enough (which doesn't help me):