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
Related
I am using the Angular Material CDK Drag and Drop Functionality in my application. The drag and drop functionality is working fine, unless I am using it within a dialog (for most components I am using Nebular, in this case the Nebular dialog). The problem I am encountering is, as soon as I drag a draggable element within the dialog, the element disappears behind the dialog. After dropping it, it reappears on the correct position. In the screenshot, I am dragging the "AAAA" element away from the list - it disappears behind the dialog.
Stackblitz: https://stackblitz.com/edit/angular-znqckb
I am using the following implementation:
<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" [cdkDropListData]="techs"
(cdkDropListDropped)="drop($event)">
<button *ngFor="let tech of techs" nbButton cdkDrag>{{tech}}</button>
</div>
Component.ts:
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}
I did not modify the style sheet. I assume this issue can be solved somehow by modifying the z-index but I don't know how to apply it to the "dragging" element.
You can change the DragRefConfig injecting the right config (with the desired z-index) in your component. For example:
const DragConfig = {
dragStartThreshold: 0,
pointerDirectionChangeThreshold: 5,
zIndex: 10000
};
providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }]
The z-index of the preview element will be 10000 ;-)
For more infos: https://material.angular.io/cdk/drag-drop/api#DragRefConfig
I'm struggling with this problem myself and I'm using a crude workaround for now. Forcing the z-index of .cdk-overlay-container to 1000 in your global styles (styles.scss) should get you the result you want. It's not best practice though.
Add this in styles.scss:
.cdk-overlay-container {
z-index: 1000 !important;
}
Stackblitz here
To my knowledge, it's not possible to force a z-index on the drag preview ("dragging" element) because the cdk sets its z-index dynamically as inline style. The Nebular library you are using seems to be setting the z-index of the overlay container to 1040. The Angular Material library sets the drag preview's z-index as 1000, that's why it goes behind the overlay. Vanilla Angular Material sets the z-index of cdk overlay to 1000, so drag & drop will work in that scenario.
For previous angular material versions than 9.
In the html dragable element:
<div ... cdkDrag (cdkDragStarted)="onDragStarted($event)"</div>
In the compoonent ts:
export class ...{
zIndexSerial: number = 1000;
onDragStarted(event: CdkDragEnd): void {
event.source.element.nativeElement.style.zIndex=this.zIndexSerial+"";
this.zIndexSerial = this.zIndexSerial+1;
}
for anyone struggling with the same issue.I found the solution to be z-index only work on positioned elements Refer to this link description here
For Angular version 8, I added the following to styles.scss and got it to work in the modal:
.cdk-drag-preview {
z-index: 9000 !important;
}
See .cdk-drag-preview in https://material.angular.io/cdk/drag-drop/overview#styling
I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:
So I tried different things like changing the position of .pac-container but it doesn't solve the problem.
When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.
I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ?
(It's actually just a simple code like this:
function initialize() {
var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
options
);
}
initialize();
jsfiddle
Thanks
I have the same problem. My solution was:
$('#inputContainer').scroll(function(){
//Set new top to autocomplete dropdown
newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
$('.pac-container').css('top', newTop + 'px');
});
This update the dropdown position when container scrolls.
I just encountered the same problem when I was implementing the Autocomplete on a form inside a scrollable modal. If you only have one Autocomplete object then the solution is relatively easy.
First make sure that your element's parent has a relative position.
Then you need to select the .pac-container and append it to the parent.
$("#autocomplete").parent()
.css({position: "relative"})
.append(".pac-container");
Finally set the .pac-container left and top position to be below your element. This needs to be done in a stylesheet with the !important declaration to ensure it overrides the inline styles set by Google's code.
// these values will need to be calculated based on your layout
.pac-container {
top: 40px !important;
left: 0px !important;
}
This obviously wont work if you have multiple Autocomplete objects on a single page. Luckily I figured out a way to handle that scenario and recently published it in a jQuery plugin designed to make autocompleting address forms a breeze.
I got the solution check the example no issue with position bug when scroll
function initAutocomplete() {
//....codes...
//....add this code just before close function...
setTimeout(function(){
$(".pac-container").prependTo("#mapMoveHere");
}, 300);
}
https://codepen.io/gmkhussain/pen/qPpryg
In my case, I had to set the css as html,body{overflow-x:visible;} to make the pac-container fixed to the input field.
I was now able to reproduce the problem, the solution is simply adding position: relative to your wrapper box and position: absolute to your #autocomplete input.
I got the solution checking the example provided by the Google team.
I've updated your fiddle to match the solution, but it goes like this:
Your updated CSS:
.box {
position: relative;
height: 200vh;
}
#autocomplete {
width:350px;
position: absolute;
}
Since my input field is inside "ion-content", I implemented Nicolas Pennesi
's answer with ion-content's method:
onScroll($event) {
// his code here
}
I'm using bootstrap for UI Design. I have configured updated IntroJS to my site.
Now it works fine with other elements but giving problem with Dropdown Menu Elements.
hey man make sure your jquery link placed first then write javascript link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
A bit late to the party but for anyone googling:
The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.
My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.
I've had the same issue and I manage to resolve it, I posted an explanation there:
use intro.js on bootstrap dropdown element
Hope these help.
EDIT: Added snippet of code and explanation from link
I found a workaround, it's quite ugly, but does the job:
$scope.ChangeEvent = function (e) {
if (e.id === 'step2') {
document.getElementById('step1').click();
setTimeout(function () {
document.getElementById('step2').style.display = 'block';
}, 500);
}
console.log("Change Event called");
};
I set the display attribute to block just after the click event I added in the change event
When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time
I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.
I found that
.ui-page { -webkit-backface-visibility: hidden; }
or setting the data-transition to none
or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file
helped.
But apparently that is only working if the webapp is just one "multi-page".
I am using 4 separate pages.
In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering.
But as soon as I add the App to to the Homescreen it flickers again.
Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J
Is there no solution for this?
Nothing answered so far worked for me.
I ended up binding a function to all links or elements which cause a page change.
In the function, i trigger the page change but explicitely tell it 'none' for the transition.
Here is an example:
Javscript (jQuery)
$('.item-navbar-people').on('tap', function (e) {
$.mobile.changePage("#page-people", { transition: "none" });
});
Markup
<div data-role="navbar">
<ul>
<li><a class="item-navbar-people ui-btn-active">People</a></li>
</ul>
</div>
Hope this helps!
Work-around Solution
So, these are the things I tried:
data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags
It did not work for "Homescreen-App"/"PhoneGap-App"
I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.
So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.
This is a known issue.
Disabling/Enabling zoom BEFORE each page transition will resolve the issue.
I figure out it, changing the scale of viewport meta tag.
Let's me clarify...
In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.01">
I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file
meta.attr( “content”, disabledZoom ); // just put // before the line
meta.attr( “content”, enabledZoom ); // just put // before the line
This will eliminate double flicks, also
set data-transition between pages to none
data-transition="none"
(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)
Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.
source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.
After linking to the .js file,
Add
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
to the head of your document.
Voila. That helped me, hope it helps you too!
I'm creating a responsive design but have run into a problem where the Facebook Javascript SDK code's div#fb-root is causing a horizontal scrollbar when the browser width is less than 590px. I've tested this on Chrome, Safari, and Firefox, but the issue only occurs in Firefox.
Should I just set div#fb-root to display:none or is there a better way of doing it?
Thanks!
EDIT: As requested, the code below is how I'm loading the SDK. When I don't load the SDK, the horizontal scrollbars disappear.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxx', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
The display: none is completely OK, since that <div> is not used for showing anything, it's a placeholder where all the FB scripts can be loaded into and appended to your page
Setting display:none made the scrollbar disappear, but when I used FB.ui(), no dialog showed.
I managed to solve it by wrapping #fb-root in another div:
<div id="fbdiv" style="width:0px;height:0px"><div id="fb-root"></div></div>
placed at the end of the body tag.
Hope that helps somebody.
As a side note this .fb-root also breaks sticky footers implemented with html { height: 100%; } body { display: table; height: 100%; } and footer footer { display: 'table-row'; width: 100% }
Facebook should fix this.
The problem with hiding the fb-root div arises when you want to make use of the apprequests API call. This places the dialog for sending app requests to friends in the div. If the div is hidden, the request dialog will never be shown. I found out about this the hard way.
You could just try setting the width of the div on page load or something similar.
I have run into this same problem and tried a slew of different CSS tricks to fix it.
Setting the width of fb-root or container divs doesn't fix the problem. Neither does any form of overflow:hidden. The only thing that has worked for me is indeed making fb-root hidden as Zoltan said. After doing this I tested the button several different ways and I am not seeing any broken functionality using with this method at least for myself.
If their script button is going to break people's sites FB really should be fixing this issue on their end.
NOTE: Firefox is the only browser this problem comes up with.
Here (and in Firefox only) it just showed two small empty "iframe-ish" windows in the middle of my page.
I solved using display: none, but Facebook should definitely fix this issue.
You should also be able to do:
#fb-root {
position:absolute;
left:-9999em;
}
and not have it cause a horizontal scrollbar. If for some reason you don't want to use display: none; you could then move it back with JavaScript/jQuery if you really need it shown.
put this in your css
#fb-root {
position:absolute;
left:0;
top:0;
visibility:hidden;
}