Creating a scroll bar that overlaps a chart within a div

I am currently working on implementing a button that generates a report by plotting some charts. Initially, these charts are hidden until the button is pressed. I am utilizing Bootstrap for the design, and as a result, the scrollbar is also hidden. Upon clicking the button, I use the show() function to display the divs containing the charts and call the chart render function. However, after the divs are displayed, the scrollbar appears but the chart.reflow() function seems to be inaccessible and does not trigger, causing the exporting button and credits to be cropped by the scrollbar.

For reference, here is a link to the code: https://jsfiddle.net/bernardo0marques/m6jqa79r/24/

A temporary solution I found is manually resizing the window, which triggers the .reflow() function and fixes the issue. Does anyone have any suggestions or workarounds for this problem?

javascriptjquerycsshighchartsbootstrap-4

Answer №1

It seems like the issue you are facing is not caused by triggering the chart.reflow function. Upon reviewing the provided demo, it appears that you are attempting to trigger chart.reflow before the chart has been properly initialized. I recommend checking your browser's developer console for more details.

Upon further investigation, it appears that the positioning of your button is actually the root cause of the problem. By using the style="float: left;" attribute, you are setting the button's position within the window, which is also a container for the chart. This can lead to complications when calculating the initial positions of certain chart elements. You can view a more illustrative demo of this issue here: https://jsfiddle.net/BlackLabel/L70xh95g/

To resolve this issue, I suggest finding alternative CSS styles that do not interfere with the chart rendering process. When using a regular block pattern, everything should function correctly:

https://jsfiddle.net/BlackLabel/dwrje7f0/

Simply removing the style="float: left;" attribute should help mitigate the problem.

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 a dynamic JQuery navigation menu directly from a MySQL database table

I am looking to dynamically populate the menu on this website (http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html) with values from a MySQL table. Essentially, when the user clicks on the top menu button, I want the menu items to be rows ...

phpmysqljquery

What is the process for adjusting the position following the modification of a table value in React?

In my React UI, I have set up two text fields for entering values. After saving the values, they are displayed in a table below (designed with antd). When I click on a record in the table to edit it, I want the data from that record to populate the text f ...

javascripthtmlcssreactjsantd

Exploring Problems with Implementing the Jquery .click() Function on a Class

My goal is to create a simple JQuery code that triggers a pop-up message saying hello when any element of the specified class is clicked. Here's what I've tried: $(document).ready(function(){ $(".thumb_radio").click(function(){ aler ...

jqueryhtml

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

Hello, I am curious about how to change the z-axis of a paper from MUI. https://i.sstatic.net/iKXLG.jpg The issue I'm facing is that the carousel is overlapping my menu and I need the menu to be on top of everything. Here is how I have it structure ...

javascriptreactjsmaterial-ui

Retrieve components of Node.js Express response using axios before terminating with end()

Is there a way to receive parts of a response from my nodejs server before res.end() using axios? Example: Server router.get('/bulkRes', (req,res)=>{ res.write("First"); setTimeout(()=>{ res.end("Done"); },5000); }) Cl ...

javascriptnode.jsexpress

Mastering parameter passing in Node.js functions: A comprehensive guide

As I embark on my journey with node js (refer to the question), please be patient as I navigate through this new territory. To clarify my query, I have developed a function to be invoked in another JS file: exports.test = function(req, res){ connection ...

javascriptnode.js

The Vue CLI build is displaying a blank page when hosted on an Apache server

I encountered an issue with vue cli. Running npm run serve went smoothly, but when I tried dev mode using npm run build-dev, the build process finished with a blank page displayed. The error message received was "Uncaught SyntaxError: Unexpected token &ap ...

javascriptnode.jsvue.jsnpm

Guide on displaying an array object in MongoDB using React

I'm having trouble figuring out how to display certain data from my MongoDB schema in a React component. Here is my MongoDB schema: const postSchema = new mongoose.Schema({ userID: { type: String }, dateTime: { type: Date, default: Date.now } ...

javascriptreactjsmongodbreact-redux

What is causing the ERR_HTTP_HEADERS_SENT('set') error when running on Windows Server, but not on my development machine?

Currently, I am in the process of developing a Node/Express application that will integrate with ActiveDirectory. The login form is designed to post the username and password to a specific /auth route, where the AD authentication takes place, along with se ...

javascriptnode.jsexpressactive-directorywindows-server

Unlocking the value of input types in a dynamic table with jQuery

I am currently developing an ecommerce website. In my project, the table is populated with values from a session. See how it looks here: https://i.sstatic.net/C3CtW.png When a user reaches the Checkout page, I need to retrieve all the values from the tab ...

phpjquerydynamic-tables

Unleashing the Power of Vuejs: Setting Values for Select Options

I have a specific requirement in my Vue application where I need to extract values from an XLS file and assign them to options within a select dropdown. Here is what I currently have: <tr v-for="header in fileHeaders" :key="header"&g ...

javascriptvue.js

Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust aro ...

cssreactjsmaterial-ui

Using jQuery to scroll a div element

Having some trouble trying to manipulate the scroll of a div using jQuery. Can't seem to figure out where I'm going wrong. This is the code snippet I am currently working with: $("#CategoryList").animate({ scrollLeft: "=-5" }, "slow"); The ID ...

javascriptjqueryhtml

Redux actions do not cooperate with functions, preferring to be implemented inline instead

I am a beginner in Redux and JavaScript and just came across this issue, When I use the line dispatch({type: 'REQUEST_START'}); it works fine, but when I write it like this: dispatch(requestStart); No actions are being fired! Any suggestions ...

javascriptreduxactiondispatch

What is the best method for resizing an SVG according to the size of my website's window?

I am attempting to implement a scalable settings icon SVG file that adjusts based on the window width. My approach involved creating a JavaScript function that alters the element's dimensions according to the window size, but unfortunately, this metho ...

javascripthtml

Alter the background color of a React application with a single click in a spontaneous manner

When I attempted to change the background color of the entire page randomly by clicking a button, it only changed the background of the div element. Here is the code snippet I used: import React from "react"; class Home extends React.Component { ...

javascriptreactjs

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

javascriptcssreactjstypescriptmaterial-ui

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

The onclick event seems to be malfunctioning on the website

My goal is to implement a modal box that appears when a user clicks a button and closes when the user interacts with a close button within the modal box. I have created two functions for this purpose: check() : This function changes the CSS of an element ...

javascriptcsshtmluser-interface

The type does not have a property named 'defaultProps'

I have a Typescript React class component structured like this: import React, { Component } from 'react'; interface Props { bar?: boolean; } const defaultProps: Partial<Props> = { bar: false, }; class Foo extends Component<Props& ...

javascriptreactjstypescripteslint