min-height or full screen fill with jquery mobile dialog box - jquery-mobile

I'm trying to figure out how to enforce a minimum height (for fullscreen effect) on a jquery-mobile dialog box, essentially I'm trying to cover over the backdrop entirely with the dialog box itself.
I'm using a header but no footer if that makes a difference.

Related

Disable button focus border

I have a Jquery Mobile page with buttons
When set the focus to a button with Tab, there is a blue border... (Only with IE when browsing in a WPF WebBrowser control)
I would like to disable this border in the css, because when I click in the page, it automatically focus my first button...
It seems simple but I can't manage to do it...
For some reasons, I can't inspect the page to know the css property to disable.
What is the equivalent of "-moz-focus-inner" for Internet Explorer ?

JQuery Mobile: customize panel widget size

I'm using the panel widget of JQuery Mobile: http://demos.jquerymobile.com/1.4.1/panel/
It looks very nice on phones, but on tablet devices the panel is too small with respect to the screen size.
How can I scale the panel size and its content to the 50% of the screen?
I tried using transform:scale(1.5), but it has a lot of side effects, then I tried to customize the css according to the last part of the page http://demos.jquerymobile.com/1.4.1/panel/, but nothing changed.
Is there a simple way to modify the framework or to dynamically change the size of the elements without creating side effects?

mobile safari: change background color of picker view (select)

Mobile Safari uses a UIPickerView for <select> elements - I'd like to change the background color of it with CSS. As you can see in the screen shot below, it's very hard to read. What you are looking at is the State <select> form element. Changing the text color or background color of the <select> element itself doesn't fix the problem.
I thought it was related to a parent element's or its own background color - but I went up the line and changed every ancestor element's background color to white and the problem persisted. Is there a prefixed style or trick to making this GUI legible? Or maybe it's just a bug.
EDIT: The gray behind the UIPickerView is filled in by mobile Safari, since the select is almost at the bottom of the page. Mobile Safari vertically centers the select above the UIPickerView and fills in the extra space below the page with the gray. The question is, how does it determine to use that dark gray? I've tried changing the body text color, and background-color of every other element on the page to no avail.
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.

jQuery UI menubar styling

I am working on the jQuery UI menubar available here. I would like the menus to be displayed in the center of the bar and not in the left. How do I do that?
I tried to do it by padding, it works, but its not ideal thing to do as it is not appearing at the center if I use different devices.

How to make DIV scrollable with overflow for iPad/mobile Devices?

i have a scrollable div which has the CSS Attribute overflow. With my iPad i can scroll the content of this div, but there are no scrollbars. Is it possible to show this scrollbars and to use them with no special javascript (jQuery) plugin?
You cannot Add Scrollbars. In iPad you can scroll with your 2 fingers. it is better to show full content in mobile devices as overflow:visible. if you are using responsive design, this option is better.

Resources