I want to disable right click on some elements in Next.js? It works with CSS pointer-events: none; but the problem with this is that it also disables touch clicks on mobile devices.
Related
I am working on react app project and i noticed that after click on hamburger menu i am getting that editing text mark like this: or like this .
It's also visible on some button when clicked, inside button text i am getting this editing mark.
I tested it on firefox and edge, and there is ok, this happens only in chrome.
So my question is how i can disable this in app, is there any css property or smth ? Ty for all soulutions :)
On buttons and other elements users can interact with you will want to apply a user-select CSS rule.
user-select: none;
I have created a webextension with a popup window:
I want the user to be able to copy/paste the contents of this popup. This works fine in Chrome, but in Firefox the text cannot be selected. If you drag with your mouse over the text nothing happens.
I tried inspecting and changing the CSS (maybe there's a default user-select?), but without success.
How can I enable text selection in my extension's popup window?
TLDR: add -moz-user-select: text to the body element of the popup.
There is indeed a default user-select.
You can inspect the CSS of the popup using the following steps:
Navigate to about:debugging and enable add-on debugging.
Click the Debug link next to your addon.
Click the ellipses in the top right corner and select "Disable popup auto-hide".
Open your popup.
In the developer tools, select another frame by clicking the frame button in the top right corner.
Open the inspector. As you can see there is a -moz-user-select CSS rule:
So the fix is to add a CSS rule in your popup CSS like this:
body { -moz-user-select: text; }
Setting this to auto doesn't work. Other possible values are documented here.
So I have a page setup with tiles/buttons in the main body section. These tiles have a :hover state and a :focus state. Focus state was added for accessibility purposes.
Weird problem I'm having is when users scroll down the site on mobile browsers, if their thumbs are touching the tile/buttons when scrolling down, then the :focus state gets triggered and the tile looks clicked or activated.
Is there a way to disable focus state activation on scroll and only activate on a direct tap or touch?
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.
Rather than change browser once again, anyone know a trick to allow this to happen:
I have a dropdown menu at the top of a website containing a settings button. When you hover over the settings button, the settings panel shows and when you hover off, the settings panel hides.
In chrome, if I use developer console to inspect that settings panel, when I hover over the settings button, the settings panel pops up and I can inspect elements inside it.
In IE10, when I hover over the settings button, it just inspects the text rather than bringing up the settings panel.
Any ideas on how to get IE10 to allow the hover over events to trigger so I can in fact inspect the elements inside the menu.
Thanks for your input!