Screen resolution using SPFX React

%3CLINGO-SUB%20id%3D%22lingo-sub-736457%22%20slang%3D%22en-US%22%3EScreen%20resolution%20using%20SPFX%20React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-736457%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20All%20I%20want%20to%20set%20the%20width%20and%20height%20of%20my%20Visio%20SPFx%20WebPart%20regarding%20the%20resolution%20of%20the%20screen.%20For%20now%20I%20use%20some%20properties%20but%20they%20are%20set%20in%20the%20Property%20Tab%20so%20fixed%20when%20the%20WebPart%20is%20published.%20In%20Large%20Screen%20the%20WebPart%20displays%20very%20small.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIs%20there%20a%20way%20to%20get%20the%20resolution%20of%20the%20screen%20so%20I%20can%20change%20the%20Width%20and%20Height%20accordingly%20with%20the%20screen%20on%20which%20the%20WebPart%20is%20displayed%26nbsp%3B%3CSPAN%20style%3D%22display%3A%20inline%20!important%3B%20float%3A%20none%3B%20background-color%3A%20%23ffffff%3B%20color%3A%20%23333333%3B%20cursor%3A%20text%3B%20font-family%3A%20inherit%3B%20font-size%3A%2016px%3B%20font-style%3A%20normal%3B%20font-variant%3A%20normal%3B%20font-weight%3A%20300%3B%20letter-spacing%3A%20normal%3B%20line-height%3A%201.7142%3B%20orphans%3A%202%3B%20text-align%3A%20left%3B%20text-decoration%3A%20none%3B%20text-indent%3A%200px%3B%20text-transform%3A%20none%3B%20-webkit-text-stroke-width%3A%200px%3B%20white-space%3A%20normal%3B%20word-spacing%3A%200px%3B%22%3E%20when%20in%20the%20DidMount%20method%3C%2FSPAN%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ERegards.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-739270%22%20slang%3D%22en-US%22%3ERe%3A%20Screen%20resolution%20using%20SPFX%20React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-739270%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F10025%22%20target%3D%22_blank%22%3E%40Michel%20LAPLANE%3C%2FA%3E%26nbsp%3BHave%20you%20had%20a%20look%20at%20the%20Layout%20styles%20in%20Office%20Fabric%20UI%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Fweb%2Flayout%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Fweb%2Flayout%3C%2FA%3E%3C%2FP%3E%3CP%3EYou%20could%20have%20different%20sizes%20set%20for%20the%20different%20widths%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOr%20the%20ResizeGroup%20react%20control%20might%20be%20of%20use%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fresizegroup%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fresizegroup%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
MVP

Hi All I want to set the width and height of my Visio SPFx WebPart regarding the resolution of the screen. For now I use some properties but they are set in the Property Tab so fixed when the WebPart is published. In Large Screen the WebPart displays very small.

 

Is there a way to get the resolution of the screen so I can change the Width and Height accordingly with the screen on which the WebPart is displayed  when in the DidMount method.

 

Regards.

 

1 Reply

@Michel LAPLANE Have you had a look at the Layout styles in Office Fabric UI - https://developer.microsoft.com/en-us/fabric#/styles/web/layout

You could have different sizes set for the different widths

 

Or the ResizeGroup react control might be of use https://developer.microsoft.com/en-us/fabric#/controls/web/resizegroup