Can the `resize` CSS property be applied to the `body` element in HTML?

Check out my website which currently has a fixed max-width. I am interested in enhancing the user experience by adding a draggable border to the sides, allowing users to adjust the width based on their preference. Many online suggestions involve complicated JavaScript implementations to achieve this effect, but it seems that CSS now supports this feature more easily. However, I am facing difficulties implementing this for the body element. Am I missing something or is it not possible to apply this property to the body tag?

Below is a simple example with minimal code. If you notice any errors, please let me know:

body {
  /* Example design settings */
  padding-left: 20px;
  padding-right: 20px;
  max-width: 90vw;

  /* Resize Properties */
  resize: both;
  overflow: hidden; /* dependent on desired experiment */
  border: 1px solid green;
}
<html>
  <body>
    <p>This is a lengthy text that can be dragged and adjusted as needed</p>
  </body>
</html>

htmlcss

Answer №1

To disable overflow propagation, set the overflow property to html:

body {
  /* Prepare the example design */
  padding-left: 20px;
  padding-right: 20px;
  max-width: 90vw;

  /* Resize Properties */
  resize: both;
  overflow: hidden; /* Adjust based on experimentation */
  border: 1px solid green;
}

html {
  overflow: auto; /* Use a value other than visible */
}
<html>
  <body>
    <p>This is a very long text
 al;djf;alskdjf;laskdjf;asldkjf;alsdkjfl;asdjf;lasdkjf;lasdjf;lasjdfl;asjdl;fajsdl;fja;ldfjl;jadf</p>
  </body>
</html>

User Agents (UAs) must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) with a visible overflow value in both axes and a body element as a child, UAs must instead apply the overflow-* values of the first child element with such properties to the viewport. The root element's overflow value should then be set to visible. reference

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

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

javascripthtmlangularjsangularjs-ng-repeat

What is the best way to adjust the height of my website to properly display on all screen sizes

Is there a way to make my web page fit perfectly on the screen in terms of both width and height? I'm familiar with using Media Queries for adjusting widths, but how can I also control the height? Any suggestions on setting the height? I would great ...

jqueryhtmlcss

Exploring the bond between siblings from a child's perspective

Is there a way to apply styling to the .item class when the corresponding input field is checked? <input> <span class="item"> I have discovered that I can achieve this using input:checked ~ .item {} However, my challenge lies in obtaining th ...

csscss-selectors

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

What is the process for a webpage to save modifications made by JavaScript?

I am working on a simple web page with a form that contains checkboxes representing items from a database. When the submit button is clicked, these items may be retrieved. Additionally, there is an option to add a new item at the bottom of the page. My go ...

phpjavascripthtml

Creating a loading screen with JQuery for an Ajax request

I want to implement a loading screen in my web application every time an ajax call is initiated using jQuery. Currently, I have different types of ajax calls such as $.getJSON, $.post, and $.ajaxFileupload, each with their own Success function that remov ...

htmlajaxjquery

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

Identifying input value changes without needing to manually enter key values

As an example: <input class="table-input" type="number" name="qty" [(ngModel)]="cpy.qty" matInput min="1" max="{{cpy.qty}}" where cpy represents an object that is constantly changing. Currently, I need to execute a certain operati ...

htmlangular

CSS: Styling different <a href> tags to appear uniform within identical size containers

I currently have some links displayed on my webpage. These links are encapsulated within a border and have a background set for them, essentially creating a box around each one. <!DOCTYPE html> <style> a { background: #DDD; border: #BB ...

css

Elevate your web design by transitioning from Bootstrap 4 to Bootstrap 5

Should I upgrade a large project from Bootstrap 4 to version 5? Will it require extensive changes in each file? After updating my project, many components have stopped working: Dropdowns Accordions and more Is this a common issue experienced by everyo ...

htmlbootstrap-4migrationbootstrap-5

Looking to access a variable in Python Flask before it is referenced

I encountered an issue while trying to reference the variable "found_user," an object of the User class; it is defined within an if statement when a user logs in to the home page for the first time. My intention is to utilize the user's id to generate ...

pythonhtmlflask

How to make an image expand to fit the screen when clicked using HTML and CSS

Is there a way to make the images on this page grow to screen size when clicked, rather than extending past the boundaries of the screen? Currently, the images enlarge to twice their original size on click. How can I ensure that they expand responsively to ...

htmlcss

Three-color linear gradient SVG with a middle color expanding in width

I'm working with a linear gradient and here is the code: <svg width="120" height="240" > <linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> ...

htmlcsssvg

Unexpected character appearing in Android 2.3, whether using the li or ul tag

Having an issue with my social icons on the top of my website displaying unwanted symbols in Android 2.3. Can't figure out the cause even after ruling out <a> tags and associated CSS. Any thoughts on what the problem might be? I've remove ...

androidhtmlcss

Are the site-wide navigation links working on one page but not the other?

Currently, I am in the process of constructing a website on rails and have successfully integrated a site-wide navigation bar to display on all pages. However, an issue has arisen where the navbar is visible on both pages, yet the links and hover effects a ...

htmlcssruby-on-railssassmaterialize

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Looking to create a sticky bar with a smooth CSS transition instead of the current rough effect. Any tips or hints would be greatly appreciated! For reference, I found the exact animation I'm aiming for on this website: https://css-tricks.com/ Here i ...

jquerycss

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

The issue of AngularJS failing to bind object properties to the template or HTML element

Just dipping my toes into angularJS, following Todd Motto's tutorials, and I'm having trouble displaying object properties on the page. function AddCurrentJobs($scope){ $scope.jobinfo = [{ title: 'Building Shed', description: ...

javascripthtmlangularjs

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Hey there! I'm just starting out with HTML, CSS, and JavaScript, and I've been trying to make a transition work using JavaScript. The element I'm working with is a "menu-icon" which is a span tag with a small image nested inside another div ...

javascriptcsscss-transitionstransform

A chosen class containing a nested class that utilizes the makeStyles function

Can someone explain how to target the 'element' when the root is selected? Here is the makeStyles code snippet: const useStyles = makeStyles(theme => ({ root:{ '&.selected': { } }, element: { } }) And h ...

cssreactjsmaterial-designmaterial-uijss