You can see a demo where the problem occurs here : http://arca-computing.github.io/MultipleDatePicker/
If you try on Chrome on your PC it's working well : you can select/unselect dates and the red background appears/disappears.
But if you try on Android Chrome, you can select a date, red background appears, but when you deselect it, red background doesn't disappears, it'll disappears at your next touch.
I'm using scope variables for each day with a property "selected". When I debug it the selected property is toggled well.
NG : the calendar is a directive, full code on the github repo (link in the page)
EDIT: looks like it's a focus/hover problem after deselecting a date
Found a workaround : on each day I add a property hover to false, then I use ng-mouseover and ng-mouseleave to toggle this property and apply the style.
<div class="text-center picker-day" ng-repeat="day in days" ng-click="toggleDay(day)" ng-mouseover="day.hover=true" ng-mouseleave="day.hover=false" ng-class="{'picker-selected':day.selected, 'picker-off':!day.selectable, 'hover':day.hover && day.selectable}">{{day ? day.format('D') : ''}}</div>
Related
I'm using the ion-datetime component from Ionic 6 with ionic/angular.
The time-selector is opened, a pop-over is shown with two ion-picker-internal to select hour and minute. You can swipe up and down to select the desired value. If the currently selected value is tapped, the number keyboard is opened, which looks very awkward and confusing.
I know there is an issue in Ionic that the popover is not fully shown when at the edge of the screen. That happens when the keyboard is opened and makes the issue even worse.
See screenshot
My goal is to have the keyboard not opened in the first place.
This is the HTML snippet where the ion-datetime used in my application:
<ion-datetime name="startDate"
[(ngModel)]="inputActivity.startDate"
presentation="date-time"
required="true"
class="ion-no-padding"
slot="content"
></ion-datetime>
I've already studied the Ionic Datetime as well as keyboard related documentation. Setting inputmode="none" didn't help.
And here is a Plunkr to reproduce the issue (no Angular, just Ionic). Issue happens on iOS and Android. You might have to open the preview in a separate tab to be usable.
try this
<ion-item button="true" id="open-date">
<ion-icon name="calendar-outline" slot="start"></ion-icon>
<ion-label>{{inputActivity_startDate | date: 'dd/MM/yyyy H:mm' }}</ion-label>
<ion-popover trigger="open-date">
<ng-template>
<ion-datetime
required="true"
class="ion-no-padding"
presentation="time-date"
min="1950-01-01" max="2050-01-01"
[(ngModel)]="inputActivity_startDate"
displayFormat="D MMM YYYY H:mm"
show-default-buttons="true"
></ion-datetime>
</ng-template>
</ion-popover>
and change inputActivity.startDate to inputActivity_startDate in .ts file
I'm new to Xamarin and I'm trying to use the Iconize NuGet package for Xamarin, but I'm not having much luck. At the moment I'm working with a simple Android app. I've installed Iconize per the instructions and, save for an error on the line:
FormsPlugin.Iconize.Droid.IconControls.Init(Resource.Id.toolbar, Resource.Id.tabs);
(the compiler didn't like the Resource.Id.toolbar or Resource.Id.tabs so I removed it) everything compiles and runs. However, when I try to add an IconButton with a Fontawesome image, I get "System.NullReferenceException: Object reference not set to an instance of an object." error that points back to
the line LoadApplication( new App() ); in the MainActivity.cs.
I'm trying to add the IconButton to a grid in code (not XAML) using
grid.Children.Add( new IconButton
{
Image = "fa-info-circle"
}, 3, 2 );
Any ideas on how to make this work? The examples on the Iconize page haven't been very useful and I haven't found any examples on Google.
Okay I finally found something that was useful. I found a clue on this page and some other information on the project issues page on Github.
Ultimately, to get the icon to display I used
grid.Children.Add( new IconButton
{
Text = "fa-info-circle",
}, 3, 2 );
It was the Text property and not the Image property that I should have used.
Hope this helpful to someone else.
I'm using Cordova 3.6.4 in Visual Studio 2013 Community Update 4 to build an apps with a "chat" functionality, the main reason that I use this technology is because I want to, hopefully, write once and can use it in all platforms such as Android phones, iPhones, all mobile phone browsers, all desktop browsers.
In order to let the users inputting the "message" to be sent, I create a [div] which is contenteditable="true" at the bottom left of the html, at the right hand side of this [div], I have two [image buttons], one is the [happy face] button, the other is the [send button]. (You know, just like Whatsapp, Line and WeChat!)
At any time the user can click the [happy face] button to select one of the many "face image" to insert into the cursor at the [div], then I'll add the html codes into the [div], e.g. div.innerHTML += '< img src="1.jpg">'
So, the innerHTML of this [div] can contain characters AND images, e.g.
12< img src="1.jpg" />34< img src="2.jpg" />
Of course, the actual display is:
12[1st Picture]34[2nd Picture]
If the cursor is at the end of this [div], and I clicked the [BACKSPACE], I expect the [2nd Picture] will be removed, if I clicked the [BACKSPACE] again, I expect the letter [4] will be removed from the [div], this is work at ALMOST every platform I mentioned including all mobile browsers in android and iphone/ipad, all desktop browsers. But it does not work when I build an Android app and run it in any Android phone.
Running it as a WebView in android phone, when I click the the [BACKSPACE], the letter [4] is removed instead of the [2nd Picture], when I click the [BACKSPACE] again, the letter[3] is removed. I can NEVER remove the 2 images no matter which IME I'm using.
To work around, I tried to add a keyup/keydown/keypress listener to the [BACKSPACE] but it never fires.
At last, to work around this [BUG], I need to add a third [X] image button and use JavaScript string.replace to remove the < img> tag when users click this [X] button, but it looks very stupid to the users!
It makes me crazy that ALL IMEs do not remove the image for me by pressing the [BACKSPACE], and if the key events are not fired, I cannot remove the images myself!
I tried ALMOST, I think, ALL the suggestions provided by stackoverflow but they don't work at all, either not applicable to CORDOVA, or with compilation error such as [command failed with exit code 8] in Visual Studio.
What should I do?
I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).
I have an address search field in my app. When this field gets focus I want to open the keyboard as in the following image.
It works fine for iOS when the keyboard type is set to Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION as in the following code
var search = Titanium.UI.createSearchBar({
barColor:'#c8c8c8',
autocorrect:true,
hintText:'enter address',
height:'43dp',
top:'75dp',
autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_WORDS,
keyboardType:Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION
});
However on Android it appears as in the following image.
I am using Titanium mobile SDK 1.7.5
You should probably add :
softKeyboardOnFocus : Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS
Unfortunately, it may be overridden by the system. Try it on another Android system (3.0 for example) if the problem persist.