I am new to jquery mobile. I have one problem. I want to increase the height of a default header.
Now my problem is that i want to increase a size of this header. Can any one tell me how to do it? What css i have to overwrite?
Thanks In Advace
Waiting For Quick Reply
Aamirkhan I.
The correct way is to modify the ui-title class on the css
you can control the height of the header by controlling the height of the div in which you are putting the header tag or data-role="header".
worked for me in case of other jquery-mobile components
#media screen and (min-width:720px) {
.ui-btn-text {font-size:36px;}
}
I enlarge the font size to get larger header.
Related
I am using iscroll-probe.js to implement the pull-to-refresh and infinite load in a Phonegap application using the example given in this link.
I am loading the contents dynamically so iscroll is refreshed after the list items have been added.
Everything works perfectly for me except the situation when the total height of the list items is lesser than the screen height.
This is when the scroller is not required hence is disabled but it also disables the pull-to-refresh. This I think is how iscroll works as the scroller is disabled the moment I call the refresh method.
Does anyone know how to make pull-to-refresh work when the content height is smaller than the screen height.
For anyone still interested, I solved this problem by setting a min-height to the #scroller element.
I did this using jquery (I'm not sure if it can be done by using css only).
$('#scroller').css('min-height',($(window).height()+1)+'px');
That is: the #scroller element min-height is set to the window height + 1px.
This way the scroller is always enabled.
Please note that this instruction has to be executed before instantiating the iScroll element.
I'm building an iOS 5/6 app that has a UIWebView. It loads some HTML that I have embedded in my app.
Now when I rotate my device, the WebView changes its size (as I want it to fill the entire width of the screen).
And then it gets weird: some content gets scaled up and some content doesn't get scaled up. See this image with some example text in it:
As you can see, the header (H6) stays the same, while the paragraph gets scaled up. Does anybody have an idea how to prevent this? I want the html to look the same in landscape as it does in portrait mode.
I've tried setting the viewport scaling to 1: <meta name="viewport" content="initial-scale=1.0,max-scale=1.0">
but that doesn't help. The body's font-size style is set to 14px, but changing that to 14pt or a percentage also made no difference. Setting the width of the body to 100% also didn't help.
Strangely, removing the line break (<br/>) that's in the text fixes it but I need line breaks to be in there so that's no solution.
The only thing that does work is reloading the UIWebView's content after an orientation change, but that doesn't prevent it from looking wrong during rotation, and it resets any scrolling that the user may have done.
Any ideas?
Try this:
body {
-webkit-text-size-adjust: none;
}
I'm not sure, but it might be the scalesPageToFit propertie on your UIWebView.
If you are coding on XCode (I assume that because you are using UIWebView)
Choose the UIWebView on the nib.
Ultilities pane > Size inspector > in the Autosizing box, remove both double-direction arrows.
The UIWebView now has fixed size and won't automatically scale to orientation.
Is this what you want?
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
Please see http://jsfiddle.net/6XVNr/2/ for a (not very sexy) example of the issue I'm having.
I wish to resize an iframe element which has been given the jQueryUI dialog treatment. The issue I have is that I'm not sure which element I should resize.. I can resize the id of the iframe which was targeted for the .dialog() function, or I can resize the resulting ui-dialog class, which wraps around the iframe.
Resizing the iframe element only affects the height of the dialog, the width is simply hidden by the dialog. Resizing the ui-dialog class almost works perfectly.. the size is fine, but the buttonpane is not sticking to the bottom of the dialog. Which is the correct method and how can I get it fully working?
Please ignore the colours, the scrollbars, the fact it's not centred after resizing etc.. I stripped everything out for the example - also tested with a div instead of iframe and got the same results.
Thanks :)
Well it suddenly occurred to me - why not alter the height by resizing the iframe element, and the width by resizing the ui-dialog class.. seems to work ok so far :)