MenuButton should not expand the parent

[mrpmorris]

I have a MenuButton in a toolbar at the top of my page. When I open the menu, the toolbar grows.

I made the following changes....

<div class="container">
  <!-- added container class -->
</div>

.container {
    position: relative;
}

::deep > fluent-button + fluent-menu {
    display: none;
}

::deep > fluent-menu.visible {
    display: block;
    position: absolute;
    width: fit-content;
}

[vnbaaij]

Fixed in v3 version

[RonPeters]

Still expands the parent for me in 3.0.0-RC.1. Same exact use case as OP. Their workaround does not work for me

[vnbaaij]

Still seeing this indeed. Reopening the issue.

[madcoda9000]

as @vnbaaij said in #630 use a select box instead. If you apply the following css, it is looking like a Dropdownbutton. (the width is just for example as it suits my needs)

fluent-select{ width: 100px !important; max-width: 100px !important; min-width: 150px !important; color:var(--neutral-layer-floating); background-color: var(--accent-base-color); }

[RonPeters]

as @vnbaaij said in #630 use a select box instead. If you apply the following css, it is looking like a Dropdownbutton. (the width is just for example as it suits my needs)

fluent-select{ width: 100px !important; max-width: 100px !important; min-width: 150px !important; color:var(--neutral-layer-floating); background-color: var(--accent-base-color); }

I don't believe this addresses the use case. I want to use an icon to open the menu, not maintain a current selected item.