Adding a canvas inside a container that has a height set will result in scrollbars appearing

I am experiencing an issue with the canvas tag. I am trying to append it into a parent div, but when I set specific dimensions for the parent and embed the canvas tag, scrollbars appear. However, when I try the same thing with a regular div, it works fine. Here is a link to the fiddle:

https://jsfiddle.net/57yovrkx/4/

Here is the code snippet:

$(function() {
  var content1 = $('#content1');

  var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
  content1.append(div);

  var content2 = $('#content2');
  var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});

  content2.append(canvas);
})
* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
#wrap1, #wrap2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0; 
  overflow: auto;
}

#wrap1 {
  top: 0;
  bottom: 50%;
}

#wrap2 {
  top: 50%;
  bottom: 0;
}

.header {
  flex: 0 0 2rem;
  background: darkgrey;
}

#content1, #content2 {
  flex: 1;
}

#content1 {
  background: lightblue;
}

#content2 {
  background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap1">
  <div class="header">
    Some header
  </div>
  
  <div id="content1">
    
  </div>
</div>

<div id="wrap2">
  <div class="header">
    Some header
  </div>
  
  <div id="content2">
    
  </div>
</div>

Can anyone explain why this is happening?

Answer №1

By adding canvas.style.height = '100%'; before attaching the canvas, it appears to solve the issue.

Check out this helpful link for more information

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

Updating presence of HTML tag link based on ng-if condition

HTML: <a data-ng-if="price" data-ng-click="selected(price)"> <div> ... </div> </a> i am trying to figure out how to remove the <a></a> element when data-ng-if="!price" Can anyone provide guidance on th ...

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

Having difficulty converting an object into an iterable using an arrow function

Currently immersed in learning JavaScript, I successfully created a class and now find myself faced with the task of making it iterable. The Group class represents a collection of values, akin to a Set, equipped with methods for adding, removing, and che ...

The image begins rotating only after the second click has been made

Having trouble with jQuery and rotation effects on an image? I have a solution for you. The image should rotate while toggling at the same time, but there's a twist - on the first click, it won't rotate but will still toggle. From the second clic ...

Struggling with incorporating a search feature? Encounter the error message "TypeError: data.filter is not a function"?

UPDATE: here is what console.log(data) shows. The data appears correctly, but the filtering process seems to be malfunctioning.] !https://imgur.com/a/SsEDAKj! UPDATE 2: this.state.items represents an array. I am currently working on integrating a search ...

Tips for positioning dynamic high charts in a bootstrap row

I have implemented HighCharts for displaying charts on my website. Specifically, I am utilizing the chart type solidgauge. The charts are dynamic and I am looking to arrange them horizontally across the page. My goal is to align the charts in a layout sim ...

React Bootstrap Hamburger Menu in Motion

I've been struggling to move my hamburger menu to the right side of the screen. Despite trying various methods like float, shift right, and alignment, the menu stubbornly remains on the left. I've scoured all the Stack Overflow articles on this i ...

Guidelines for incorporating a router into the title of a Vuetify.js toolbar

I am currently utilizing vuetify.js in my project and I encountered an issue. I wanted the application title to link to the top menu, but when navigating to /route shop and /discount, the HogeHoge button's state changed unexpectedly. Is there a soluti ...

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

Maintaining form data while dynamically including more instances of a <div> element to the form

I am currently developing a SpringMVC Webapp with a view that contains a dynamic form. The dynamic elements of the form are listed below: At the moment, I am passing the variable ${worksiteCount} from my controller to the view (stored in my portlet sessio ...

authorization for certain express routes using passport.js

Securing certain express routes with Passport.js authentication Steps for authenticating specific routes in Passport.js Looking for a method to authenticate particular routes using Passport.js Your assistance is greatly appreciated... ...

"Setting up a filter for the first row in an Excel-like table using a pin header

Does anyone know how to create a table filter in Excel where the header and first row stay pinned while scrolling down, even after applying filters? Here is a JSFiddle demonstrating the issue: http://jsfiddle.net/6ng3bz5c/1/ I have attempted the followi ...

What are the steps to modifying the material characteristics of a model loaded using OBJ + MTLLoader?

After successfully loading an .obj model along with its corresponding .mtl file to correctly map the materials onto the model, I noticed that the loaded model appears very dark. To brighten it up, I attempted to change the emissive color to white but encou ...

Numerals are warping inside the realm of Divination

When the numbers in my div reach more than 100 thousand, they start squeezing together like 11295551.25 <div class="col-2 text-right pr-0 "><%# Eval("CreditLimit", "{0:c}").ToString().Replace(".", ".&l ...

Error: Attempting to access property 'setData' of an undefined object results in a TypeError [Slider]

I encountered an error with my slider that says Uncaught TypeError: Cannot read property 'setData' of undefined. The error occurs when I use material ui as a component along with redux-form. This issue happens specifically when the slider is bein ...

Incorporate dynamic rules into a CSS stylesheet

I am trying to dynamically add a rule to my CSS for each element. Each rule should have a different background-image and name. However, I seem to be encountering an issue where the dynamically added div is not linking to the dynamically added CSS rule. I&a ...

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

How can I make TypeScript properly export function names for closure-compiler?

Here is the TypeScript code I am working with: namespace CompanyName.HtmlTools.Cookie { export function eraseCookie(name:string, path:string) { createCookie(name, "", path, -1); } export function readCookie(name:string) { ...

Need help maintaining selected div in navbar as active even after page refresh?

I've been struggling to maintain the selected tab as active on page reload. I have tried various solutions found here but none seem to work for me. Currently, the active class is applied correctly when clicked, but upon navigating to a new page, it re ...

Tips for getting the jQuery accordion to return smoothly to its original position (instead of stacking on top of each other)

I'm a complete beginner at this and could really use some assistance. Here's my JS Fiddle: http://jsfiddle.net/hAZR7/ The problem I'm facing seems to be more related to logic or math, as the animation works fine when starting and moving to ...