I'm working with Chart.js version 2.8 so not sure if it is in the version or if it is a common issue.
My chart loads fine at first but then my page refreshes and the duplicates can be seen when I hover on any of my charts(there are 4).
The duplicate looks like this:
!https://postimg.cc/3db6xFTz
I'm not sure what to try or where to start looking at what causes this. I've tried searching for similar cases but no one seems to have this issue. Any advice would be greatly appreciated.
Right, well I found the problem and the solution.
The root of the issue came about when my page refreshed and the chart would resize. I then tried the Chart.defaults.global.maintainAspectRatio= false;command which worked but duplicated the X-axis tick labels.
The problem: These two commands cannot work together. It causes the duplication on hover.
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio= false;
The solution: found in the chartjs.org documentation.
Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example):
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false.
I added the div's to encase my canvas, changed the sizing and this fixed my problem :)
I've created a responsive dropdown/drilldown megamenu in Foundation 6.5.3.
It works great in every browser except Microsoft Edge and IE11. I expected problems in IE, but the edge issues threw me for a loop.
In Edge, the menu items get stacked vertically even though it is supposed to be a horizontal menu. As illustrated by this pen:
https://codepen.io/denpub/pen/KLRQGO
right now the divs that wrap the menus and the one that wraps the large menu contain both the grid-x and cell styles:
<div class="grid-x cell ..."></div>
seems to be the what causes the stacking issue and if I separate these like so:
<div class="grid-x ..."><div class="cell"></div></div>
it fixes the stacking issue in Edge, but causes the menu to lose the nice flex spacing in all browsers as illustrated with this pen:
https://codepen.io/denpub/pen/KLRojm
In IE11 all the menu items stack on top of each other. If anyone has a suggestion to resolve this it would be greatly appreciated.
My guess is it's the expanded class on the parent menu. This could cause the li's to go full width when there is less space.
I can not get ChartJS to restrict itself to 200px. It takes the entire width of the browser. What am I missing.
I am using the following CDN
<div id="pnlChart" style="height:200px" >
<canvas id="myChart" width="400" height="200" class="chart" ></canvas>
</div>
my data that is being returned from the server appears to be well formed and drawing the chart correctly. It does not have the width/height in it. (I have pulled this from Chrome's dev tools.
{"type":"line","labels":[0,2,6,7,8,9,10,11,12,13,14,1,3,4,5,15,16,17,18,19,20,21,22,23],"datasets":[{"label":"Data","data":[2,1,8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}]}
You should be able to disable this container-width filling behaviour by telling Chart.js not to use responsive mode. Try passing this into the global configuration of the chart (the highest level of options):
options: {
responsive: false
}
See the Chart.js documentation for an example of how this fits into the full definition of a chart.
If that does not work for some reason then you could instead limit the width of the div element which contains the canvas on which your graph is drawn. Based on your example you could add this to your CSS:
div#pnlChart {width: 200px}
Even if you can get one of these methods to work, ideally you don't want to be specifying fixed widths for items these days because it makes it harder for pages to display well on the myriad of device screens which are in use now.
It's much better to develop a responsive layout for your site which will adjust to suit any screen width, from small smartphones to large desktop monitors. Search online for guides about "responsive design" for articles about this subject.
I'd like to add an image to the web page down the y-axis. This image would need to repeat, so I thought a background image would work best. As you'd expect I'm having trouble telling the CSS how tall the page is, especially with dynamic content from WordPress.
<div class="overlaid-image"></div>
<section class="green">Section content</section>
<section class="red">Section content</section>
<section class="blue">Section content</section>
I put together a fiddle to help explain: http://jsfiddle.net/15wc2noe/
Currently, unless I give the DIV a specific height, it won't travel down the full length of the page.
The goal is to get the repeating image to follow down the y-axis of the page to the bottom, without hard coding the height.
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.