Avoid jQuery ContextMenu Submenu Items from Expanding in Size on Mobile Devices

Recently, I started using the jQuery contextMenu which can be found at .

The issue I encountered involves a menu with a submenu. Whenever I try to access the submenu items on mobile Safari or Chrome, the size of the menu items suddenly doubles and gets cut off from the page as shown in this image: https://i.sstatic.net/pTYlAl.jpg

I attempted to address this problem by setting different CSS properties like:

text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;

Additionally, I also tried:

text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;

Unfortunately, these solutions did not resolve the issue. If anyone has any insights or suggestions on how to fix this, your assistance would be highly appreciated!

jquerycssbootstrap-4

Answer №1

One way to customize the size of ContextMenu and SubMenu is by utilizing media queries.

// For extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// For small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Customize submenu for smaller screens
.submenu {
   @media (max-width: 575.98px) { 
      font-size: 10px;
      // Add other properties suitable for small screens
   }
}

For more information, check out media queries

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

Using JavaScript to open a new window and display CSS while it loads

I am looking to utilize a new window for printing a portion of HTML content. var cssLink = document.getElementByTagName('link')[2]; var prtContent = document.getElementById('print_body'); var WinPrint = window.open(' ...

javascriptjqueryhtmlcssgoogle-chrome

Display/conceal within a jQuery fixed navigation bar (center-aligned)

I am facing challenges with creating a sticky menu that shows/hides with a click button. Considering abandoning the show/hide feature altogether and rebuilding it from scratch in the future. Two major problems I have identified: How can I make the sho ...

javascriptjqueryhtmlcss

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

Refresh the click event on a newly added element in the backbone framework

As a newcomer to backbone.js and using CodeIgniter as my PHP Framework, I encountered a challenge while developing an existing system that uses a backbone.js library. The problem is straightforward if approached with jQuery, but due to the use of backbone ...

phpjqueryhtmlcodeigniterbackbone.js

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

javascriptjquerycsshtml

Is there a native horizontal divider available in Bootstrap 4?

Is there a predefined horizontal divider in Bootstrap 4? I currently have this: <style type="text/css> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> However, I would prefer t ...

htmlcssbootstrap-4twitter-bootstrap-4

Verify that all images have been loaded via AJAX before displaying them on the page

After thinking my project was complete, I encountered a problem when pushing the code live. While it worked perfectly on my local server, the images now take half a second to load properly causing a page thumbnail to pop up over a loading image. https://i ...

jqueryajaximage

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

javascriptcssreactjs

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

cssangularnavbar

Ways to Resolve Issues with WordPress Update and Publish Failures

It has been quite some time since Gutenberg was introduced to us, and it seems like we all have a complicated relationship with it. Navigating the Block editor to create a post or page can be challenging, especially when it used to be so simple. But what& ...

phphtmlcsssqlwordpress

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

Share your content on Facebook with just a click of a button and automatically

Hey there, I'm facing a bit of a dilemma. I want to share a page on Facebook that contains a picture gallery with a unique URL that allows the gallery to load up the correct image based on the thumbnail selected. However, when Facebook scans the HTML ...

phpjqueryajaxfacebookdom

Constant navigation bar placement

On my website, I have a fixed navigation bar at the top that I want to be transparent. However, when I apply transparency to the navigation bar, the content inside it also becomes transparent. To fix this issue, I added a relative position to the content w ...

htmlcss

Asynchronously loading images within a div that has overflow: scroll, as they come into view

The setup I have for displaying my content looks like this: <div id="content" style="overflow:scroll;height:500px; width: 500px;"> <div style="width:500px;height:100px;> <img src='http://graph.facebook.com/user1/picture?width= ...

javascriptjquery

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

I have a <div> that has a limited size, and I am looking for a way to display multiline text in it. If the text exceeds the available space, I would like to add "..." at the end along with a link to view the full content on another page. Is there a ...

javascripthtmlcss

What is the best way to add data to a URL in an ActionResult Method using window.location.href?

I am having trouble understanding how to retrieve data using window.location.href = '/Product/Success/'+data.OrderTrackNo+'';. I am able to get data using ajax, but it seems different when retrieving data with window.location.href, whic ...

javascriptjqueryajaxasp.net-mvcurl-routing

Recalling a hidden div in a flexbox arrangement

I am facing a challenge with hiding and displaying two aside divs to enable a fullscreen view of my central div main. The layout is created using flexbox to assign proportions, but when I try to redisplay the elements, it disrupts the original design. Belo ...

javascriptcssd3.jsflexbox

When the beforeSend function of jQuery AJAX returns false, it triggers the $.ajaxError event

function load() { var url = buildUrl(null, true); $.ajax(url, { cache: true, dataType: 'json', beforeSend: function(xhr) { if (typeof plugin.cache[url] != ...

jqueryajax

How can I prevent a hyperlinked element from being clicked again after it has been clicked using JavaScript or jQuery in PHP

I am struggling with disabling the href after it has been clicked. Can someone please assist me with this? It is crucial for me to complete this PHP program. Style.css .disabled { pointer-events: none; } ...

javascriptjquery

JavaScript or jQuery can be used to rearrange the position of child divs within parent divs with a single action

I am facing a dilemma with 5 identical divs, each containing text and an image. My goal is to rearrange the child divs so that the text comes after the image in each article. Put simply, I want the image to be displayed above the text in all instances. Al ...

javascripthtmljquerycss