Dynamically set hintText for textarea is not displaying in ios app created using appcelerator titanium.Please advise any alternative. However it works fine in android.
if (rowId == 1 ){
$.remarktextarea.hintText = "Input Remarks";
} else if (rowId == 2) {
$.remarktextarea.hintText = "Add Annotation";
}
The HintText property of a textarea is not supported on iOS, as you can see in the documentation
I'd recommend placing a label on top of the textarea with the styling you want your hinttext to have, and add touchEnabled: false to the property, so users can't click on it (but the click will go through to the textarea instead).
Then watch for changes on the textArea <TextArea id="remarktextarea" onChange="handleChange" /> and hide and show the hinttext based on length:
function handleChange(){
$.hinttextlabel.visible = $.remarktextarea.value.length == 0
}
Related
I am implementing font size accessibility in a NativeScript-Vue app.
I want to allow or prevent Label resizing through an XML attribute for both Android and iOS, but behavior and implementation on the platforms are different.
Android
All labels are scaled by default. If I want a label not to resize, I need to call the function setTextSize in the loaded event, following this solution.
<Label text="Not resizable" #loaded="$androidFixedLabelSize($event, 70)" />
Vue.prototype.$androidFixedLabelSize = function({ object }, fontSize) {
if (object.android)
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}
iOS
Labels are not scaled by default. To resize a label, I need to use nativescript-accessibility-ext plugin and add the attribute accessibilityAdjustsFontSize.
<Label text="Resizable" accessibilityAdjustsFontSize="true" />
Having to add one attribute for fixed Android and one for resizable iOS is a bit cumbersome.
I was thinking of having all labels resizable by default, and specify if I want one not to resize through a directive or an attribute.
Can I achieve this through a custom directive? Or something else?
Update
I was able to prevent resizing on Android through a directive without hardcoding font size, but there is a problem: update is triggered only for few labels. el.nativeView.android in bind and inserted hooks is undefined.
Vue.directive("noresize", {
update: el => {
if (el.nativeView.android) {
el.nativeView.android.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, el.nativeView.fontSize);
} else {
// iOS code
}
}
});
On iOS, I would like to simply set accessibilityAdjustsFontSize="false", but this implies that it is true by default.
So the next question is: how do I set accessibilityAdjustsFontSize="true" on all Label components on iOS?
Thanks to Morten Sjøgren, developer of #nota/nativescript-accessibility-ext, I was able to add a global event. Accessibility resizing is now applied on all Label components, unless the attribute noResize is true.
app.js
import '#nota/nativescript-accessibility-ext';
import { Label } from 'tns-core-modules/ui/label';
// code
Label.on(Label.loadedEvent, ({ object }) => {
if (object.noResize) {
if (object.android) {
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, object.fontSize);
}
} else {
object.accessibilityAdjustsFontSize = "true";
}
});
<Label text="Don't resize" noResize="true" />
I cannot disable a tabstrip button. Ive tried the following running within the Tabstrips Activate event
tabButton.data("kendoButton").enable(false)
-- fails because the button isnt a kendo button
tabButton.addClass("disabled")
-- fails, disabled is added, but button is still usable
where tabButton was derived along the following lines, I know I gottten it.
var tabButton = $(".k-button")
I resolved the issue by adding a css & class as in
.disable_a_href { pointer-events: none; }
tabButton.addClass("disable_a_href")
TabStrip has explicit enable and disable functions.
If you want them to start disabled, use the class k-state-disabled on the <li> element.
Here's a fiddle showing both of these methods. Tab 2 will start disabled, and tab 3 can be toggled.
To disable all tabstrip except the active you can use this code:
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.enable(tabStrip.tabGroup.children().not(".k-state-active"), false);
I use a very simple approach ...
var tabstrip = $("#yourtabstripID").data("kendoTabStrip");
var tabContentID = $("content_div_of_that_tab").parent().attr('id');
//Enable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], true);
//Disable tab item ...
tabstrip.enable(tabstrip.tabGroup.children("[aria-controls='" + tabContentID + "']")[0], false);
I feel the code above is pretty self explanatory ...
On mobile devices, OpenLayers 3 - full screen icon, in case of Mozilla Firefox doesn't show.
Is there a way to solve this or set an icon myself to show on every device?
Thanks,
Eylul
You can easily set your own icon using the label and labelActive constructor options of ol.control.FullScreen.
$('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero');
$('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>');
if (document.addEventListener)
{
document.addEventListener('webkitfullscreenchange', fullscreenHandler, false);
document.addEventListener('mozfullscreenchange', fullscreenHandler, false);
document.addEventListener('fullscreenchange', fullscreenHandler, false);
document.addEventListener('MSFullscreenChange', fullscreenHandler, false);
}
function fullscreenHandler()
{
if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
{
$('.ol-full-screen-true').attr('title', 'Chiudi la visualizzione a schermo intero');
$('.ol-full-screen-true').html('<img src="icons/close_s.png"/>');
$('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero');
$('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>');
}
}
Solution with Fontawesome expand icon:
var fspan = document.createElement('i');
fspan.setAttribute('class', 'fa fa-expand');
...
// use it in map control definition
new ol.control.FullScreen({ label: fspan, tipLabel: 'Fullscreen' })
Is there some way to replace the default toolbar images (e.g. Bold, Italic, etc.) with Font Awesome icons?
I know this is an old issue, but on a plugin by plugin basis I've been able to add font-awesome icons to ckeditor buttons with the following code inside the plugin's init function. In my case my plugin was called trim:
//Set the button name and fontawesome icon
var button_name = 'trim';
var icon = 'fa-scissors';
//When a ckeditor with this plugin in it is created, find the button
//in the current instance and add the fontawesome icon
CKEDITOR.on("instanceReady", function(event) {
var this_instance = document.getElementById(event.editor.id + '_toolbox');
var this_button = this_instance.querySelector('.cke_button__' + button_name + '_icon');
if(typeof this_button != 'undefined') {
this_button.innerHTML = '<i class="fa ' + icon + '" style="font: normal normal normal 14px/1 FontAwesome !important;"></i>';
}
});
It hinges on knowing the class of the span inside the button, so it might not be the most convenient but it works.
The best thing is you can use Bootstrap theme on CKEditor or you can use Froala editor,It has inbuilt image uploader
I'm using CKEditor and I wrote a plugin that pops up a the CKEditor dialog.
I need to re design the ok button and add to the footer more elements like textbox and checkbox but it's seems to be to complicated to do so, so I've hide the footer part and created a uiElement in the dialog content with all what I need but now what I want is to trigger the okButton in the hidden footer but I can't find a way to do it..
Anyone?!
There may be a better way, but here's how I'm doing it:
var ckDialog = window.CKEDITOR.dialog.getCurrent(),
ckCancel = ckDialog._.buttons['cancel'],
ckOk = ckDialog._.buttons['ok'];
ckOK.click();
The trick is to get the button and then use the CKEditor Button API to simulate the click. For some reason, I was unable to call dialog.getButton('ok') because getButton is undefined for some reason. My method digs into the private data, which I doubt is the best way to do it.
From the onShow event (when defining the dialog), I was able to get the ok button like the docs indicate:
onShow: function () {
var okBtn = this.getButton('ok');
...
}
Here's the Button API: http://docs.ckeditor.com/#!/api/CKEDITOR.ui.dialog.button, and you can access the dialog API there too (I'm assuming you've already been there!!!)
You might try to add this line in your plugin.js.
var dialog = this.getDialog();
document.getElementById(dialog.getButton('ok').domId).click();
In my custom plugin, i just hide the "ok" button instead of the whole footer.
Below is a part of my plugin.js statements.
{
type : 'fileButton',
id : 'uploadButton',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser :
{
action : 'QuickUpload',
onSelect : function(fileUrl, data){
var dialog = this.getDialog();
dialog.getContentElement('tab1','urlTxt').setValue(fileUrl);
document.getElementById(dialog.getButton('ok').domId).click();
}
}
}
btw, i'm using CKEditor 4.0 (revision 769d96134b)