Chrome v. 26.0.1410.64
jQuery v. 1.7.1
jQueryUI v. latest
web app is built using asp.net webforms
What happens is that when the page is at it's top, dialog opens normally and everything works as intended. Dragging dialog causes no problems. If the page is scrolled down, when trying to drag dialog, dialog's top css property increases roughly by the value of the vertical scroll amount. This is happening only in Google Chrome.
This is the part of the function that opens the modal popup.
var $dialog = $('<div id="dialogIframe" title="Some title"></div>')
.html('<iframe id="jqueryIframe" style="border: 0px;" src="' + page + '"
width="99%" height="99%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: height,
width: width,
resizable: false,
draggable: true,
buttons: dialog_buttons,
close: function (event, ui) {
$('#dialogIframe').remove();
}
});
$dialog.dialog('open');
I am working on someone else's code. I'm not sure what could cause this kind of behavior. What could possibly cause this kind of behavior ?
EDIT:
- when switching to jQuery version: 1.9.1 it works in Google chrome as expected, but the same problem now occurs in IE9 and FF latest (who were working properly with older jQ version)
EDIT 2:
- I have a feeling that this issue might be related to MaintainScrollPositionOnPostback page property in webforms, which I am by the way unable to disable or set to false in any conventional way: on aspx page, code-behind of the same page, master page, web.config, this is amazing
had the same issue in chrome and solved it with
open:function(){
$('body').addClass('stop-scrolling')
},
beforeClose: function( event, ui ) {
$('body').removeClass('stop-scrolling')
},
this works for me because my dialog is very small, but you could get in trouble when you have more content in your dialogue than you have space on your screen
the css class looks like
.stop-scrolling {
height: 100%;
overflow: hidden;
}
and prevents the body from scrolling
Related
I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?
Similar problem arises when I am using a custom dropdown Selectric
I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.
I also faced same issue and resolved it as below solution , you can try it.
datepicker has beforeShow property where you have to set calendar position.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
});
}, 1);
}
});
Try this
.dropdown-menu{
position: fixed!important
}
This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:
You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).
Add to your css for that class (here modal-open) the missing show command:
body.modal-open {
overflow: visible;
}
Now the scroll should stay in place.
Example refers to html like:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Source:
Bootstrap modal: background jumps to top on toggle
PS. My source has also 18 other options, if this seems too hacky.
I have made this current one once, worked like charm and was not so tricky to do.
just add This CSS code to your site it will fix that issue.
.element{
position: sticky!important;
}
If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.
You can do this by adding this line of CSS code:
.dropdown-menu {
position: sticky;
}
Hope that will help you
As a start, have you looked thru the GH repo's issues for something matching your description?
This link specifically sounds promising:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866
I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".
So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).
Also there seems to be some default mobile behavior related to scrolling:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Perhaps setting the following will help:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
The following link provides more context on this scrolling behavior:
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
I've setup a new ASP.NET MVC website, using the defaults in Visual Studio 2013. I've updated all the libraries being used so that I have the latest version of bootstrap and other CSS, JavaScript and MS libraries installed.
What I've found is that if you add basic form with validation, the Bootstrap navigation bar doesn't stay on top, it falls to the middle of the screen on an iPhone. Here is a screenshot:
You'll notice the menu is the middle of the screen, instead of being on top.
To duplicate, open the URL on an iPhone just click submit which will cause the a validation error and display the UI issue.
Note, I have removed the bundling so that we can see the individual links. I also put them all in the header for convenience, not something that we would do in production.
What is the solution to anchoring the navigation bar?
With help of a skilled CSS programmer, I was able to resolve with the following updates:
Run the following JavaScript after bootstrap:
var is_ios = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if(is_ios) {
$(document)
.on('focus', 'input, textarea', function(e) {
$('body').addClass('fixfixed');
})
.on('blur', 'input, textarea', function(e) {
$('body').removeClass('fixfixed');
});
}
Added the following CSS updates:
.form .form-control {
font-size: 16px;
}
.fixfixed .navbar {
position: relative;
top: auto;
}
I built a WordPress plugin for my company's customers and one of the options uses an iframe. A customer pointed out an interesting issue to me. When the page loads, it doesn't load at the top but loads just above the iframe (please see: http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/). The same thing happens on my test site, and in all browsers I've tested (i.e., chrome and firefox).
I've narrowed it down to the iframe, but it may also have something to do with the way WordPress treats iframes. This question is similar, but the answer given is to set display: none; which doesn't work because I need the iframe's contents to display.
Any suggestions?
Use the scrollTo function and put this bit of javascript at the end of your page.
I took this from Scrolling an iframe with javascript?
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
If jQuery is involved, you can use this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
I'd extend the scrollTo issue pointed by #stevepowell2000 and suggest that you examine all the scripts of that iframe, much probably there's a scrollTo going on there.
I found this in the iframe source, but am not sure if it's related or not...
$("#siteMasterPage").live('pageshow', function(event) {
var currentArea = $('#hidCurrentArea').val();
if (currentArea === "business") {
setTimeout(function() {
$.mobile.silentScroll(30);
}, 10);
}
});
If that's indeed the case, the matter would be how to prevent that, because applying a second scroll will probably look weird.
I ended up finding (two weeks later) the answer to this question. I took it from Nate's answer here - iframe on the page bottom: avoid automatic scroll of the page
I used:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>
It seems to have completely eliminated the scrolling issue.
Here was Nate's quote:
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Using css-transforms on a YouTube embed renders the video black in at least Safari 5 and Firefox 4. Chrome 11 handles it just fine.
I've made an example here: http://jsfiddle.net/oskarrough/4vRzd/4/
I need the css-transform in order to do some fancy layout positioning. Is there any way, css or js, to hack it to display the video?
I am tackling the same problem right now. I am not doing any fancy css transformations, just scaling.
Although not working perfectly, I got the video to display by using the wmode=transparent option.
i.e.
<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
Are you sure you can't use this instead:
iframe {
position: relative;
top: 100px
}
http://jsfiddle.net/4vRzd/5/
Or margin-top: 100px, or a negative margin on some other element?
Someone had to post this, because you didn't mention that they aren't viable options.
Upvote for lawrenceshen.
The wmode=transparent worked.
var player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady");
player = new YT.Player('gallery-youtube', {
height: '594',
width: '883',
videoId: 'u1zgFlCw8Aw',
playerVars: { "modestbranding":1, "wmode":"transparent" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
For me, this problem only occurred in Firefox 4+ on Windows 7 and Windows 8. It didn't happen on any other browser or on OS X.
I spent hours stuck on this problem. I display YouTube videos in a modal which uses CSS3 translations to slide into view.
My solution was to remove the transform/transition classes once the modal has appeared.
Once I did that YouTube embeds appeared and no more empty black box.
More details: I use animate.css and add class="animated fadeInDownBig" to slide the modal down. Once it has reached its final destination, I remove those classes again.
It's a really strange problem which I hope Mozilla fix really soon.
I want an animation modal (loading please wait) and when the page fully loads it disappears?
Using jQuery:
$(function() { $('#loading').fadeOut(); });
The rest is CSS and an animated GIF.
If you're using jQuery, try something like this:
$(function() {
var reqMgr = Sys.WebForms.PageRequestManager.getInstance();
reqMgr.add_beginRequest(ShowWait);
reqMgr.add_endRequest(HideWait);
});
function ShowWait() {
$("#Loading").fadeIn();
}
function HideWait() {
$("#Loading").fadeOut();
}
Then just have an element:
<div id="Loading">Loading, Please Wait...</div>
Style and position as you want with css, default it to have a display: none; though.
I recommend to write some simple html with your loading message (and may be a page mask to make it grayed) and place it at the beginning of the page. And at the end of page add script to remove that message and mask (see first answer). So users will see this message as soon as they get the html page (also some browsers support rendering of incomplete pages during loading of the page). See the code of this page for additional details.
This is my favorite way to make a modal popup. It does not use any AJAX, it's just pure HTML & CSS: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
You can hook it up to code-behind instead of using hyperlinks (get rid of the opacity attribute and work with div.visble = true/false). Set the modal div visible as default, then when page load completes, set it to visible=false.