Experimenting with creating collapsible panels using Bootstrap/CSS can result in various outcomes

, I am in the process of constructing a collapsible sliding left panel using bootstrap 5. The progress has been notable, but I am encountering some hurdles. Upon reviewing the code at this link: https://jsfiddle.net/dizzy0ny/86wjas9L/108/, you will witness my attempts through two different approaches – one utilizing JavaScript and the other involving Bootstrap/CSS. Interestingly, the behaviors differ in each case. Here are a few key points where I am facing challenges: 1. The aim is to have the panel slide left, which works seamlessly with the JavaScript code (Toggle1 button). However, with the toggle2 button, instead of sliding left, it ends up sliding upwards. 2. Irrespective of the method employed, the displayed content fails to resize to fit the entire page width when the panel is collapsed. In some instances, when the window size is smaller, expanding the collapsed panel results in a horizontal scrollbar appearing due to the chart not resizing accordingly. Despite trying various styling options to rectify this issue, success has eluded me. 3. Is there a way to adjust the height of the content area to prevent the vertical scrollbar from being constantly visible? Here is a snippet of the HTML structure: (head content...) (body content...) (CSS content...) (Javascript content...) After numerous attempts, I managed to overcome the remaining challenges. The final hurdle involving resizing the content and addressing the persistent vertical scrollbar was resolved through the following adjustments: - Addition of 'd-flex h-100 flex-column' to the top-level container row that houses the navigation panel and content. - Setting the height of the body/html to 100%. - The main content column requiring a 'display' property of 'content'. - An arrangement change where the navigation panel was moved into the top-level div as another row. Additionally, 'h-100' was introduced to the second row that contains the collapsing pane and content. For an updated and working implementation, you can refer to this revised jsfiddle: https://jsfiddle.net/dizzy0ny/86wjas9L/513/. The struggles with CSS continue to be a frustrating endeavor.
htmlcssbootstrap-4highchartsbootstrap-5

Answer №1

As per the resources provided by W3Schools, it is feasible to create a sidebar without the use of jQuery in a more streamlined manner.

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

Highcharts.chart('container', {

  series: [{
    data: [2, 5, 2, 3, 6, 5]
  }]

});
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>

<div id="main">
  <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
  <div id="container"></div>
</div>

Demo: https://jsfiddle.net/BlackLabel/kned9yuv/

----- EDIT

To adapt the chart to fit your container, you can utilize chart.reflow() whenever the window is resized.

Demo: https://jsfiddle.net/BlackLabel/kned9yuv/3/

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

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

Focusing on a specific input category inside a div container

Struggling to customize the appearance of the last input type within the Jetpack plugin in WordPress. I have experimented with the following CSS: #subscribe-submit > input[type="submit"]::last-of-type { #subscribe-submit > input[type="submit"]:nth- ...

css

Sitelinks and a brief description appear beneath the website name when it is displayed in search

Is there a way to incorporate "metadata" (green and red lines in the image below) into a website? I might not have the correct term for it, so my apologies in advance. I attempted changing the following tag in the index.html file, but I am uncertain if thi ...

htmlmeta-tags

Having Trouble Positioning Button at Bottom of Browser with Absolute Positioning in HTML and CSS

I am encountering an issue with positioning an element (<button id="foo">FAQ</button>). The CSS code I have for the button is: #foo { position: absolute; bottom: 0px;/* I have also tried using different units */ left: 0px;/* same t ...

htmlcsscss-position

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

htmlcsscss-grid

Unable to modify the border color of the outline in MUI text fields

I am currently working on a React project using MUI and styled-components, but I am facing an issue with changing the outline border color of a textfield. Despite reading the documentation and attempting to overwrite the class names of the component, it do ...

cssreactjsmaterial-ui

Troubleshooting: Owl Carousel Issue in Laravel 5.8 with Bootstrap

After struggling to set up the owl carousel for some time now, none of the solutions I found seemed to do the trick. I started to question whether it was even possible or if there was a crucial step I was missing. Despite trying numerous solutions, I coul ...

laravelbootstrap-4owl-carousel

Integrate a Google Maps API Javascript into a Flex application

I'm trying to incorporate a Google Maps API JavaScript into my Flex Application, but I have been unsuccessful so far despite looking at various examples. If anyone has any tips or guidance on how to achieve this, I would be extremely grateful for you ...

htmlactionscript-3apache-flexgoogle-maps-api-3dhtml

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

On a page, there is a form that consists mostly of plain HTML. One section of the form creates a quite complex multidimensional object using JavaScript. Usually, if I wanted to include a variable in the POST request, I would add an <input type="hidden" ...

jqueryhtmljsonpost

What is the process for transferring a JavaScript file (containing multiple functions) from the server to the client side?

I am looking for a way to hide the server-side functionality from the end user in order to maintain privacy. I have not been able to find a solution for this issue thus far. Currently, I have a .js file containing functions that are used within an html5 f ...

javascriptjquerynode.jshtml

Divide the screen evenly with a split, where one side is filled with an image

As a newcomer, I'm curious about how to split the screen in half with a form on the left and an image taking up the full height on the right. Is there a simple way to achieve this? For reference, here is a link showing exactly how I envision it: Exam ...

cssbootstrap-4

Animating Brightness and Contrast in CSS

I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time. For ex ...

css

Can a viewport be designed with a minimum width?

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport"> When viewing a website on a normal desktop, the window width is typically 1000px or more. However, on an iPhone, it's important to ensur ...

iphonecss

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

Animate the jQuery display property to show a table without changing any specified spatial dimensions

When utilizing jQuery's $.animate() on an element styled with display:table, any spatial dimensions that are not explicitly specified to change will animate. Check out the fiddle here In the scenario presented, the width is defined for animation, bu ...

javascriptjquerycssjquery-animatecss-tables

Angular 5 and Bootstrap card with enhanced double-click functionality

I want to design a Bootstrap card that can trigger two of my custom methods. <div (click)="TEST1()" class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <button (click)="(T ...

htmlangulartypescriptbootstrap-4

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

javascriptcssangulardrag-and-droptranslate3d

Implement a transition effect for the onClick event of a div element

I am looking to create a smoother transition effect when clicking on the section, causing it to expand and display the text underneath. I want to make this transition slower and more seamless. My current attempt at adding a transition to the "active" clas ...

javascripthtmlbootstrap-4css-transitions