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

PropertyFieldTermPicker: Layout Issues #143

Closed
karokuusikallio opened this Issue Jan 10, 2019 · 5 comments

Comments

Projects
None yet
2 participants
@karokuusikallio
Copy link

karokuusikallio commented Jan 10, 2019

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

  • Enhancement
  • [X ] Bug
  • Question

Version

Please specify what version of the library you are using: [ 1.12 and 1.13.1 ]

########

Version 1.12 had a layout problem with IE11 because {flex-wrap: wrap} requires a width, or preferably max-width for the terms not to overflow to the right outside the screen.

Version 1.13.1 has a problem with both IE11 and Chrome. Each term is now set to not to wrap so each term is on a different row. This create a problem with terms with long names as the container overflows to the right again.

In both situations there's a problem that the term selection button is not available if the term container overflows.

My suggestion for a fix is to go back to how is was in 1.12 so that the terms wrap nicely if possible and just to add max-width property to make sure that it works with IE11 too.

Thanks!

@estruyf

This comment has been minimized.

Copy link
Collaborator

estruyf commented Jan 10, 2019

Thanks for logging this issue, will check what is going on here. As nothing has been changed to the control in version 1.12.0, 1.13.0 and 1.13.1 it could be related to Office UI Fabric or SharePoint styling.

@estruyf estruyf added the bug label Jan 10, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

estruyf commented Jan 19, 2019

@karokuusikallio would you be able to include some screenshots to show the issue and the expected result?

@karokuusikallio

This comment has been minimized.

Copy link
Author

karokuusikallio commented Jan 21, 2019

Hello @estruyf , I think that the layout is good enough with Chrome and FF despite some issues with long tag names. But for IE11 compatibility I would add a max-width to the div with pickerText-class to ensure wrapping. Please see the attached picture.

panel

estruyf added a commit that referenced this issue Jan 21, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

estruyf commented Jan 21, 2019

I have implemented a change. The tags should now show up as follows:

screenshot 2019-01-21 15 02 14

Feel free to test out the latest beta which includes this fix. More information about this can be found here: https://sharepoint.github.io/sp-dev-fx-property-controls/beta/

@estruyf estruyf added this to the 1.14.0 milestone Jan 21, 2019

@estruyf

This comment has been minimized.

Copy link
Collaborator

estruyf commented Jan 24, 2019

The fix has been released in 1.14.0, if it would still occur, feel free to reopen the issue.

@estruyf estruyf closed this Jan 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment