Tips for managing content and tables that exceed their container's boundaries

On my webpage, I have a slide-out sidebar that shifts the other contents and causes overflow with a scrollbar. I want the content to remain inside the window and adjust according to the available space.

Image of Slide-out Sidebar

As seen in the image, the content stays inside the window without overflowing. However, when we open the slide-out sidebar, it causes the remaining content to overflow. Please refer to the following image where the content goes outside the window.
I would like the content to adjust according to the window size without overflowing. This applies to tables as well - they should adjust based on the window width but not overflow.

Using CSS, HTML, and JavaScript

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Implementing Swipeable Side Menu</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

    <style type="text/css">
      body, html {
          height: 100%;
          margin: 0;
          overflow:hidden;
          font-family: helvetica;
          font-weight: 100;
      }
      .container {
          position: relative;
          height: 100%;
          width: 100%;
          left: 0;
          -webkit-transition:  left 0.4s ease-in-out;
          -moz-transition:  left 0.4s ease-in-out;
          -ms-transition:  left 0.4s ease-in-out;
          -o-transition:  left 0.4s ease-in-out;
          transition:  left 0.4s ease-in-out;
      }
      .container.open-sidebar {
          left: 240px;
      }

      .swipe-area {
          position: absolute;
          width: 50px;
          left: 0;
          top: 0;
          height: 100%;
          background: #f3f3f3;
          z-index: 0;
      }
      #sidebar {
          background: #DF314D;
          position: absolute;
          width: 240px;
          height: 100%;
          left: -240px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
      }
      /* Remaining CSS styles omitted for brevity */
    </style>
    <script type="text/javascript">
      $(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

    </script>
  </head>
  <body>
    <div class="container">
      <div id="sidebar">
          <ul>
              <li><a href="demo3.html">Home</a></li>
              <li><a href="#">>Explore</a></li>
              <li><a href="#">Users</a></li>
              <li><a href="#">Sign Out</a></li>
          </ul>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
          <div class="content">
              <h1>Creating Swipeable Side Menu Forthe Web</h1>
              <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
          </div>
      </div>
    </div>
  </body>
</html>

Answer №1

JavaScript

$(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
                 if($(toggle_el).hasClass("open-sidebar")){
                     console.log($('.content').width()); 
                   console.log(parseInt($('.content').width())-240);
            $('.content').width(parseInt($('.content').width())-240);
          }
          else
            $(".content").css('width','100%');
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });

To maintain the overflow property without changes, we can use JQuery API for assistance.

if($(toggle_el).hasClass("open-sidebar")){
                         console.log($('.content').width()); 
                       console.log(parseInt($('.content').width())-240);
                $('.content').width(parseInt($('.content').width())-240);
              }
              else
                $(".content").css('width','100%');

The script dynamically calculates and adjusts the width of your content accordingly. You have the option to adjust either the content or the entire container within it.

DEMO

Answer №2

If you want to make some adjustments using CSS, follow these steps:

Start by changing the left property to padding-left in the .container.open-sidebar and also update the transitions in the .container:

.container {
      position: relative;
      height: 100%;
      width: 100%;
      left: 0;
      box-sizing:border-box;
      -webkit-transition: padding-left 0.4s ease-in-out;
      -moz-transition: padding-left 0.4s ease-in-out;
      -ms-transition: padding-left 0.4s ease-in-out;
      -o-transition: padding-left 0.4s ease-in-out;
      transition: padding-left 0.4s ease-in-out;
  }
  .container.open-sidebar {
      padding-left: 240px;
  }

Add a new css rule right below #sidebar:

.container.open-sidebar #sidebar {
      left: 0px;
}

Next, include a transition in #sidebar:

#sidebar {
      background: #DF314D;
      position: absolute;
      width: 240px;
      height: 100%;
      left: -240px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-transition: left 0.4s ease-in-out;
      -moz-transition: left 0.4s ease-in-out;
      -ms-transition: left 0.4s ease-in-out;
      -o-transition: left 0.4s ease-in-out;
      transition: left 0.4s ease-in-out;
}

To finalize, add the box-sizing property in .container:

.container {
      position: relative;
      height: 100%;
      width: 100%;
      left: 0;
      box-sizing:border-box;
      -webkit-transition: left 0.4s ease-in-out;
      -moz-transition: left 0.4s ease-in-out;
      -ms-transition: left 0.4s ease-in-out;
      -o-transition: left 0.4s ease-in-out;
      transition: left 0.4s ease-in-out;
}

Take a look at this live demo for reference.


