charting-library-examples icon indicating copy to clipboard operation
charting-library-examples copied to clipboard

Responsiveness not working in React-JS example

Open vinayak-ventura opened this issue 2 years ago • 5 comments

When I run the react-javascript example, its not adapting as per the screen size. SS given below for reference

To Reproduce

Steps to reproduce the behavior:

  1. Clone the repo
  2. Go to 'react-javascript' folder
  3. Run command - npm install | npm start

Expected behavior Chart should adapt as per the screen size

Screenshots

image

vinayak-ventura avatar Jun 12 '23 21:06 vinayak-ventura

Hi @vinayak-ventura !

Are you by any chance testing on a real device or is it coming from the browser emulation?

romfrancois avatar Jun 13 '23 08:06 romfrancois

hey @romfrancois tried on both, its not adapting, mobile SS attached for your ref IMG_4039

vinayak-ventura avatar Jun 13 '23 19:06 vinayak-ventura

What's not working on the attached screenshot?

The reason I was asking if you were checking on the dev tools emulating a device and especially an iOS device, Chrome/Chromium doesn't render it properly and it displays some elements such as the price scale on the right hand side by truncating the numbers.

romfrancois avatar Jun 13 '23 19:06 romfrancois

the screenshot is taken from real mobile device(iPhone 13), its not responsive, its loading as if its a desktop site. @romfrancois

vinayak-ventura avatar Jun 13 '23 20:06 vinayak-ventura

hey @romfrancois it worked when I added the following line to my index.html <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

vinayak-ventura avatar Jun 13 '23 21:06 vinayak-ventura