Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this:

#box {
  height: 10rem;
  width: 10rem;
  resize: both;
  overflow: hidden;
  border: solid black 0.5rem;
  position: absolute;
  pointer-events: none;
}
<div id="item"></div>

While it works perfectly in Brave, I'm facing an issue with resizing in Firefox,

I've identified the culprit as position:absolute, but removing it breaks resizing in Brave as well.
How can I maintain pointer-events:none for Firefox resizing?

An ideal solution would be purely CSS-based, but a JavaScript workaround is also acceptable.

javascripthtmlcss

Answer №1

One solution is to enclose the pointer-events: none element within another element that manages user resizing:

/* Using CSS logical properties in this example, where
   the inline-axis is typically horizontal for English,
   and 'inline-start' and 'inline-end' correspond to the
   start and end points of writing, such as 'left' and
   'right'. This may differ for languages like Arabic or
   Chinese.
   Block-size refers to the vertical axis where blocks are
   stacked perpendicularly to the inline-axis. */
 
.wrapper {
  block-size: 10rem;
  border: solid black 0.5rem;
  inline-size: 10rem;
  overflow: hidden;
  position: absolute; /* May not be necessary here */
  resize: both;
}

.item {
  background-attachment: fixed;
  background-image: repeating-linear-gradient(45deg, #ccc3 0 5px, transparent 5px 10px);
  inset: 0;
  pointer-events: none;
  position: absolute;
}
<div class="wrapper">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate impedit, quo animi illo corrupti? Veniam, quo nobis eaque maxime fugiat!</div>
</div>

Check out the JS Fiddle demonstration.

Answer №2

.container {
  border: 0.5rem solid black;
  resize: both;
  height: 10rem;
  width: 10rem;
  overflow: auto;
}

#item {
  pointer-events: none;
  user-select: none;
  height: 100%;
  width: 100%;
}
<div class="container">
  <div id="item">
    This text is unselectable.
  </div>
</div>

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

Issue: The variable THREE has not been defined within the FBXLoader code

Currently, I am utilizing the module version of three.js in order to execute imports from a client-side JavaScript file structure. The core functionality of THREE is working correctly. However, I am encountering an issue when attempting to use it with FBX ...

javascriptnode.jsthree.jsnode-modulesfbx

Is it safe to securely store connection credentials in javascript?

I am currently working on developing a web chat app for a Minecraft server using this API. However, the demo script I am referring to displays connection information in plain text, making it easily visible to any client's computer. Is there a way to s ...

phpjavascriptmysqlsecurity

Leveraging the const keyword within a for loop

Imagine having the following snippet of code: for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **const** foo = Collection.find({index:i}); } vs for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **let** foo = Collection ...

javascriptnode.jsmemory-leaksgarbage-collection

Ensuring the cookie remains active throughout various subdomains

After implementing code to set a cookie on example.com, I noticed an issue with it carrying over to the subdomain dogs.example.com. <script> document.cookie="cid1={{utm_campaign}}; path=/;" </script> The {{}} is part of Google-Tag-Manager s ...

javascriptcookiessubdomain

Styling the arrow of a CSS select box

Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...

htmlcss

Automatically load content using AJAX when scrolling within a HTML5 segment

Recently, I've been developing a website that dynamically loads new content from a MySQL database as the user scrolls. However, I've encountered an issue where the new content is loaded even with minimal scrolling, rather than only when reaching ...

javascriptjquerycssajaxhtml

Expanding iFrame width in Drupal 7

I'm grappling with how to create a full-width page in my Drupal 7 website. This specific page contains an embedded form. Initially, there were two blocks on the page that I removed in hopes of getting the iframe to expand to fill the space. The cur ...

htmlcssiframedrupaldrupal-7

Is it possible to apply identical css styles to multiple ids at once?

Is there a way to accomplish this? .apple, .orange, .kiwi h1 {color: #892828;} I'm having trouble making it work. Any suggestions? ...

css

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

I am currently utilizing the Bootstrap File Input component for file uploads, and it's working splendidly. I have set up the initialPreviewConfig to display the existing image on the server. However, there are instances when there is no file available ...

javascriptjquerybootstrap-4asp-classic

Is it possible to assign a name attribute to the <img> tag in HTML?

Can the "name" attribute be used in an "img" tag in HTML? If you have this knowledge, please do share and thank you in advance. ...

htmlimageattributes

Discovering a way to retrieve objects from an array of objects with matching IDs

Here is a code snippet I put together to illustrate my objective. arr = [ { id:1 , name:'a', title: 'qmummbw' }, { id:2 , name:'b', title: 'sdmus' }, { id:2 , name:'', title: 'dvfv' }, ...

javascripttypescriptecmascript-6

The proper method for incorporating a hover effect using CSS

Currently, I am facing an issue with integrating a hover effect to an image using CSS. The problem arises when the hover area is not aligned properly and the effect triggers even when the mouse is not directly over the image. <body> <div id=&apos ...

htmlcsshover

The submitEvent.target cannot be converted to formdata in Vue

update I successfully created a new function based on the helpful answer provided below export function getFormDataAsJson(e) { const jsondata = {} let fd= new FormData(e.target) for (let key of fd.entries()) { jsondata[key[0]]=key[1] ...

javascriptvue.jsvuejs3

Animating a CSS shape with the .animate method

I need help creating a dynamic graphic for my school project using css, jquery, and html. I want to make a rectangle that moves across the screen, but I'm having trouble getting it to work properly. Despite trying different variations of the animate f ...

javascriptjqueryhtmlcss

Delete any content that is not enclosed in tags

I am struggling with manually rendering Django forms and it's producing the following code. Is there a way to remove text without HTML tags, such as "Currently:" and "Change:", which are difficult to style with CSS? <div class="row align-cente ...

htmlcssdjangodjango-forms

Generating a JavaScript object based on an array of keys

I'm currently grappling with a task that is proving to be quite challenging. I have a set of arrays structured like this: ['key1', 'key2', 'key3'] ['key1', 'key2', 'key4'] ['key1', ...

javascriptjqueryarraysjsonpojo

Exploring the scope of event listeners in jQuery's TimeCircles

Currently experimenting with the jquery timer known as "TimeCircles", which can be found here. I have successfully set up a minute / second timer for 30 minutes with an alert that triggers at 25 minutes. My goal is to implement an event when the timer hits ...

javascriptjquerytimerscopeaddeventlistener

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

I've implemented the React Material-UI Autocomplete feature with checkboxes in my project. Here is what I have so far in my code (check out demo.js for details): https://codesandbox.io/s/material-demo-rxbhz?fontsize=14&hidenavigation=1&theme=d ...

javascriptreactjsmaterial-ui

Preventing page navigation in JavaScript: Why it's so challenging

I am encountering an issue with a link element that I have bound a click event to (specifically, all links of a certain class). Below is an example of the link element in question: <a id="2" class="paginationclick" style="cursor: pointer;" href=""> ...

javascriptjqueryhtml

Sequelize: When attempting to use .get({plain: true})) method, an error is returned indicating that .get is

I'm facing a strange issue as I am able to retrieve only the values of an instance in other parts of my code without any problems. Can you spot what might be wrong with my current code? app.get('/profile', checkAuth, function(req, res) { ...

javascriptexpresssequelize.js