To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve this functionality? Below is the code snippet specifically designed for desktop view.

        <Grid item xs={2} key={keyId}>
            <Card xs={12}}}
                onDoubleClick={() => { addProject(projname) }}>
        </Grid>

Any assistance with solving this challenge would be greatly appreciated. Thank you!

cssreactjstypescriptmaterial-ui

Answer №1

To optimize for mobile viewing, consider creating a new <Card /> component with an onClick event that sets its display to none:

<Grid item xs={2} key={keyId}>
  <Card sx={{ display: {xs: "none", md: "block"} }} xs={12}
  onDoubleClick={() => { addProject(projname) }}>
    ...
  </Card>
  <Card sx={{ display: {xs: "block", md: "none"} }} onClick={() => {addProject(projname)}}
    ...
  </Card>
</Grid>

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

Can CSS actually generate accurate inches?

Can you accurately set the width of an element, like a div, in inches and expect it to maintain that width across different devices? Or will it simply scale at a ratio like 1in = 96px? Edit: Try using CSS to set an element's width in inches and then ...

javascriptcsshtml

Utilize the bootstrap grid to align content into 4 columns evenly

I have the following code snippet: <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Business Name : </label><span class="head9">'.$name.'</span> </div> <div ...

htmlcsstwitter-bootstrapgridmultiple-columns

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

cssreactjsmaterial-ui

Beginner experiencing website overflow problem

After completing a basic web development course, I decided to create my first homepage. While I am satisfied with how it looks on a PC or laptop, the layout gets messy on mobile devices. I tried using <meta name="viewport" content="width= ...

htmlcssoverflow

Exploring the array of nested objects within an array of objects

Greetings, I seem to be facing a challenge with my JSON data. My goal is to extract the "tag" value from the objects within the "cows" array. Delving into nested data structures is somewhat new to me, and I've hit a roadblock in this process. Any insi ...

reactjsjsonmapping

Confirm the identity of a user by checking their email against the records stored in a MySQL database

I am currently working on creating a user verification system using email that is stored in a mySql database and utilizing express JS. The user is required to input their email before filling out any other forms. If the email is not found in the email tabl ...

mysqlnode.jsangulartypescriptexpress

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

htmlcssgoogle-chrome

Steps for positioning a logo to the left and navigation to the right with HTML and CSS

Could someone assist me in aligning a logo on the left and navigation menu on the right using HTML and CSS? I envision it to look like the image displayed. I have tried various approaches to adjust my CSS styling, but nothing seems to be working as inten ...

htmlcss

Creating a sticky navigation bar in a CSS Grid layout

Using a grid for the first time and attempting to make the nav-bar sticky, I initially used: position: sticky; top: 0; without any success. Subsequently, trying: position: fixed; resulted in undesired consequences. Desiring the nav-bar ...

htmlcsscss-grid

Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model. However, each user object in the list also contains an email proper ...

htmlangulartypescript

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

javascriptcssangularjs

The MUI X Date Pickers Pro functionality is currently experiencing issues when used in conjunction with Joy

Unfortunately, MUI X Date Pickers Pro is currently experiencing compatibility issues with Joy UI, resulting in undefined property errors. You can view a live example of this issue by following this link: https://codesandbox.io/s/mui-joy-mui-x-date-pickers ...

material-uimui-xjoy-ui

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

javascriptcssreactjswebpackstyled-components

Unit Testing Angular: Passing FormGroupDirective into a Function

I am currently writing unit tests for a function that takes a parameter of type FormGroupDirective. I have been able to test most of the logic, but I'm unsure about what to pass as a parameter when calling the resetForm() function. Here is the code sn ...

angulartypescriptunit-testingjasmineangular-reactive-forms

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

jqueryhtmlcss

Is there a way to preserve the context in React when transitioning to a new page?

Currently, I am encountering a challenge within my React application involving multiple components, each utilizing its own context through the useContext hook. My goal is to uphold the context for each component even when there are changes in the URL. I a ...

javascriptreactjs

The height of the textarea is too excessive

Just a quick question - in my HTML, I have a simple textarea nested within the body tags. Within my JavaScript, I am using jQuery to ensure that the body element is dynamically resized to match the height of the window: $(function() { $("body").heigh ...

jqueryhtmlcsstextarea

Strange occurrence with z-index, list items that are floating are not being displayed on top of the heading

I have come across a unique problem with z-indexes that I have never experienced before. To address one common speculation right away: the positioning for each element with a z-index is already set properly, so that's not the issue. Despite my efforts ...

htmlcsspositioningz-index

There seems to be an issue with the cornerRadius of the Selection box when placed over a ListItemButton in React

I'm working on creating a menu with selectable items in React using Material UI, and I've set the corner radius to 25px: <Paper sx={{borderRadius: '25px'}}> <List component={Stack} direction="row"> < ...

reactjsmaterial-ui