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

WebPartTitle font-size doesn't adjust in mobile view like other SharePoint WebParts #114

Closed
ThomasLamb opened this Issue Aug 24, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@ThomasLamb
Contributor

ThomasLamb commented Aug 24, 2018

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.7.0 ]

Expected / Desired Behavior / Question

On an out-of-the-box SharePoint WebPart like "Highlighted content" when you view the page with browser width less than 320px the font-size used is 14px, then from 320px to 480px the font-size used for the title is 21px, and when the browser width is greater than 480px the font-size is 24px.

I expect that the font-size of the <WebPartTitle /> should do the same thing as out-of-the-box SharePoint WebPart.

Observed Behavior

The font-size of <WebPartTitle /> is always 24px no matter how wide or thin my browser is.

Steps to Reproduce

Add a <WebPartTitle /> control to a custom WebPart per the documentation, then run the WebPart and add it to the workbench. Now shrink the browser window to a size smaller than 480px wide and observe that the font-size of the rendered title doesn't adjust.

@ThomasLamb

This comment has been minimized.

Contributor

ThomasLamb commented Aug 24, 2018

Thank my UI approving co-worker for first spotting this really minor issue, heh.

I've created a fix in a fork https://github.com/ThomasLamb/sp-dev-fx-controls-react/

The only file changed is src/controls/webPartTitle/WebPartTitle.module.scss. In it:

  1. I changed the default font-size of 24px to 14px;
  2. Added some media queries to modify the font-size at different browser sizes:
  @media (min-width: 320px) {
    font-size: 21px;
  }

  @media (min-width: 480px) {
    font-size: 24px;
}

I'm just not sure how to test this change, first time modifying a package. 😳
I figured out how to reference a local package in package.json and have tested the change. There was a bug with my change, I had max-width when it should've been min-width in the media query. 😅

@estruyf

This comment has been minimized.

Collaborator

estruyf commented Sep 6, 2018

Thanks @ThomasLamb your PR got merged and will be available in version 1.8.0. If you want you can already test out the beta version in a couple of minutes: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

@estruyf estruyf added this to the 1.8.0 milestone Sep 6, 2018

@estruyf

This comment has been minimized.

Collaborator

estruyf commented Sep 12, 2018

Closing the issue as version 1.8.0 has just been released.

@estruyf estruyf closed this Sep 12, 2018

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