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.
Related
I'm calculating a width of a div and setting it using javascript. But occasionally on safari on the mac it will not render the size. Even though I clearly have the width style on the element and no important statements overriding it the calculated width remains 0. It's really strange and only happens occasionally. See screenshot.
http://i.imgur.com/XGfjxCe.jpg
Has anyone had this problem before or could please offer any suggestions?
Thanks
Edit js code
setResizeFlag = function(){
resizeComplete = true;
clearInterval(periodicalResize);
windowSize = window.getSize();
siteWidth = header.getSize().x;
content.setStyle('width',siteWidth + 'px');
}
window.addEvent('resize', function(){
resizeComplete = false;
if(periodicalResize) clearInterval(periodicalResize);
periodicalResize = setResizeFlag.periodical(500);
});
I'm creating a mobi site and would like to set the height of some of my elements to a multiple of the width, sorry if I'm not coming off clear enough here is an example of what I want to do.
#myDiv{
width : 40%;
height : width * 1.4;
}
I initially was just going to set the height to +-50% but I later realized I loose the aspect ratio depending on the screen size of the phone.
#cinnanon is right, this can't be done with CSS alone.
You could use jQuery (javascript), although this is probably not the best practice for building a responsive site:
var adjustHeight = 1.4;
$(document).ready(function () {
$('div').css('height', ($('div').width() * adjustHeight));
});
$(window).resize(function () {
$('div').css('height', ($('div').width() * adjustHeight));
});
http://jsfiddle.net/philsinatra/pqz59/
How can I accomplish this?
I have an iframe inside a column (html table), but I want to make the td as high as the doc inside the iframe.
Is it possible?
Here is the answer ( in JQuery).
in jQuery :
$("#myIframe").on("load", function ()
{
$(this).parent("td:first").css('width', $(this).css('width')).css('height', $(this).css('height'))
});
You need to calculate the height of the content using Javascript.
You can see a working example here:
http://th.atguy.com/mycode/iframe_size/
I'm using this piece of code in 2 projects, it works ok for me. I don't know if there is a better way to achieve this (note that this code has a setInterval, it will check the iframe's content height each 1 second and update its heights). It uses jQuery too.
let iframe = document.getElementById('your_iframe_id'),
current_height = 0,
iframe_content = $(iframe).contents().find('body');
setInterval(() => {
let new_height = iframe.contents().find('body').height();
current_height = new_frame_height(current_height, new_height);
iframe.css({ height: current_height });
}, 1000)
function new_frame_height(last_height, height) {
if(height != last_height + 60) {
last_height = height;
}
return last_height + 60
}
By the way I think this only works if the iframe is under the same domain from the parent.
If they are not, the cross origin block from the browser will not allow the parent to read the children's content.
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);
});
I've put together several reports which render exactly as I'd like them to in the preview in Visual Studio, but when I view them in a web browser, they render as required initially but are quickly squished into the left half of the browser window by the viewer. The zoom level is set to 100% - setting it to Page Width zooms the report out to fill the page but it doesn't correct the line breaks it has made when the initial 'squish' happens.
Does anyone know how to prevent the viewer from doing this resize?
Also, does the ReportViewer automatically disable the maximize button on its parent browser window? I'm quite new to all this....
Thanks, Dan
The report shrinking problem in CHROME when using SSRS 2005 can be solved by the following solution. It works ALWAYS, even if you have more than one page and if you export your report.
Steps to follow:
Open Page Footer
Drag a rectangle on it
Set rectangle Location as:
Left = 0
Top = 0
Set rectangle size as:
Width = "the Width of your report"
Height = 0.1
By the above settings, the rectangle will not show.
The way we do it in my company is to insert a Page header, drop a line component on it, make it the same width as the report, and of a neutral colour that won't be displayed on run time (printing).
The accepted solution above won't work in all the cases, especially when you set up a subscription to send the report by email to the client.
Our fix was to increase the Height and Width by Javascript:
var t1;
function manageWidthReportViewer(behID) {
t1 = window.setInterval("SetWidthForCrome()", 1);
}
function SetWidthForCrome() {
var mainReportViewer = document.getElementById('iFrameMainReportViewerContainer');
var reportFrame = mainReportViewer.contentWindow.document.getElementById('ReportFramereportViewer');
var report = reportFrame.contentWindow.document.getElementById("report");
if(mainReportViewer.contentDocument.getElementById("reportViewer") != null)
mainReportViewer.contentDocument.getElementById("reportViewer").childNodes[2].childNodes[1].childNodes[1].style.float = "left";
if (report!=null && report.contentDocument.getElementById("oReportCell") != null) {
report.contentDocument.getElementById("oReportCell").style.width="100%";
window.clearInterval(t1);
}
}
function SetReportViewerDim() {
var controlPanelHeight = screen.availHeight - 210;
var mainReportViewer = document.getElementById('iFrameMainReportViewerContainer'); //set
mainReportViewer.removeAttribute('height');
mainReportViewer.style.height = (controlPanelHeight-37) + "px";
var reportViewer = mainReportViewer.contentWindow.document.getElementById('reportViewer'); //set
reportViewer.style.height = (controlPanelHeight) + "px";
var reportFrame = mainReportViewer.contentWindow.document.getElementById('ReportFramereportViewer');
if (Sys.Browser.name == "Safari") {
manageWidthReportViewer(reportFrame);
}
}
After a lot more digging, I've found the solution to SSRS shrinking my reports.
For reference, you have to do three things
Delete the declaration from my hosting aspx page
Set the ReportViewer's AsyncRendering property to false.
Set the ReportViewer's Width property to 100%
Apparently there is a bug in SSRS 2005 with its XHTML rendering engine which is now fixed with the engine rebuild in SSRS 2008.