Button container is cut off when using Menu with .menuIndicator(.hidden)

Question

metedata OP

Created Apr ’23

Replies 1

Boosts 1

Participants 1

I'm adding some sort options to my macOS app that shows a list of stuff.

I'm using a Menu inside .toolbar { ToolbarItemGroup() {} } like so:

Menu { ForEach(SortOption.allCases, id: .self) { option in Toggle(isOn: Binding<Bool>( get: { userSettings.sortOption == option }, set: { newValue in if newValue { userSettings.sortOption = option } })) { Text(option.description) } } } label: { Image(systemName: "arrow.up.arrow.down") } .menuIndicator(.hidden)

Here's the result:

Screenshot 2023-04-09 at 6.19.26 PM.png

As you can see, the hover state / container of the label image seems to be cut off. I suspect that it's caused by .menuIndicator(.hidden) which I'm using to remove the default chevron that shows up next to the icon (it looks ugly and is too close to the icon: 0c604904a6f42e792ef2bff905767559bd970716d4d49a7ef68636cfc84abad9.jpg ).

Is it possible to remove the menu indicator while leaving the hover state container intact?

Answered by metedata in 750364022

.fixedSize() fixes the issue with a cut off button container:

Menu {
 &#x2F;&#x2F; etc
} label: {
  Image(systemName: "arrow.up.arrow.down")
}
.menuIndicator(.hidden)
.fixedSize()

Boost

Answer 1

metedata OP

Apr ’23

Accepted Answer

.fixedSize() fixes the issue with a cut off button container:

Menu {
 &#x2F;&#x2F; etc
} label: {
  Image(systemName: "arrow.up.arrow.down")
}
.menuIndicator(.hidden)
.fixedSize()

1