The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
Related
I am able to use http://jsfiddle.net/9pUu4/ code to have vertical text in table cell. Above this table is my horizontal navigation menu which expands into links upon hovering the tab with jquery ui menu. My problem is that when hover the tab above vertical text the text laid over the menu. But it doesn't happen when hover the horizontal text on the same row of the table; that is menu covers page content. This happens on chrome and firefox.
I tried messing with z-index issue with no luck. Does it have anything to do with the transform css property (-webkit-transform, -moz-transform)? Or jquery menu conflict with vertical text?
.Vertical
{
writing-mode:bt-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
After digging deeper in SO, How do I make sure my drop down menus overlap and cover anything on my page?, I suspect vertical text: transform origin; or simply vertical text comes after menu on page layout, may make this vertical text "on-top".
Anyways, adding this wrapper outside of the menu works.
#div1
{
position : relative;
z-index : 1000;
}
More code
z-index = 1 as stated works, but I just want to make sure it covers everything.
i'm using jquery 1.1.0 and i have a custom header here
i've set the css of this header to be a height of 200px; (i hardcoded it for testing, if i place items in there to make it dynamically get to 200 px, it's the same thing)
the problem is when i transition to another page
$.mobile.changePage("#SurveyCreateView", "none", false, false);
the content on the second page basically ignores the height of the custom header i have. (so the content starts all the way at the top) if i resize the window or if i do a back, and navigate to the second view again, then everything is okay.
anybody have any idea how to fix this?
I have a simple page with fixed header and footer. When it Slides from page1 to page2, the footer on page is first shown at the position where the content of page2 is ended (somewhat middle) then after page finish sliding the footer re-position itself and move to bottom. Is there any way to avoid this?
In the pageshow event handler of the second page you can try adding the following code snippet:
$.mobile.fixedToolbars.show(true);
I believe this is a bug in JQM. It happens when the page content is shorter than the screen size.
My educated guess, why it happens:
After transitions, JQM triggers updateLayout, which recalculates footer position by hiding-recalulate-showing
Toolbars are hidden using CSS:top property and setting it to 0
So on a long page, to hide the footer CSS:top is set to 0, pushing your footer down to where it would be in a static page flow = the end of your document.
To show the footer, JQM calculates, where you are on your page vs. your screen size and footer height and comes up with some CSS:top = -12345px. Check CSS-top in Firebug when the footer is visible.
= to hide: CSS-top = 0
= to show: CSS-top = -1234px
Now if your page is shorter than the screen height (screen 600px, page 200px for example), hiding the footer by setting CSS:top=0 will stick it to the end of the page, which is right in the middle of your screen at 200px.
Since updateLayout recalculates footer position, it is hidden-recalculated-shown. And there you have your jumping footer.
I've done a fix with pull request on Github - https://github.com/jquery/jquery-mobile/pull/3050.
I guess since the toolbars will switch to pos:fixed with JQM 1.1. nobody bothered to pull it in any more. But it work nevertheless.
Using Jquery UI's tabs I want to be able to set the tab + tab content views together to be a specific height say 500px. Since the height of the tab section varies by theme and I cannot know what height to use in px for the content view so I cannot hard code it. How do you force the whole thing to a specific height?
Thanks!
Put the entire block inside a div and apply max-height CSS property to it.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives