Anyone notice `Popup`s now have a fixed size? I up...
# compose-desktop
d
Anyone notice `Popup`s now have a fixed size? I upgraded a compose desktop project from
beta5
to
rc3
and all my popup sizes are off.
i
Can you provide a snippet, where the popup's size is wrong? Between rc5 and beta5 there was one change regarding popup size - the default constraints passed to popup are
max(availableSpaceBelowPopup, availableSpaceAbovePopup)
instead of
windowHeight
.
d
Copy code
singleWindowApplication(
    state = WindowState(size = DpSize(300.dp, 300.dp)),
    title = "Chit Chat"
) {
	MaterialTheme {
		Popup(
			alignment = Alignment.Center,
		) {
			Card(Modifier.fillMaxSize(0.7f)) {
				Box(contentAlignment = Alignment.Center) {
					Text("Testing!", Modifier.wrapContentSize())
				}
			}
		}
	}
}
The size of the popup isn't 0.7f of the whole window.
It seems to want
Modifier.required*()
to make it respect any size parameters passed in.
I also can't click on buttons in my popups anymore.
I'll create a better reproducer when I get a moment.
i
To fix the issue, wrap your popup into Box(Modifier.fillMaxSize()):
Copy code
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Card
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.Popup
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application

@OptIn(ExperimentalMaterialApi::class)
fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        MaterialTheme {
            Box(Modifier.fillMaxSize()) {
                Popup(
                    alignment = Alignment.Center,
                ) {
                    Card(Modifier.fillMaxSize(0.7f)) {
                        Box(contentAlignment = Alignment.Center) {
                            Text("Testing!", Modifier.wrapContentSize())
                        }
                    }
                }
            }
        }
    }
}
I will investigate, if it is expected behavior.
d
Thanks!
i
Behavior is probably correct.
Copy code
alignment = Alignment.Center
means that the center of Popup should be in the center of the parent component. The parent component by default is an empty box with (0, 0) coordinates.
d
When you say empty box, do you mean no children? Or zero width and height?
i
Zero width and height
d
Copy code
Box(Modifier.fillMaxSize().background(Color.Cyan)) {
	Popup(
		alignment = Alignment.Center,
	) {
		Card(Modifier.fillMaxSize(1f)) {
			Box(contentAlignment = Alignment.Center) {
				Text("Testing!", Modifier.wrapContentSize())
			}
		}
	}
}
Why doesn't the popup fill the entire window?
It's like the height and width being passed down to the popup is being halved.
Or rather, the parent is only reporting halve (or a quarter if you want to be pedantic) the available space.
Interesting, passing other alignments yields different sizing behaviour.
Center
halves both dimensions,
CenterStart
and
CenterEnd
halves the height,
CenterVertically
halves the width.
Looks like centring is broken somewhere.
i
That is probably not correct behavior. I created an issue, we will look tomorrow.
👍🏼 1
d
Aww shame
Thanks for filling!
i
But good news, I already fixed them
d
Oh wow nice!
Also, does that mean I can make PRs to your androidx repo instead of Google's?
i
If you fix a bug before 1.0 - yes, you can make a PR to our fork (probably we should give you access) After 1.0 we haven't yet establish the process. Probably the old process will stay - all new features/fixes should be merged to aosp first.
K 1
d
Ah good to know.
c
I feel 1.0 coming really soon!