1

How can one use a grid like this https://www.npmjs.com/package/react-material-responsive-grid so it's displayed on mobile phone properly without the Desktop View on any Mobile phone browser(Safari,Chrome,Firefox etc)?

I am creating web parts and they work fine in desktop browsers and even in the local Workbench on laptops or computers and even it's Mobile/Tablet previews option. However when my Web Parts are deployed to a site page and are viewed on a physical mobile phone,whether Samsungs or iPhones the mobile view comes up and grid is not displayed.

IT DOES work however when using the Request Desktop version option but is there any way/work around for this?

The NPM library I am using is amazing and is saving lots of CSS/Bootstrap and custom table work but I believe I am using the wrong settings from Properties available - e.g. xs4, md={2} etc. From reading this https://docs.microsoft.com/en-us/sharepoint/dev/design/grid-and-responsive-design I believe I need 1 columns max on devices up to 7 inches. My current test devices are Samsung Galaxy S7 edge SM-G935F and the iPhone 6.

I see in the process I am learning that Responsive Design is huge and am open to learn new stuff! ;-)

The stack I am using is: SP Online 2016 ReactJS JSX NPM

Improve this question
2
  • Hi have to tried DEACTIVATE SHAREPOINT MOBILE FEATURE
    – Sunil Sahu
    Commented Apr 25, 2018 at 10:46
  • Yes I am just wondering is this a must then or do most have it deactivated i.e. to not keep the mobile view because to satisfy every res and device the work will take too much css and divs coding? When data is wide with many columns then even harder to accomplish and wondering if it's possible or anyone has done so. I know things will be become uphill as views change shape and form for instance lists are 1 col but grids can be two or CRUD web part will have tabs and am sure looking at same problem.
    – j03doeson
    Commented Apr 25, 2018 at 10:55

1 Answer 1

Reset to default
1

As SharePoint automatically changes THE REDIRECT BEHAVIOR OF A MOBILE BROWSER pr we can say changes the URL of the requested nonmobile page to its mobile substitute.

  • And disabling the feature is one way for Online SharePoint and
  • OnPremises you can modifiy the compat.browser file in IIS under App_Browsers folder

  • And you configure or CREATE A DEVICE CHANEL for different diveces.

    Here is the reference

Improve this answer
1
  • Thanks for the info Sunil. I have looked at it but we can't create device channels since they don't work with custom web parts (SPFX web parts with any functionality ), also we can't do the second option since we're a SPO setup and so means for now it MAY have to be the first option. Thanks for understanding but I'm sure some or many will face similar issues as we want more and more similar web site functionality and complexity in a web part to be working on mobile views on any device.
    – j03doeson
    Commented Apr 26, 2018 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.