I am using full calendar. It is working fine in all browsers but in IE8 events are not showing up in calendar. I checked it and found that when I remove following code then events are showing up :
eventMouseover :function(event, jsEvent, view)
{
$('.popup_book_det').hide();
$('#det'+event.id_id).show();
},
eventMouseout :function(event, jsEvent, view)
{
$('.popup_book_det').hide();
$('#det'+event.id_id).hide();
},
but this code is necessary...........
Looks like you might not have included the jQueryUI.js in your HTML. Link to that file and see if this persists. I was able to use both eventMouseover and eventMouseout on IE8 with this fiddle - http://jsfiddle.net/100thGear/vyKSZ/ (remove the jqueryui.js from this fiddle and the error shows up on IE8).
Related
I have the following code:
someSelector:after {
content: attr('data-some-data');
/* ... */
}
Everything works fine (the value is reflected on the screen) until I change this attribute to something else:
document.querySelector('someSelector').dataset.someData = 'some other value';
The content doesn't get updated on the screen but when I open the DOM explorer I can clearly see, that the value of the attribute is indeed updated.
I tried to set this manually through the browser console but also with no success.
Everything works correctly in other browsers but of course in IE... You know...
The question
Is it possible to force an update of this value so it will be reflected on the screen when changed?
IE11 for some unknown reason does not redraw DOM when you modify element dataset.
But if you have to support IE11 use Element.setAttribute method like so:
document.querySelector('someSelector').setAttribute('data-some-data', 'some other value');
DOM will be redrawn and the pseudoelement content should be updated.
I have a weird issue on iOS safari or chrome, when trying to select an option from a select input, when i touch the selector, it shows the options correctly on first tap, but then when i try to select an option, i have to tap twice to make it work, this is my actual scenario:
"element-ui": "^2.13.1", "vue": "^2.6.11"
Here is my select input:
<el-select class="select-danger"
placeholder="Language / Idioma"
v-model="locale">
<el-option v-for="option in selects.languages"
class="select-danger"
:value="option.value"
:label="option.label"
:key="option.label">
</el-option>
</el-select>
watch: {
// watch for locale changes
locale: function (value) {
alert("selected")
}
},
This issue seems to happens only on iOS, i tested on android chrome browser and works flawless.
Any ideas of what could be causing this issue?
After looking around for a while i found a workaround in Element UI Github issues, right here:
Element UI Github Issue
Appearently it has to do with the hover state that it's not well managed on iOS, and it's a well known issue, for the case the solution seems to be adding the following SCSS to App.vue :
.el-scrollbar {
> .el-scrollbar__bar {
opacity: 1;
}
}
But somehow in my case this didn't work, so i did it with just css:
/*Fixes double tap on iOS*/
.el-scrollbar__bar {
opacity: 1!important;
}
And that was it, this solved the double tap issue with Element UI.
Hope this helps someone else.
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
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
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