If clicking a button causes the entire container to shift to the right when you don't want that, adjust the properties as mentioned above. By replacing left with padding-left, you create space for the sidebar while applying the transition effect only to the sidebar itself. Using box-sizing ensures that width:100% considers the padding-left.

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

The Lightgallery plugin is creating three duplicates of the slides

I am currently facing an issue with a gallery that loads images from an API and displays them using the lightgallery plugin. Upon implementing the lightbox in the correct location (view question here), I discovered that the plugin is generating three slid ...

Implementing Material UI Slider component to update state upon mouse release, enabling real-time sliding functionality

Is there a way to update the new state only upon mouse release for a Material UI slider, while still allowing real-time tracking of the slide? Material UI offers two events: onChange and onChangeCommitted. The latter gives the desired end result, but the s ...

Store <td> in a variable

At the moment, I have a script that allows users to input an item name, along with its size, color, and other options. Each of these entries is saved as individual items with their custom specifications, such as a black t-shirt in large size. The script c ...

I am experiencing issues with the HTML footer not displaying correctly on my website

My GitHub Pages hosted website is giving me trouble with the footer styling. No matter what I try, I can't seem to get the background color to show up: h1 { background-color: #000000; } I'm attempting to create a footer similar to the one at ...

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

Having trouble displaying an image in your React project?

I'm having an issue with my code where the logo is not displaying, even though it should be in the src -> pages -> images folder. I can't seem to figure out why this is happening. import dress from "./images/dress.png"; const I1 = () => ...

Retrieve a specific nested key using its name

I am working with the following structure: const config = { modules: [ { debug: true }, { test: false } ] } My goal is to create a function that can provide the status of a specific module. For example: getStatus("debug") While I can access the array ...

How to manage multiple items within a single MUI/React TextField

Recently diving into the world of JS, React, and MUI, I find myself faced with a challenge involving a MUI TextField that is supposed to handle multiple values. For example: 1*10 5*50 13*250 5*50 1*10 3*33.33 4*25 3*33.33 All on a single line. These ...

Creating a Page with Python Selenium for JavaScript Rendering

When using Python Splinter Selenium (Chromedriver) to scrape a webpage, I encountered an issue with parsing a table that was created with JavaScript. Despite attempting to parse it with Beautiful Soup, the table does not appear in the parsed data. I am str ...

Ways to extract data from a JSON file using jQuery and assign them as text values?

I have a data table that I serialize into JSON and then parse in my view using jQuery to access the values. However, when I use document.getElementById('Name').value = UserInfo.Name; the value of Userinfo.Name = null, I'm having trouble ...

Easy peasy add-to-cart functionality using AJAX

Hey everyone, I'm trying to figure out how to add items to a cart and display them on the page without having to reload the entire page. It's been challenging for me, so I decided to start with a simple example to understand the logic better. In ...

Creating blinking or flashing text using CSS 3 is a fun way to add eye-catching animation

Here's the current code I'm using: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timi ...

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

Eliminate duplicate entries in typeahead.js by ensuring unique data sources for both prefetch and remote

Currently, I have implemented typeahead.js with both prefetch and remote data sources. You can check out the example here. $(document).ready(function() { var castDirectors = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('val ...

Tips for managing the extensive amount of JQuery and AJAX code that arises with the implementation of a web API

In my Web Api application, each entity has its own controller class. However, for the main page of the application, I need to perform operations involving multiple entities. To achieve this, I am using jQuery and Ajax calls to interact with the respective ...

Feeling lost on the intricacies of threejs functionality

I have incorporated a sample code into this html/css document that utilizes a script to generate a 3D cube using three.js. Upon opening the HTML file, I am presented with a blank page in chrome displaying only, "canvas { width: 100%; height: 100% }" Belo ...

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

Utilizing Regular Expressions for extracting data from an HTML webpage

Is it possible to extract the response "Here is the solution" from an HTML document using Regular Expression? <b>Previous Query:</b> <b>Here is the answer</b> ...

The loading time for the NextJS production build is unacceptably sluggish

Recently, I started working with NextJS and deployed my project on Netlify as a production build. However, I've noticed that there is a significant delay of around 3-4 seconds when navigating to a specific page using the next router. Surprisingly, thi ...

Steps for properly closing the loop to input data into an array prior to populating the JSON object in Node.js

I have encountered an issue while trying to fill all the data from my loop into an array. It seems that the loop is being executed last, causing the array to remain empty when I try to print the data. var data = new Array(); for (let station of t ...