Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ContextualMenu: Add a prop for setting the min width to be equal to the width of the target #3431

Merged
merged 2 commits into from
Nov 22, 2017

Conversation

christiango
Copy link
Member

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ npm run change

Description of changes

It is often desired that menus are never narrower than the button that launched them. An example of the undesired situation is shown below:
image

This change adds a new optional prop "useTargetAsMinWidth" which will use the offset width of the target element as the minimum width of the menu, resulting in something like this:

image

This is different from the useTargetWidth prop, as useTargetAsMinWidth allows the width of the menu to be wider than that of the target.

@christiango christiango requested a review from joschect November 20, 2017 15:26
@betrue-final-final
Copy link
Member

That last menu looks about 3-5px wider than the target. Looks like a bug

@christiango
Copy link
Member Author

christiango commented Nov 20, 2017

Yeah, I noticed that as well. It repros with the "useTargetWidth" prop as well, so it's something that should be addressed in a follow up PR. Tracked with #3433, not assigning to myself yet since I don't have bandwidth at the moment to take this fix.

@micahgodbolt micahgodbolt self-requested a review November 22, 2017 16:15
@christiango christiango merged commit e43cac6 into microsoft:master Nov 22, 2017
taggie05 pushed a commit to taggie05/office-ui-fabric-react that referenced this pull request Nov 27, 2017
…he width of the target (microsoft#3431)

* Add useTargetAsMinWidth prop

* Rush change
ohritz pushed a commit to ohritz/office-ui-fabric-react that referenced this pull request Dec 5, 2017
…he width of the target (microsoft#3431)

* Add useTargetAsMinWidth prop

* Rush change
chrismohr pushed a commit to chrismohr/office-ui-fabric-react that referenced this pull request Apr 17, 2018
…he width of the target (microsoft#3431)

* Add useTargetAsMinWidth prop

* Rush change
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants