I am developing a NativeScript application. I want to use radiobutton functionality in my application.
I have tried to achieve this by using "nativescript-radiobutton" plugin, but it doesn't support in iOS.
Is there any solution through which it works for both Android and iOS platform?
Thank you in advance.
Use this Html for the radio button -
<Label text="{{ checkYes ? '' : ''}}"
class="{{ checkYes ? 'fontawesome' : 'radioBefore'}}"
(tap)="changeAction()">
</Label>
Apply these two classes for Font Awesome -
.font-awesome {
font-family: "fontawesome-webfont";
font-size: 24;
}
.radioBefore {
font-family: "fontawesome-webfont";
font-size: 24;
}
Add Font-awesome.ttf file in fonts folder and then change the radio buttons selected or unselected with changeAction()
Function - Initialize
this.changeYes = true
changeGenderMale(){
if(this.changeYes == true)
this.changeYes = false;
else
this.changeYes = true;
}
Related
I'm using Nativescript Angular for my project.
I have added the class to differentiate tablet/phone on my root view in app.component which is .page-tablet for tablets and .page-phone for phones, so that I can specify styles for tablets/phones by using different selectors.
This works fine generally, but when it comes to modal view, the selector doesn't work.
For example I have a class .modal-container in my modal, and I set in the app.css file :
.page-phone .modal-container { font-size: 15; }
.page-tablet .modal-container { font-size: 30; }
Neither my phone nor the tablet would take the font-size here.
This issue only happens in Modal dialog though, other components work as expected.
Any ideas?
Edit
These are my app.component codes
app.component.tns.html
<page-router-outlet #RootElem></page-router-outlet>
app.component.ts
#ViewChild('RootElem', { static: false }) rootElem: ElementRef;
ngAfterViewInit() {
if (device.deviceType === 'Tablet') {
this.rootElem.nativeElement.className = 'page-tablet';
} else if (device.deviceType === 'Phone') {
this.rootElem.nativeElement.className = 'page-phone';
}
}
This is an issue that sounds like it's already been fixed, but even after upgrading to {N} 4.2.4 I find that I can't load a local image file within a webview on an iOS device. Here's some sample code...
main-page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<GridLayout>
<WebView src="{{ htmlsrc }}" />
</GridLayout>
</Page>
main-view-model.js
var Observable = require("data/observable").Observable;
function createViewModel() {
var viewModel = new Observable();
let style = '<style>div.marker {background-color: gray; margin-right: 24px;} img.marker {margin: 5px 0px 0px 5px;} li {font-size: 18pt; margin-bottom: 8px;} </style>'
let htmlpre = '<!DOCTYPE html><html><head>' + style + '</head><body>';
let htmlpost = '</body></html>';
viewModel.htmlsrc = htmlpre;
viewModel.htmlsrc += '<p>This is an image: </p>'
viewModel.htmlsrc += '<div class="marker"><img class="marker" src="./marker_r.png"></div>';
viewModel.htmlsrc += htmlpost;
return viewModel;
}
exports.createViewModel = createViewModel;
I've tried all kinds off variations on the img tag's src property, such as
"marker_r.png"
"./marker_r.png"
"~/marker_r.png"
I've also tried specifying the fully-qualified and encoded path, all to no avail. I've seen issue 4443 that seems to address the topic, as well as stackoverflow.com/questions/44505825/nativescript-ios-webview-local-files, but am still left wondering how to get this to work.
Things seems changed after WKWebview, it seems to allow read access only when we specifically mention the base path. Unfortunately {N} implementation doesn't allow an option to set the base bath but here is a workaround you can try.
Load local images into WebView
If you like to keep the data binding working, then you will have to override the WebView's prototype chain for iOS and modify this method here.
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
}
I have a map inside a TinyMCE editor in Joomla 3, and it seems like when it is saved Joomla is messing with the html. I just want no filtering or anything.
So this is the HTML I enter:
<img class="mapper noborder"
height="410"
id="Map_of_North_America"
name="Map_of_North_America"
src="/images/State Maps/Map_of_US_web_2014(1).png"
style="border-width: 0px; border-style: solid;"
usemap="#m_Map_of_North_America" width="476" />
and this is what Joomla saves:
<img class="mapper noborder"
src="images/State Maps/Map_of_US_web_2014(1).png"
width="476"
height="410"
name="Map_of_North_America"
style="border-width: 0px; border-style: solid;" />
It removes the id, as well as the usemap=
I have tried setting text-filtering to none, changing up the TinyMCE in the plugin manager etc... Thoughts?
I had the same problem however with JCE (I am not using TinyMCE) bu I guess, this could help :
in JCE / Edit Profile / Features and Layout: at the bottom : check the option "Adds support for OBJECT, EMBED, AUDIO, VIDEO and IFRAME elements. Required by the Media Manager and when inserting Adobe® Flash®, Quicktime® and other media file types"
in JCE / Edit Profile / Editor parameters/advanced : set all to yes
in JCE / Edit Profile / Plugin parameters/media support : set all to yes
This is what solve the problem for me :
Navigate to Content → Article Manager / Parameters (icon top right)
Scroll down to Filtering Options, highlight all Filter groups except Super Administrator, and select Filter type of Blacklist
You could also set the editor as No Editor in the Global Configurations and edit the article.
Go to: plugins/editors/tinymce
open tinymce.php
Find this
Found this section:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
}
add |usemap after style, just like:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style|usemap]';
}
Is there a way to add img src tag in programmatic for a dijit.form.button?
In declarative, we can do something like this :
<div dojoType="dijit.form.Button"><img src="images/img.png"/></div>
In this case, the dijit button is completely replace by the image.
If I try something like this, the image not replace button but appear in :
var button = new dijit.form.Button({
showLabel : false,
label : "Validate",
iconClass : "alphaIcon validateIcon",
})
Your help would be very appreciated.
Thanks in advance
I think your approach should be to do exactly what you did AND create custom css to modify the appearance.
myIconButton.dijitButton .dijitButtonNode {
border: 0;
background-image: none;
background-color: transparent;
box-shadow: none;
}
var button = ... // same as above
dojo.addClass(button.domNode, 'myIconButton');
To directly answer your question, you could create your own button widget with a custom template that only had the image source.
dojo.declare("MyIconButton", [Button], {
templateString: '<div><img src="${imageSrc}"></img></div>'
});
NOTE: I didn't test this approach and there may be other modifications that you would need in MyIconButton because the base Button class would be expecting other nodes in the template.
The following will do what you want
this.button1.attr('label','<img src="' + this.constants.packagePrefix + '/images/button1.gif"/>');
I found it here:
http://mail.dojotoolkit.org/pipermail/dojo-interest/2009-August/038353.html
I have been using a class with background-image for buttons. This really made it hard to dynamically set the image. So, I had success using this:
domStyle.set(myButton.iconNode, 'background-image', 'url(images/icon.png)');
The trick was using iconNode, rather than domNode or containerNode.