I'm running into an issue with the ModalPopupExtender when displayed on a small screen device. The modals height does not rescale to fit within the viewable window. Because it is centered the top and bottom of the modal gets clipped. Trying to scroll it only scrolls the underlying page not the modal. Anyone run into this or have suggestions on a fix?
You have to set Po-pup's panel to use scroll bars.
There is 2 way of doing this :
Set a fixed height (ex : 500px) and overflow to auto using CSS.
Compute the height pup-up using JavaScript, you still have to set the overflow to auto with CSS.
Here an example of a JavaScript function that set the height to 90% of the page's height.
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
I decided to handle it using a series of media queries....
.sModalCnt {max-height:480px;overflow-y:auto}
#media only screen and (max-height:600px) {
.sModalCnt {max-height:380px}
}
#media only screen and (max-height:500px) {
.sModalCnt {max-height:280px}
}
#media only screen and (max-height:400px) {
.sModalCnt {max-height:180px}
}
#media only screen and (max-height:300px) {
.sModalCnt {max-height:80px}
}
Related
Is it possible to make my web page open default in landscape mode in a mobile or tablet even if the orientation of screen is off using css3 media query or jquery ??
You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't).
Check for portrait orientation with CSS and rotate the body if necessary:
#media screen and (orientation:portrait) {
body {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
rotating the body in this way will not cause it's width and height to update to suit it's new orientation so we will have to correct this with JQuery:
function checkOrientation() {
var winWidth = $(window).width();
var winHeight = $(window).height();
if (winHeight > winWidth) {
$('body').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary
}
}
checkOrientation(); // Check orientation on page load
// Check orientation on page resize (mainly for demo as it's unlikely a tablet's window size will change)
var resizeEnd;
$(window).resize(function(){
clearTimeout(resizeEnd);
resizeEnd = setTimeout(checkOrientation, 100);
});
DEMO (resize the preview panel)
DISCLAIMER: Not tested in anything but Chrome.
I have a scroll to top jquery button that will scroll to top of page when clicked. I'd like to show this button only when scrolling is needed.
For example: if page/content height (not window height) is more than 980px, show the button. if less, hide the button.
How do i do this using pure css? Thanks.
I am not sure if you can do this using pure CSS. You can use media query to achieve this if it depends on window height. You can use something like this:
#media only screen and (max-height: 980px){
#your-button-id{
display:none;
}
}
If you want it to depend on your content's height you can use Javascript. The example I am giving your is in jQuery but you can do it without jQuery:
$(document).ready(function(){ // To make sure the DOM is loaded before you get the body's height
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
$(window).resize(function(){ // To make sure that when window is resized, if you have media querys that modify the css and probably the body's height, you still hide the button if the height is no more than 980px
if( $('body').height() < 980 )
$('#your-button-id').css('display', 'none');
else
$('#your-button-id').css('display', 'block');
}
}
UPDATE: You can show the button whenever the page content's height is greater than your window height. In this case the condition would be
if( $('body').height() <= $(window).height() )
I want user to be able to print a whole page with highcharts control in it with standard browser's Print functionality. But control is being cut off.
I wrapped control in .chart-wrapper div and try to set fixed width for printing:
#media print {
.chart-wrapper{
width: 1000px;
}
}
.chart-wrapper{
width: 100%;
}
But it does not work, and printed page looks like this:
If I set .chart-wrapper width to 1000px outside of #media print block chart will have 1000px width both on a page and printed page, but I need chart to take all width of non-printed page.
So how can chart be displayed with 100% width on non-printed page and with 1000px on printed page?
This worked for me.
<script>
(function() {
var beforePrint = function() {
chart = jQuery('#graphArea').highcharts();
chartWidth = chart.chartWidth;
chartHeight = chart.chartHeight;
chart.setSize(670,chartHeight, false);
};
var afterPrint = function() {
chart.setSize(chartWidth,chartHeight, false);
chart.hasUserSize = null; // This makes chart responsive
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
</script>
How it works: Detect 'before print' event, resize chart to 670px (a reliable width to print A4), detect 'after print' event and resize chart to original size.
Credits go to: TJ VanToll for detecting print event function, the people on this thread for highcharts resizing functions and this answer for suggesting the 670px.
Have you tried setting the screen width inside a #media screen css block ?
#media print {
.chart-wrapper{
width: 1000px;
}
}
#media screen {
.chart-wrapper{
width: 100%;
}
}
I'm trying to make a DIV width change as the browser size changes.
Not in some ratio that can be handled with percentage, but still with a dependency for the screen size.
I'm trying to make a div 80% max of the browser width, as long its divided by 20.
if screen is 1000px wide, so the div will be 800px, if the screen is 1024px so it will still be 800px (cause 80% of 1024 is 819.2, not divided by 20).
Except for doing a lot of media queries, I do not know how to do this.
This should hopefully get you on your way. It uses jQuery to resize the div by 20px increments. It's not perfect, but it's a start.
http://jsfiddle.net/ydtdS/3/
function tale(div,w) {
if(w%20==0) {
$(div).text(w);
$(div).css("width",w);
} else {
w = Math.floor(w / 20)*20;
$(div).text(w);
$(div).css("width",w);
}
}
$(window).resize(function() {
var windowWidth = $(window).width();
tale(".twenty",windowWidth);
});
tale(".twenty",$(window).width());
How can I prevent a div which contains a long list of items from expanding the page height. I want the div to take up the entire screen but no more so that it doesn't push the footer down.
Set an specific height for the div container, and also set overflow-y with auto in order to show the scroll bar only when the content of the div is larger than the height set in the container. Like this:
.container {
height: 500px;
overflow-y:auto;
}
Without js, it is not possible because your page can be viewed in different resolution. Different resolutions means different height. Matter of fact, you may want that behaviour when user resizes the browser window as well, am I right? So first, find out the height of the browser, subtract the height of the footer from it, and set this height to your container, which I believe you want to make scroll able on yaxis. That will solve the problem. All these tasks are pretty simple and you can do it by little googling.
Use JavaScript/jQuery for this:
jQuery Solution:
<div id="content-div">some content here</div>
$(document).ready(function() {
var height = $(document).height();
height = height - (your footer height);
$("#content-div").css({ 'max-height' : height.toString() });
});
Standard JavaScript solution:
<div id="content-div">some content here</div>
function myfunction () {
document.getElementById('content-div').style.height = getDocHeight() + 'px';
}
window.onload = myfunction();
document.getElementById('content-div').style.height = getDocHeight() + 'px';
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Also, change CSS to:
#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }