http://jsfiddle.net/s6Umb/
I'm getting this strange behavior where when I create a datepicker, there appears a small div right below the picker:
<div
id="ui-datepicker-div"
class="ui-datepicker ui-widget
ui-widget-content ui-helper-clearfix ui-corner-all">
</div>
This div seems to become the actual calendar display when I click on the datepicker input, and becomes hidden when I am done... but is visible upon initialization.
Is this a known issue, or did I do something wrong?
I think this is a known glitch. Don't know why it hasn't been resolved until now, but the easiest way to fix it is to just add the following CSS to your global stylesheet:
#ui-datepicker-div
{
display: none;
}
I've done this on several projects and it's worked perfectly without any problems.
Related
I'm using popup over whole screen. When popup is opened I set body and html CSS to overflow: hidden and prevent screen from scrolling. In all browsers working fine and on the android devices also, but the problem is on the iOS devices. I cannot stop scrolling on the ios devices.
<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>
I need clean CSS solution for this. I tried already to add position: relative, position: fixed but it's not working.
Any solutions?
I had the same problem some days ago and I finally came up with this.
Well, there is a very simple solution to solve this problem... All you
have to do is set that element to have a relative position. For
instance, if you were to specify for the body to hide the horizontal
scrollbars you would want to have the following CSS in your
stylesheet:
body {
position:relative;
overflow:hidden;
}
OR
Another method is adding jQuery if above doesn't work
we can prevent swiping by using something like so:
$('body').bind('touchmove', function(e){e.preventDefault()});
And to re-allow swiping again (i.e. when a menu or full screen modal is closed):
$('body').unbind('touchmove');
Hope this helps you :)
Sorry my English. After some days , I found this solution, it worked for me!
position: touch-action: none;
-ms-touch-action: none;
I'm using the :focus state to show content, when the parent element has focus. Like so:
.child { display: none; }
.parent:focus .child { display: block; }
Note that the parent element has tabindex="0" set. Is there a way to get this to work in iOS browsers? I'm asking to see if a CSS-only solution is possible, no javascript please.
I've set up a reduced test case fiddle here: http://jsfiddle.net/E8zCU/
An answer that worked for me for a similar problem is here.
As the poster in that thread said, you just have to add
<body ontouchstart="">
to the top of your html code.
I built a grid layout using a Codrops tutorial and my own knowledge. The grid is setup using display:inline-block; and nth-child to remove padding from the last element so they do not break to the next line. As the grid size changes, I use a different nth-child in the media query to remove padding from the last element, whether it be the 3rd element, 2nd element, or the 1st.
Everything works swell in all desktop browsers, but does not work on iPad.
For some reason on iPad, the grid is breaking in the wrong place, which looks awful.
I don't know where to begin to test this bug because it works fine when scaling the browser window down. I've tried some testing with iOS simulator to no avail. However, what is interesting, is on the initial page load the grid works fine, then once fully loaded, the grid breaks.
You can view the problem here (on iPad): http://www.eugeniacameronfoster.com/new/paintings/
Thanks!
There are a few issues that a CSS Tricks article points out.
Basically you need to remove the space between the divs in your grid, so that instead of
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
you need to put
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
I will put in a vote for you to just bail on the inline-block idea and go with flexbox or box-sizing: border-box;
There's a workaround that doesn't require to change the html markup.
Using a negative letter-spacing of -0.31em on the parent ul and then resetting the letter-spacing in the li the space between the lis disappear.
ul {
letter-spacing: -0.31em;
}
li {
letter-spacing: normal;
display: inline-block;
}
An example can be seen here: http://jsfiddle.net/c67U4/
This trick is used in particular in PureCSS grids that use inline-block instead of floating elements.
I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.
Thanks!
I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.
You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:
$(window).on('load', function () {
$(this).trigger('resize');
});
I pasted this code into the console while on your page and it re-positioned the title element as expected.
Does applying the following CSS help?
.ui-page {
padding-top: 91px !important;
}
Note that you will have to refine the selector as this will apply to overlay popups either.
I had lots of trouble with this. This worked until I wanted to add a link:
<div data-role="header">
<img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>
Note the empty h1 tag.
I ended up not using a data-role="header" at all, I just couldn't get it to work with a link. I used a ui-bar class instead. Like this:
<div class="ui-bar ui-bar-a">
<a href="/" data-role="none">
<img border="0" src="images/logo.png" style="float: left; display:inline">
</a>
</div>
A solution based on #Jasper answer that worked for me was:
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
It has an improvement that apply to all the jquery mobile pages
I played with the rather good solutions from Jasper and Carlos487 and found this to be the most up-to-date and reliable way to do it (jQM 1.4.x):
if it's due to an image without specified dimensions that will need some time to load and thus may cause the header to enlarge, then specifying the known dimensions (ideally via CSS) should do it. Otherwise there should be a way to determine if it has finished loading and thus applying the idea of solution 3 below.
if it's is due to some (maybe) unknown header resize event (e.g. through some image loaded later or some other content shrinking the header and thus making it vertically bigger), then this should work with a reasonable big enough timeout value:
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
if you know what is causing this (as in my case, where I am right shifting the page content on large screens via some (otherwise hidden/overlayed) left aligned navigation panel), then the following may be even better, beeing independent of the actual time the page needs to load on some device or scenario (which may be longer than your predefined timeout above):
// if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
(I am not sure if Jaspers solution using $(window).on( 'load', ... will be correct in all jQM page load scenarios (with AJAX page navigation). That's why I would prefer Carlos487's approach in my example.)
None of the solutions above worked for me. But I found out my problem lies in the events after the page navigation. If the content div is hidden during this time, it doesn't get positioned under the header div, rather stays in its original place:
$(document).on("pageshow", "div[data-role='page']", function()
{
$("#pageContentDiv").hide();
setTimeout(function()
{
$("#pageContentDiv").show();
}, 0);
});
EDIT:
Found a better solution; set header div height and page div top padding to the same value:
<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">
Hope this helps.
I developed a good site layout which works like a charm in Webkit and FF based browsers... but in IE 7 and 8 everything get broken up like.
I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.
If I remove all the jquery css everything works fine.
You can see it working on [removed]
Can anyone hint me on how to solve this mess?
You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.
You can use firebug in firefox to go throught the css files.
To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.
EDIT:
You need to override this three:
<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">
The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.
Try to change this and you will see the changes:
This could not be the exact solution, but it really points out the problem on your pages.
on the clear class
remove the clear:both; or make it clear:none;
on the separator class
add float:right and margin-right:200px;
on the pie id
add float:right; and margin-right:200px;
the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)