I've finished making my graph and have moved onto trying to put it into a <article> tag the thing is when I resize my page it gets messed up and stops fitting inside of the tag, is there anyways to fix this?
Screenshots:
Code:
<article>
<canvas id="myChart" style="width:676px;height:300px;"></canvas>
<!-- if there is a way It would be cool for it just to fill to the article -->
</article>
var myChart = new Chart(ctx, {
type: "line",
data: {.....},
options: {...}
article {
display: flex;
height: 300px;
background: var(--page-content-blockColor);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
What I've Tried:
responsive:true,
maintainAspectRatio: false
Thanks User: Ezra Siton,
Changing to using VH and VW seemed to work for me!
:)
(posting this so i can close the question)
Related
I have a question, how can I create a costume pop up,so when user visit it show on screen for some minutes.
I have tired creating a pop that show image and text when visitor come.
You can do something like the following
Create an element with a unique id and place it where you want in
your template
Style the element with CSS
Use JavaScript to hide the element after a desired time
Here is the code
<div id="msg">welcome, I will disappear after 5 sec</div>
<style>
#msg {
position: fixed;
padding: 2em;
background: black;
color: white;
z-index: 100000;
}
</style>
<script>
setTimeout(function(){
document.getElementById('msg').style.display = 'none';
}, 5000);
</script>
Sice i managed to implement Fullcalendar's functionality into my Django app, I have another question.
Is it possible to render more than one Fullcalendar into my html page, depending of how many Calendars are made inside the database. And, i need them to be rendered HORIZONTALLY.
I suppose that i need to change my div's id to 'calendar2' for example. But what should i change inside the initializer?
This is full script and style from my calendar.
<script>
document.addEventListener('DOMContentLoaded', function () {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
minTime: "07:00:00",
maxTime: "22:00:00",
businessHours: {
startTime: '08:00', // a start time (10am in this example)
endTime: '21:00', // an end time (6pm in this example)
},
height: 'auto',
locale: 'sr',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
defaultView: 'timeGridDay',
header: {
left: 'today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: false, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{% for i in events %}
{
title: "{{ i.event_name}}",
start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i" }}',
end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
},
{% endfor %}
]
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<body>
<div id='calendar'></div>
</body>
I'll pass the answer from the comment section.
Just create as many div elements as you need, and attach a calendar to each one (let calendarEl = document.getElementById('calendar'); controls which element the calendar is attached to, so you just need that to be dynamic, or repeated).
And flex style helped me to put the next to each other, horizontally
I have a chart js bar chart that draws within the canvas:
<canvas id="chart" width="800" height="400"></canvas>
However I would like the chart to fit the size of the current window. I have tried:
<canvas id="chart" width="100%" height="400"></canvas>
but it does not like it. I could get the window width using window.innerWidth but is there any reason why the 100% does not work?
Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below:
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
or you can set the canvas width and height using client side code:
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties
After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:
html
<div class="panel">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
scss:
.panel {
display: flex;
.chart-container {
position: relative;
flex-grow: 1;
min-height: 0;
}
}
Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):
I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:
html, body {
height: 100%;
background: url(../img/bg.png);
font-family: 'SansationRegular', Helvetica;
}
.wrap {
width: 100%;
height: 100%;
height: auto !important; (apparently this fixes the issue in Chrome)
margin:40px 0px 0px 0px;
padding:0;
}
Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.
Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.
Any ideas/hints are highly appreciated at this point! :)
Many thanks in advance!
P.S. I use Twitter Bootstrap as well in case that helps to solve my problem
Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.
http://jsfiddle.net/QXZuy/1/
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
</div>
html, body {
height:100%;
}
.wrap {
height:100%;
width:100%;
display:table;
overflow:auto;
background:#ccc;
}
.sidebar {
display:table-cell;
width:25%;
background-color:blue;
}
.content {
display:table-cell;
width:75%;
background-color:red;
}
When the user clicks the like button a comment box pops up that has a width of 450px. This is too large for the space I have available. As far as I can tell, this comment box does not seem to respond to the "data-width" property I had set here:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="290" data-show-faces="false">
...so I had been forcing it with my css to this size:
iframe.fb_ltr { max-width:290px !important;}
All was good until it seems something just changed and this is no longer viable because the width of 450px is now being set within the iframe with this new? class:
<div class="fbpf pluginLikeFlyout pluginLikeFlyoutFull pluginLikeFlyoutFullButton">
.pluginLikeFlyoutFull {
top: 24px;
width: 450px;
}
Bottom line, is there another way to set the width of the comment box so it doesn't default to 450px?
Thanks,
Matt
I added this to my css:
div.fb-like.fb_iframe_widget > span {
width: 100% !important;
}
div.fb-like.fb_iframe_widget{
width: 100%;
}