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.
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
It's been long time I'm building websites using HTML5 Boilerplate + Bootstrap but I still didn't figure out how to apply some sort of visual feedback/effect (could be :hover but it's not working) to let the user be aware of clicking a link (for example an item of the mobile menu). Some client started to ask/complain with "I cannot understand what I'm clicking...". I tried adding some coloured background on :hover, on :focus, but none of them are working...
How to do?!
First add this library: jquery.mobile.min.js
JAVASCRIPT:
// simulate hover effect on touch devices
$('a.add_hover_effect').on('tap', function(e) {
$(this).addClass('hover_effect');
});
$('a.add_hover_effect').on('touchend', function(e) {
$('a.add_hover_effect').removeClass('hover_effect');
});
CSS:
a.add_hover_effect.hover_effect {
background-color: red;
color: white;
}
i'm having problems to see the bottom bar icons on a Sencha Touch app.
I'm using compass and scss to style the app.
Actually, after a research i'm using the mixing:
#include pictos-iconmask('home');
to import the icons that are used in the tabbar.
The bar elements are defined i that way:
{
title: 'FAQ',
iconCls: 'star'
},
And seems to be well-defined, in Safari the inspector shows the
-webkit-mask-image:theme_image("default", "pictos/home.png"); property but this is strikethrough. In Chrome the property doesn't appear, what could be the cause of that issue?
The attached image shows both scenarios, at the top Safari and the property that i mentioned. At bottom the bar without the "broken" placeholder that Safari shows.
I found a solution that increments the icons z-index property, but i tried this with no luck.
The workaround is like this:
.x-tabbar > * {
z-index: 999 !important;
}
Any help is appreciated!
EDIT 1: Someone have any idea?
In Sencha Touch 2.4.x you need to do the following :
Install Rub
Compass
Navigate into the app home folder (i.e. to the level of the index.html file)
In Terminal run sencha app watch
Open the resources/sass/app.scss and add the following code:
// This is different in 2.4.x. In earlier versions it was pictos-iconmask as you've indicated you tried in the question.
#include icon('browser');
Your tab panel item should have the iconCls set up like so:
{
.....,
title: 'Favorites',
iconCls: 'heart'
}
Additional (Optional) Step:
Sometimes the iconCls has been commented out in the framework (this has happened to me once before). In that case, go to AppName/touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
Search in the file for a line of code that reads :
#else if ($name == "star") { #return "S"; }
Uncomment the line if it's been commented.
My goal is to style a kendo-ui mobile app in Icenium to look the same on each device it's used on. Current targets include Android and IOS.
My stylesheet is the last link in the head section, to ensure that it overrides any other styles in the app. It hasn't helped, though, as telerik's specificity nightmare has me jumping through an insane number of hoops and getting very little accomplished.
I am at my wits end- I have followed the tutorial on http://www.icenium.com/mobile-app-platform/videos-demos/video/kendo-ui-mobile-and-icenium, and so far, have been able to override very few styles.
for instance:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none;
}
should be all I need to override for the default ios titlebar, according to Telerik's tutorial. However, it gets rid of the background image, but leaves me with a background color, which it will not allow me to override (it also will not allow me to alter the text color). In other words:
.km-ios #tabstrip-scan .km-navbar
{
background-image:none; // works
background-color: #d9d1ba; //doesn't work
color: #333333; //doesn't work either
}
I have the same problems with their button classes:
.km-ios .km-button
{
height: 32px; // works
width: 100% // doesn't work;
background-image: none; // doesn't work
}
and with inputs:
.km-ios input[type=text]
{
width:100% // doesn't work
border-radius: 3px; // doesn't work
-webkit-border-radius: 3px // also doesn't work;
}
At one point, I even commented out the entire kendo default stylesheet, and was still getting the kendo default styles when I ran the app in the virtual machine.
How can I override the kendo-ui-mobile defaults and style the app how I want it to look (the same on every device), rather than how Telerik thinks it should look (closer to native ui)?
Force the platform to a specific one and style it with the Kendo UI Mobile ThemeBuilder here:
http://demos.kendoui.com/mobilethemebuilder/index.html
You might reference my post here Kendo mobile template styling/formatting not working - i was having a similar issue and my post might help.
I've built a very simple jQuery overlay which works fine in non-Microsoft browsers. I now want to debug the CSS for the overlay so that it works in IE 8 Comptability View and Quirks Mode.
The overlay can be seen at http://pointlessandannoying.com/so/ - click the 'about' link in the bottom right of the page to display the overlay. Could anyone suggest a good place to start with regards to the debugging?
If you're looking for code debugging help
You may be able to eliminate the quirks/compatibilityView problems by forcing IE8 Standards view. Put <meta http-equiv="X-UA-Compatible" content="IE=edge" > in the header.
If you're looking for Debugging tools
Firebug Lite bookmarklet works well. IE also makes a debug toolbar, which is not as easy to use (imho).
What exactly is the issue that you seem to be running into - I see that the overlay displays in IE8 (and Compatibility Mode etc.) however it seems to be being cut off towards the bottom, and is also un-clickable.
It could be an issue dealing with the z-index of the overlay or possibly how it is positioned (relative or absolutely) as I know the IE Family isn't fond of overlays. I'll dig into in some more to see if I can find anything.
One of the issues seems to be the size of the overlay - in style.css the height of #about-wrapper and #about-lightbox-wrapper were each set to 200px. I found that changing that to 400px would allow them to be seen in both IE and other browsers.
The only issue remaining is being unable to access the overlay area (The "About" area). You may want to consider using some jQuery to possibly change the z-index on show / hide so that it will be accessible.
In script.js:
Consider changing:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
to something like:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#about-overlay').css('z-index',250); //Line Changed
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-overlay').css('z-index',0); // Line Changed
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
My syntax may be off - but I hope that this can at least maybe point you in the right direction.
Thanks everyone for the tips - in the end I outsourced the job, but all of this is good for future reference.