I am trying to set a kendo grid height to 100% . I did it before on a regular mvc project and its work ok but it is not working on mobile. Here what I am doing:
http://dojo.telerik.com/UVuDe
Thanks in advance
have you tried using data-stretch="true" on the view?
http://dojo.telerik.com/IKOLe
well this piece of code seems to work in your dojo http://dojo.telerik.com/UVuDe/4:
function gridResize(size){
if (size == null || size == undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
windowHeight = windowHeight * size;
$(".k-grid-content").height(windowHeight);
}
I do have something a bit more generic/more configurable in another project if this doesn't work for you.
This will put the grid contents at a size of 60% of window's screen height in it's default state but you can configure this for your own needs.
Hopefully this gives you a starting place.
Any issues/changes you require let me know.
I am trying to create a banner that had 3 versions of 1 slide containing 1 image.
I know how to do this with display: none but that means all the content is loaded and it will effect load speeds on slow networks or mobiles.
I'm not a javascript or jquery wiz so the simpler the better please.
What i would like to do is:
on screen resolutions up to 620px
{Load this HTML }
on screen resolutions 621px to 920px
{ Load this HTML }
on screen resolutions 921px and above
{ Load this HTML }
Is this possible?
You could handle this with CSS screen queries but like you say it will load them all and hide them. So you would have to go down the route of JQuery me thinks.
I think the better way to do this's with CSS.
Per example, to make all images responsive:
img {
max-width: 100%;
height: auto;
}
check the another tricks>>
Or you can do this via #media's:
#media (max-width: 979px) {
(css here - widths < 979)
}
#media all and (max-width: 767px) and (min-width: 400px) {
(widths between 400 and 767)
}
#media all and (max-width: 399px) and (min-width: 0px) {
(widths between 399-0px)
}
Hope I helped.
"Is this possible?"
Yes, but in order to maintain code simplicity you'll need to use a different method: Send the user to one of three different pages depending on his screen width, instead of loading a new div in the same page. I'll explain how you can do it step by step. Here we go:
How to check the user's screen width with JavaScript:
if(window.innerWidth <= 620){
// The window width is less or equal to 620px.
}
if(window.innerWidth > 620 && window.innerWidth <= 920){
// The window width is greater than 620px and less or equal to 920px.
}
if(window.innerWidth > 920){
// The window width is greater than 920px.
}
You can also simplify this code a little bit if you store the window.innerWidth value in a width variable, like this:
var width = window.innerWidth;
Then you can use if(width > 620){/* Code here */} to check if the window width is greater than 620px.
Now you'll create two or more pages, each one with a modification and then send the user to another page if his screen size is X. To do so you'll only need to use location.href="#"; inside the above ifs and replace "#" with the other pages URL.
Handling page resize:
The above codes are examples on how you can check the user window width, but the browser will run this code when the page has loaded, one time only, but not when it's resized. To make this code run anytime the browser is resized you'll need to wrap these ifs in a function and call it using an EventListener, that'll say to the code when the browser is resized.
Final code result:
Here's the final code ported to a function, called inside an EventListener and sending the user to another page:
function checkWidth(){
var width = window.innerWidth;
if(width <= 620){
location.href = "#"; // The window width is less or equal to 620px.
}
if(width > 620 && width <= 920){
location.href = "#"; // The window width is greater than 620px and less or equal to 920px.
}
if(width > 920){
location.href = "#"; // The window width is greater than 620px.
}
}
window.addEventListener('resize', checkWidth);
checkWidth();
JSFiddle Demo
In (Android WebView HTML5 canvas error) i posted a question regarding plotting graphs using Graph.js library.
The problem i have now is that if i call the function to plot the graph multiple times, the canvas resizes every time. Each time the graph is redrawn to the same canvas, its size also changes.
I also tried setting the size of the canvas but without success.
What could be the reason? Why does the canvas resize every time?
I had a lot of problems with that, because after all of that my line graphic looked terrible when mouse hovering and I found a simpler way to do it, hope it will help :)
Use these Chart.js options:
// 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,
What's happening is Chart.js multiplies the size of the canvas when it is called then attempts to scale it back down using CSS, the purpose being to provide higher resolution graphs for high-dpi devices.
The problem is it doesn't realize it has already done this, so when called successive times, it multiplies the already (doubled or whatever) size AGAIN until things start to break. (What's actually happening is it is checking whether it should add more pixels to the canvas by changing the DOM attribute for width and height, if it should, multiplying it by some factor, usually 2, then changing that, and then changing the css style attribute to maintain the same size on the page.)
For example, when you run it once and your canvas width and height are set to 300, it sets them to 600, then changes the style attribute to 300... but if you run it again, it sees that the DOM width and height are 600 (check the other answer to this question to see why) and then sets it to 1200 and the css width and height to 600.
Not the most elegant solution, but I solved this problem while maintaining the enhanced resolution for retina devices by simply setting the width and height of the canvas manually before each successive call to Chart.js
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
This works for me:
<body>
<form>
[...]
<div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
<canvas id="cv_values"></canvas>
<script type="text/javascript">
var indicatedValueData = {
labels: ["1", "2", "3"],
datasets: [
{
[...]
};
var cv_values = document.getElementById("cv_values").getContext("2d");
var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
</script>
</div>
</form>
</body>
The essential fact is that we have to set the size of the canvas in the div-tag.
In IOS and Android the browser hides the toolbar when you are scrolling, thereby changing the size of the window which inturn lead chartjs to resize the graph.
The solution is to maintain the aspect ratio.
var options = {
responsive: true,
maintainAspectRatio: true
}
This should solve your problem.
I had to use a combination of multiple answers here with some minor tweaks.
First, it is necessary that you wrap the canvas element within a block-level container. I say to you, do not let the canvas element have any siblings; let it be a lonely child, for it is stubborn and spoiled. (The wrapper may not need any sizing restrictions placed on it, but for safety it may be good to have a max-height applied to it.)
After assuring that the previous conditions are met, when initiating the chart, make sure the following options are used:
var options = {
"responsive": true,
"maintainAspectRatio": false
}
If you want to adjust the height of the chart, do so at the canvas element level.
<canvas height="500"></canvas>
Do not try to deal with the child in any other manner. This should result in a satisfyingly, properly laid-out chart, one that stays in its crib peacefully.
As jcmiller11 suggested, setting the width and height helps.
A slightly nicer solution is to retrieve the width and height of the canvas before drawing the chart.
Then using those numbers for setting the chart on each subsequent re-draw of the chart.
This makes sure there are no constants in the javascript code.
ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;
function drawchart() {
ctx.canvas.width = ctx.canvas.originalwidth;
ctx.canvas.height = ctx.canvas.originalheight;
var chartctx = new Chart(ctx);
myNewBarChart = chartctx.Bar(data, chartSettings);
}
I had a similar problem and found your answer.. I eventually came to a solution.
It looks like the source of Chart.js has the following(presumably because it is not supposed to re-render and entirely different graph in the same canvas):
//High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
if (window.devicePixelRatio) {
context.canvas.style.width = width + "px";
context.canvas.style.height = height + "px";
context.canvas.height = height * window.devicePixelRatio;
context.canvas.width = width * window.devicePixelRatio;
context.scale(window.devicePixelRatio, window.devicePixelRatio);
}
This is fine if it is called once, but when you redraw multiple times you end up changing the size of the canvas DOM element multiple times causing re-size.
Hope that helps!
I was having the same problem. I was able to solve it by setting option:
responsive: false,
maintainAspectRatio: true,
showScale: false,
And in css, set the width of the container div the same as the canvas:
#canvasContainer {
width: 300px;
}
canvas {
width: 300px;
}
If anyone is having problems, I found a solution that doesn't involve sacrificing responsiveness etc.
Simply wrap your canvas in a div container (no styling) and reset the contents of the div to an empty canvas with ID before calling the Chart constructor.
Example:
HTML:
<div id="chartContainer">
<canvas id="myChart"></canvas>
</div>
JS:
$("#chartContainer").html('<canvas id="myChart"></canvas>');
//call new Chart() as usual
I tried to Resize Canvas using jQuery but it din't work well. I think CSS3 is the best option you can try on, if you want on hover zooming at certain level.
Following hover option from other codepan link:
.style_prevu_kit:hover{
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
Follow my codepan link:
https://codepen.io/hitman0775/pen/XZZzqN
Here is the official dokumentation: https://www.chartjs.org/docs/latest/general/responsive.html
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>
I had the same kind of scaling issue's using Angular CLI. Was able to get it working by removing this line from the index.html:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
and then in the angular-cli.json file, in the scripts section, using this:
"scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]
Source: mikebarr58
I tried multiple answers on this thread and what worked for me was that (Note I am using reactjs), checking my previous props passed into the chart component.
When I was resizing my DOM, the chart was getting re-drawn with empty data.
componentDidUpdate(prevProps: ChartProps) { if(prevProps.data !== props.data) renderChart(); }
The accepted - responsive:true, maintainAspectRatio:false - did not work for my scenario.
But I found we can simply call the update method on the chart.
So I found myself tweaking values inside matchMedia listeners .. like so:
myRadarChart.options.scales.r.pointLabels.font.size = "1rem";
myRadarChart.update();
For me it is working with max-height:none (chart.js v3.9.1 and ng2-charts v3.1.2):
<div *ngIf="shartData">
<canvas style="max-height:none" baseChart [type]="'pie'"
[data]="shartData"
[options]="chartOptions">
</canvas>
</div>
Without max-height the chart height becomes "1".
The same is relevant when using chart.js directly without ng2-charts:
<div *ngIf="shartData">
<canvas style="max-height:none" id="chartID">
</canvas>
</div>
let ctx = <HTMLCanvasElement>document.getElementById("chartID");
let chart = new Chart(ctx, {
type: 'pie',
data: shartData,
options: chartOptions
});
Add div and it will solve the problem
<div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>
let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
let width = canvasBox.clientWidth;
let height = canvasBox.clientHeight;
let charts = ReactDOM.findDOMNode(this.refs.charts);
let ctx = charts.getContext('2d');
ctx.canvas.width = width;
ctx.canvas.height = height;
this.myChart = new Chart(ctx);
I have a jqGrid at my web page. I have a resizing problem. When I restore down my web page, all the elements at my page resizes automatically however my jqGrid table doesn't. Actually I have edited my table's width as follows:
...
width:1000,
...
I want it has a minimum width but have a automatic resizing when I restore down (get more smaller) my web page.
How can I do that?
EDIT:
I tried thatbut I am not sure is this the right way:
confTable is my jqGrid id and content is the parent element's id of it.
$("#confTable").jqGrid('gridResize', { minWidth: 800, minHeight: 100 });
$(window).bind('resize', function() {
var gridWidth = $("#confTable").width();
var contentWidth = $("#content").width();
if (gridWidth > 0 &&
Math.abs(gridWidth - contentWidth) > 5) {
$("#confTable").jqGrid('setGridWidth', contentWidth);
}
}).trigger('resize');
I wanted to implement the solution here described. However setgridWidht and the lines of .attr() didn't work. Is my code browser compatible and what is the wrong can be while I was trying the implement the solution of that question?
PS:
It says: $("#confTable").setGridWidth is not a function. Actually I need to resize my jqGrid according to its parent's parent.
Here is a simple example you could try:
$(window).resize(function(){
$("#confTable").setGridWidth($(this).width() * .95);
});
Google Image Search returns Images of different sizes. even their Thumbs are of different size. But still they are arranged in such a way that keeps a clean margin. even resizing the browser keeps the left and right alignment proper. What I've noticed is they group a Page of Image into an ul and each image is in an li. not all rows contain same amount of images. But still how they manage to keep images of different sizes properly aligned ?
EDIT
Though I've accepted an answer Its not exact match. It may be a near match. However I still want to know What is the exact procedure they are doing. I cannot chalk out the pattern.
It seems that they wrap a page in a <ol> and put images in <li> But when I resize the images are redistributed among pages. But how many images the page <ol> should contain now is to be decided. What procedure can be used to accomplish that ? and also images are resized based on a standard height I think. and that standard height is changed on resize. How how much ? how that is decided ?
It's not exactly the same thing, but you might get some useful ideas about how to optimize image "packing" by looking at the approach taken by the jQuery Masonry plug-in.
They know how big each thumbnail is, since it's stored in their image database. They just make each <li> float left, and make them a fixed size based on whatever the largest image is within that section of images.
I've written a little plugin just to do that HERE you can watch it in action:
(function($){
//to arrange elements like google image
//start of the plugin
var tm=TweenMax;
var positionFunc= function(options, elem){
var setting=$.extend({
height:150,
container:$('body'),
margin:5,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
boxShadow:'0 0 0 #000',
borderRadius:0,
type:'img'
},options);
tm.set($(elem),{
'max-height':setting.height
});
$(elem).wrap('<div class="easyPositionWrap"></div>');
var winsize=setting.container.width();
var thisrow=0;
var elementsused=0;
var row=0;
tm.set($('.easyPositionWrap'),{
border:setting.borderWidth+'px '+setting.borderStyle+' '+setting.borderColor,
borderRadius:setting.borderRadius,
boxShadow:setting.boxShadow,
margin:setting.margin,
height:setting.height,
position:'relative',
display:'block',
overflow:'hidden',
float:'left'
});
$('.easyPositionWrap').each(function(index, element) {
if(thisrow<winsize){
thisrow+=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
else{
var currentwidth=thisrow-$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').width()-(setting.margin*2)+(setting.borderWidth*2);
var nextimagewidth=$(this).prev('.easyPositionWrap').width()+(setting.margin*2)+(setting.borderWidth*2);
var elems=$(this).prevAll('.easyPositionWrap').length-elementsused;
var widthtobetaken=(nextimagewidth-(winsize-currentwidth))/(elems);
if(widthtobetaken!=0){
if(elementsused==0){
$(this).prevUntil('.easyPositionWrap:eq(0)').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
$('.easyPositionWrap:eq(0)').width($('.easyPositionWrap:eq(0)').width()-widthtobetaken);
$('.easyPositionWrap:eq(0) '+setting.type).css('margin-left','-'+(widthtobetaken/2)+'px');
}
else{
$(this).prevUntil('.easyPositionWrap:eq('+(elementsused-1)+')').each(function(index, element) {
$(this).width($(this).width()-widthtobetaken);
$(this).find(setting.type+':first-child').css('margin-left','-'+(widthtobetaken/2)+'px');
});
}
}
elementsused+=elems;
thisrow=$(this).width()+(setting.margin*2)+(setting.borderWidth*2);
}
});
$(window).resize(function(){
clearTimeout(window.thePositionTO);
window.thePositionTO=setTimeout(function(){
$(elem).each(function(index, element) {
$(this).unwrap('.easyPositionWrap');
$(this).data('easyPositioned',false);
});
$(elem).easyPosition(options);
},200);
});
}
$.fn.easyPosition= function(options){
if($(this).data('easyPositioned')) return;
positionFunc(options, this);
$(this).data('easyPositioned',true);
};
//end of the plugin
}(jQuery));
$(window).load(function(){
$('img').easyPosition();
});
libraries to include:
jQuery
GreenSock's TweenMax