Hi i have a problem in my jqgrid when i am clicking the pane the grid size is not resizing .how to resize it ?.
Not sure if this is what you mean, but this should keep your grid at 100% width:
$(window).bind('resize', function() {
$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
The above answer was good, but this solves both problems.
Resizing now and Resizing when the window or IFrame gets resized.
// Size me now...
$("#list1").setGridWidth($(window).width());
// Size me later...
$(window).bind('resize', function () {
$("#list1").setGridWidth($(window).width());
}).trigger('resize');
Happy coding!
Related
I need to set a div height based on screen resolution. I am using angular 5 for coding. Even when the screen is zoomed in or zoomed out the div height should fit the place
This is my html part
<div [style.height.px]="divHeight">
</div>
And in my ts file
this.divHeight= window.innerHeight - 202;
This works only when my screen is 100% zoom. I need the div height adjusted even when the screen is zoomed in or zoomed out. Plz help me out.
Why not just use the vh property -- perhaps with calc?
div.thatShallNotBeNamed {
height: calc(100vh - 202px);
}
Edit:
vh stands for "view height." It also has a corresponding property for "view width" called vw
Window.innerHeight work for even zoom out and zoom in as well.
I assume the problem your are facing is you are not resetting height for div when you zoom in or out, you can use host listener for this purpose.
#HostListener("window:resize")
onResize() {
this.divHeight = window.innerHeight - 202;
}
When the soft keyboard is opened in android the viewport is automatically resized to fit the screen (device height - keyboard height). In iOS7 the viewport is simply pushed up (the top half just doesn't get displayed).
While it might be the desired behavior for some apps, it doesn't work well for me - the top nav bar gets hidden, and my content is a scrollable div - I want the user to be able to scroll all the way up.
Resizing the body manual when the keyboard opens/closes results in jittery behavour
Any idea how to solve this?
I was having exactly the same requirement. The solution was a mix of reducing body height when the keyboard is shown and fixing the shifting of the content area. This is how the code would look like using jQuery:
$(document).on("focus", "input, textarea", function() {
$(‘html’).addClass("keyboard");
setTimeout(function() {
window.scrollTo(0,0);
document.body.scrollTop = 0;
}, 0);
});
$(document).on("blur", "input, textarea", function() {
$(‘html’).removeClass("keyboard");
});
And the corresponding CSS:
body {
position: absolute;
top: 0;
bottom: 0;
}
.keyboard body {
bottom: 240px; /* exemplarily value */
}
The bottom value needs to be adjusted to match the correct keyboard height on iPhone portrait, iPhone landscape, iPad portrait and iPad landscape.
I havn't tested this code in a while, so maybe you could check whether this works for you without any flickering? If I remember correctly I had slight flickering in Mobile Safari, but it worked fine within the native WebView.
I'm using this CSS-only strategy for responsive background images and responsive background image and contained content ... an example of the type of setup I'm using for background and content:
<div class="fullscreen-cont">
<div class="fullscreen-img"></div>
<div class="cont-content-a">
<div class="cont-content-b">
Example content
</div>
</div>
</div>
.cont-content-a {
display:table;position:relative;z-index:2;
width:100%;
height:100%;
}
.cont-content-b {
display:table-cell;
vertical-align:middle;
text-align:center;
}
I edited the above code to just include the styles for the content. Click the link above to see the full strategy and styles.
The main page I'm working on essentially a logo, text input with inline button, and login button below. Both the logo and login button are positioned absolutely. Everything looks great on a mobile device.
The problem occurs only if the user touches to input text. The keyboard shrinks the viewport and therefore, the background image, squishing and overlapping all the contained content.
Does anyone know if there's a way to disable the viewport resize when the keyboard is opened on mobile devices? And is there a way to accomplish this without mobile jQuery?
Usually if you do not use Jquery mobile then you will have to manually fix all the bugs coming with different phone OSs. If you want to skip this library you will have to listen to viewport resize change event and through listening to it get the remaining height and width of the viewport.
trigger a function according to viewport change like this
$(window).resize(function()
{
});
and inside that get the viewport width height and then adjust the layout accordingly.
$(window).resize(function()
{
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
//do your layout change here.
});
In case someone is actually OK with the jQuery solution:
jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width();
jQuery(window).resize(function(){
var viewportWidthResized = jQuery(window).width();
if (viewportWidth !== viewportWidthResized) {
// do the work
viewportWidth = viewportWidthResized;
}
});
});
It looks like you could simplify your HTML/CSS and that might resolve your problem.
Why not just add your background-image stuff to and then remove all those extra tags. Down forget to set your viewport meta tag. i always start with this and then change it as needed.
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
This is my container:
.test {
height: 100vh;
}
update: This actually works without problem in firefox.
Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:
However, when I resize the browser window vertically, the .test div is not updated - see image below.
To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy
Should I resize the window horizontally however, the height resets to the correct viewport height.
one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.
And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.
causeRepaintsOn = $("#yourTagIdWithFontInVM");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
This is the link where I found the above solution. Link
This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:
html, body {
margin:0;
padding:0
}
Well I am working on an small website.
However I have problem with fixed position.
My header is 770px in width. It contain a couple of elements with it.
position: fixed; works really fine, but when I resize my website to another screen size, something like 640x480 the fixed element (header) cannot be fully visible in width.
I want it to be fixed for scrolling but I want it to be fully visible in width, if user is on smaller screen and cannot see it completely.
Here is an example on an wordpress theme.
http://dvl-den.net/
Same problem is with my small project. Try to open that website on 640x480 (resize browser) and you'll see my problem.
Thanks in advance.
I don't think there is a solution with CSS only properties. I'd try having position: absolute; on my CSS, and playing around JavaScript (my example requires jQuery) like:
jQuery(function($) { // document ready
var $win = $(window),
handler = function() {
// try not to overload browser, creating a throttle
var throttle,
throttleFn = function() {
// this is what happens on window resize
$('#header').css({
top: $win.scrollTop()
});
};
return function() {
clearTimeout(throttle);
throttle = setTimeout(throttleFn, 100);
};
};
$win.resize(handler());
});
It doesn't work really "cool" in mobile, but it's widely know there are mobile issues with fixed headers in web apps (different than native). If you need I can update with a JSFiddle example.
Check demo at: http://jsfiddle.net/qaKT7/ (you can play around with that 100 value to get a better experience, and also use .animate() instead of .css() to make it look fancier)
Try giving
min-width:770px;
or try with media queries
I think there're two ways:
Changing the width "770px" to a percentage.
Detecting the pixel height of screen, then adjusting the width according to this.