I need a responsive date picker for travel site. I've tried lots of Google searches but can't find any responsive date picker except pickadate.js but I want to show two months at a time...
I also tried to make the jQueryUI date picker responsive like:
#media (max-width: 480px) {
#ui-datepicker-div{ width:70%!important;}
.ui-datepicker-multi, .ui-datepicker-group {float: none!important;}
.ui-datepicker-multi-2 .ui-datepicker-group{width:100%!important;}
}
but the problem is the calender open in up direction; see the attached photo
#media (max-width: 622px) and (min-width: 1px){
#ui-datepicker-div{ width:90%!important;}.ui-datepicker-multi, .ui-datepicker-group {float: none!important;} .ui-datepicker-multi-2 .ui-datepicker-group{width:100%!important;} }#media only screen and (max-width: 622px) and (min-width: 1px) { .ui-datepicker-group-last{ display:none!important; }}
Try using this,
jtsage/jquery-mobile-datebox
OR
jQuery UI's Datepicker Styled for mobile
Related
I have created a big cartel theme and successfully installed it. Media queries inside the code work correctly on my computer, however when I load the site on my iPhone, it appears at the original width – it should be taking into account the max-device-width: 480px. Any help solving this issue would be really appreciated, thanks in advance.
Make sure you include !important as this overrides all other code:
#media screen and (min-width: 767px) and (max-width: 1200px) {
.class {
font-size:1.2em !important;
color:#ffffff;
}
}
Like that.
This question already has answers here:
Screen orientation ios
(2 answers)
Closed 7 years ago.
Throw JQuery Mobile is there are any way to show the Page in Landscape by code,
I don't want to use orientationchange but I want to fire it Programmatically!
Any help,
No, You can't do it
But, Try to add some layer over when user using mobile & portrait by using CSS
Something like...
HTML :
<div class="locked"></div>
CSS :
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait)
{
.locked {
width:100%;
height:100%;
position:fixed;
background:rgba(0,0,0,0.8);
z-index:9999;
}
}
So style this layer whatever you want, example some arrow or fake your website screenshot or fake css transform rotate, Just for let users change orientation :P
Demo : http://jsfiddle.net/cpJgT/show/ Try on your mobile
I have an iPhone 4. I know the resolution falls within the parameters of my styles. Yet I'm seeing my full-width layout on my smartphone.
Can I get a pair of fresh eyes to view source and let me know if I'm missing something obvious? It shows up in my browser but not on a device.
http://georgiaderm.com/mobile/
In my HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
In my CSS:
/* ---------------------------------------------------------------------- */
/* Media Queries
/* ---------------------------------------------------------------------- */
//* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width:1000px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width:768px) and (max-width:1000px) {
body {padding:10px 4px; width:760px;}
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width:768px) {
html {background:#fff; padding:10px;}
body {box-shadow:none; margin:0; padding:0; width:auto;}
body > nav {display:none;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width:480px) and (max-width:768px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:480px) {
.alpha, .omega {float:none;}
.alpha > * {margin:10px auto;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:320px) {
footer div {float:none; width:auto;}
}
edit: Simplified it.
While I'm here, anyone have a lightweight strategy for deactivating JS tabs on small devices?
I specifically define 0px on my media queries, for example:
#media only screen and (min-width:0px) and (max-width:1000px)
{
/* STYLES GO HERE */
}
Perhaps that will help?
Okay, while I didn't solve this mystery, I moved the mobile styles to the rest of the site and they suddenly worked. I guess I had something quirky going on with my CSS specificity on the mobile.css but once I moved the media queries over to my main.css, all is well.
Thanks for the help, all.
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?
I'm building an iPad magazine for a University project in the form of a web site to demonstrate some of the functionality of my proposed design (the real-life app would of course be native iOS)
I have looked at some frameworks like Sencha which seems overkill for what I want and seems to want to do everything inside JavaScript instead of keeping it to HTML/CSS and then adding the interactions on top. I have also looked at jQuery UI iPad which seems the most promising but I could do with some help getting it to work. Here is a demo of it working: http://jsfiddle.net/blackdynamo/yxhzU/
Here is a sample page for my pages: http://driz.co.uk/ipad/
What I need help with is getting the DIVS to sit next to each other in rows and then add the interaction whereby as a user swipes left, right and up and down it will jump between the different DIVS as though they are pages/sections of a magazine.
Here is a image that shows how the DIVS would ideally be arranged, so a user could move between the sections going left and right and then scroll inside that section by scrolling up and down. http://driz.co.uk/ipad/plan.png
Can anyone help me get this working? THANKS LOADS!
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I am not entirely sure with the divs, sorry. Hope this helps.