The behavior of Material-UI Drawer varies when used on tablets

Encountering some strange issues with the Material-UI drawer component. It's scrolling horizontally on my iPad, while it scrolls vertically on my MacBook and Android Phone.

Expected Result on MacBook:

https://i.sstatic.net/txBDf.png On my MacBook, it scrolls down and overflows vertically, just like on my phone

Unexpected Result on iPad:

https://i.sstatic.net/7sg8d.jpg However, on my iPad it overflows horizontally..?

The code for the drawer:

<Drawer
  anchor="right"
  open={open}
  onClose={HandleClose}
  classes={{ paper: classes.drawerPaper }}>
    <Toolbar />
      <Typography className={classes.title}>Select active regions</Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {regions.map(region => (
            <FormControlLabel
              control={
                <Checkbox
                  checked={selectedRegions.includes(region.ID)}
                  onChange={e => handleRegionChange(region.ID, e.target.checked)}
                />
              }
              name={region.Name}
              label={region.Name}
              key={region.Name}
            />
         ))}
    </FormGroup>
  </FormControl>
</Drawer>

And here are the styles for the drawer:

drawerPaper: {
  width: 320
},

Why is this happening? How can I fix this to only allow vertical scroll/overflow instead of horizontal on the iPad?

Edit: codesandbox: https://codesandbox.io/s/elated-khayyam-t6klg?file=/src/Drawer.js

Thank you in advance! :-)

javascriptcssreactjsmaterial-ui

Answer №1

This observation seems to be linked to the default styles applied to the FormGroup:

  /* Styles applied to the root element. */
  root: {
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
  },

To prevent wrapping, you can change this to nowrap (as demonstrated with classes.formGroup in a slightly modified version of your sandbox). The discrepancy in behavior between iPads and other devices is not fully understood at this time.

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320
  },
  formGroup: {
    flexWrap: "nowrap"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Select Active Regions
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup className={classes.formGroup}>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};

https://codesandbox.io/s/drawer-wrap-b8dyc?fontsize=14&hidenavigation=1&theme=dark

However, there are still unusual behaviors on the iPad. It seems to try to accommodate all content within the Drawer without allowing scrolling (e.g. adding 100 items instead of 25 results in all items being squished together and unreadable).

While the precise cause is not clear, it appears to be related to the interaction between the height and display: flex properties on the Drawer Paper. Changing the display property from flex to block resolves this issue. No apparent new issues arise from this change, but further investigation is needed to identify any potential side effects. As a result, the previous "nowrap" modification seems unnecessary.

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320,
    display: "block"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Select Active Regions
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};

https://codesandbox.io/s/drawer-wrap-7rm4h?fontsize=14&hidenavigation=1&theme=dark

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving the issue of cypress automatically opening a new tab

Recently, I've encountered an issue while using Cypress to perform a test on my website. Every time I click on a button, it redirects me to a new tab, disrupting the flow of my test with Cypress. Despite trying to remove the "target" attribute using t ...

javascripthtmlattributescypress

Having trouble rendering a dynamic table with JavaScript utilizing a JSON object

I am struggling to retrieve data in JSON format and display it in a table. Despite trying various methods, I have been unable to make it work. Below is the code for this function. Can someone please assist me in identifying what is wrong with it? As of now ...

javascriptjqueryarraysjson

What is the correct syntax for declaring a variable within a switch statement in TypeScript?

How can I properly use a switch statement in TypeScript to assign a new variable a value? For example: let name: string switch(index) { case 0: name = "cat" case 1: name = "dog" .... } I keep getting the err ...

javascripttypescript

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

javascriptjqueryhtml

What is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

Unit testing in JavaScript has its limitations, one of which is the inability to verify if a

Currently, I am working with an Angular application that includes a simple directive called animate. My goal is to use Jasmine to verify if the slideDown method is being called. Below is the current setup of my directive: animateDirective var animate = f ...

javascriptjqueryangularjsunit-testingjasmine

Executing a Drupal rule using JavaScript: A step-by-step guide

I'm facing a challenge when trying to activate a Drupal rule using JavaScript code. lowerLayer[image.feature_nid].on("dragend", function() { var position = kineticImage.getPosition(); var layerPosition = this.getPo ...

javascriptdrupaldrupal-7drupal-rules

Yii2 HTML helper input must be marked as required

This is the form I have generated using the HTML helper: <div class="row"> <div class='form-group col-lg-6 col-sm-6'> <?= HTML::label('Name:','PropertyContactsNew',['class' => 'control-l ...

javascriptyii2

Tips for triggering a function when the range slider is adjusted

I'm looking to trigger a function whenever a user changes a range slider in my Vue.js project, and I also need to pass the new value to that function. The code snippet below shows what I have so far. <div cla ...

javascriptvue.js

Tips for efficiently finding and comparing text within the results generated by a for loop in Angular/Javascript

In my XML data, I have extracted all the tag names using a for loop and some other logic. Now, I am looking to find the word 'author' from the output values that are displayed in the console during the loop. If any of the output values match &apo ...

javascriptangulartypescript

Is it possible to leverage both functions and variables within the ng-options expression in Angularjs?

I am faced with a situation where I have 2 select boxes. The first one is used to choose the user type (such as groups or individual), and the second one displays the options based on the selection made in the first box. I was wondering if it is possible t ...

javascriptangularjs

Struggling to set the value for a variable within an Angular factory?

When dealing with a variable as an array, I have no trouble pushing objects inside and retrieving the values within the controller. However, when trying to directly assign an object to that variable, I run into issues. If anyone can assist me in achieving ...

javascriptjqueryangularjs

What steps can we take to create a personalized PDF editor incorporating our unique edit functionalities using Vue.js?

Is it possible to create a PDF editor similar to MS Word using vuejs? How can I implement custom logic in the PDF editor with vuejs? For example, the features should include: Conditional replacement of text Adding tags to text within the PDF Changing the ...

javascriptvue.jspdfvuejs3

Guide on converting JSON to CSV in React by utilizing the map function

When I convert JSON data to CSV by clicking a button, it currently stores the data in the CSV file separated by commas. However, I want each piece of data to be on its own line. How can I achieve this? For example: Minor,Minor What I Want: Each item on a ...

javascriptnode.jsarraysreactjsmern

Changing an array in PHP to a variable in JavaScript

I am struggling with converting a PHP array into a JavaScript variable using json_encode. When I print out my PHP variable: <?php $damage_array = $listing->tire_detail->damage_details; ?> It displays as: Array ( [lf] => 4 [rf] => 9 [lr ...

javascriptphparraysjsonvariables

Issues with LESS rendering on the Django production server

After deploying my Django website to the production server, I noticed that the LESS file is being loaded but not rendered. Strangely, everything works perfectly on the local server. Any insights on why this might be happening? ...

cssdjangohtmlless

Place the token within the Nuxt auth-module

Working on a project using the Nuxt auth-module. The Login API response is structured like this: data:{ data:{ user:{ bio: null, createdAt: "2021-06-29T12:28:42.442Z", email: "<a href="/cdn- ...

javascriptvue.jsnuxt.jsnuxt-auth

Is it possible to add information to the form data object?

When I send an image to the server using form data, everything seems fine until I try to add data from a crop plugin. Here is the code snippet: //create form data from form var formData = new FormData($('#my-form')[0]); //append the image formD ...

javascriptphpjqueryajax

Global click event listener in React

Attempting to navigate legacy code with my new-found knowledge of React. I'm exploring the possibility of creating a global button click handler for tracking purposes. Analogous to jQuery, the following snippet would achieve this: utilities.js : v ...

reactjs