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';
}
}
Related
I have set boolean variable to false and on click of button I want to change its background color in scss file. But it looks like display variable is not set to true on :active, how can I achieve this functionality?
Here is my scss file
$display : false;
.bot {
&:active {
$display: true;
display: none;
}
}
#if $display {
.bot {
background-color: brown;
}
}
Here is my html file
<button class="bot" (click)="xy()">Table
</button>
The proper way to implement what you want to achieve is simply toggling the .active CSS selector using JavaScript:
HTML
<button class="bot" onclick="xy()">Table</button>
Scss
.bot {
background-color: brown;
&:active {
display: none;
}
}
JavaScript function
const xy = () => {
let btn = document.querySelector("button");
btn.classList.toggle(":active");
}
See it working in this fiddle: https://jsfiddle.net/ezpvc16m/2/
It makes no sense toggling a CSS selector like :active using Sass variables and booleans; :active already works like true or false. It is activated whenever an element (in this case, a button) is activated by a user. Otherwise, it's not activated.
--
Also, keep in mind that Sass is compiled to CSS and CSS doesn't have access to Sass variables and booleans.
I have create a simple CKEditor widget that highlights the elements that have the class "pink".
I have also added a "Pinkify" button to the toolbar, which replaces the HTML of the selected element with some other elements that have the class "pink".
What I observe when I click the button is that widgets are not created for the freshly inserted elements. However, when I toggle between Source mode and WYSISYG mode, the widgets get created.
See the jsfiddle and its code:
CKEDITOR.replace('ck', {
allowedContent: true,
extraPlugins: 'pink'
});
CKEDITOR.plugins.add('pink', {
requires: 'widget',
init: function(editor) {
editor.widgets.add('pinkwidget', {
upcast: function(element) {
return element.hasClass('pink');
}
});
editor.addCommand('pinkify', {
editorFocus: 1,
exec: function(editor) {
var selection = editor.getSelection(),
selectedElement = selection.getStartElement();
if (selectedElement) {
selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
editor.widgets.checkWidgets(); // needed?
}
}
});
editor.ui.addButton('pinkify', {
label: 'Pinkify',
command: 'pinkify'
});
},
onLoad: function() {
CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
}
});
I am aware of this question on Stackoverflow, but I can't get it to work with setHtml called on an element. Can you suggest how to modify the code so that widgets get created as soon as the HTML is updated?
According to the CKEditor team, it is normal that CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).
So the workaround they gave me was to rewrite the code that insert HTML in place of the selected element to:
if (selectedElement) {
selectedElement.setHtml("");
editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}
For those like me who didn't know, editor.insertHTML inserts HTML code into the currently selected position in the editor in WYSIWYG mode.
Updated jsFiddle here.
Is there anyway to change the color of the dialog window when using the kendo dialog service?
Currently it defaults to red but I need to customize the window to show a different color based on what is passed.
I tried using a kendo-dialog as my template but it doesn't show the action buttons.
<kendo-dialog title="{{title}}" (close)="Cancel()" [ngClass]="yellow">
</kendo-dialog>
I asked myself that same question a while ago and came up with a solution found in this post : Kendo UI angular DialogService - Change the title bar background color
I'll copy my answer here:
I worked a solution for this. It works but it is not elegant one bit.
Here's the plunker link that demonstrates the code :
http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
Here's the related code in the service:
const dialog: DialogRef = this.dialogService.open({
actions: message.actions,
content: MessageComponent,
title: message.title
});
const messageComponent = dialog.content.instance;
messageComponent.message = message;
//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );
return dialog.result;
And the scss:
$error: #c13;
$success: #0c5;
.kendo-override {
&.error {
kendo-dialog-titlebar {
background-color: $error;
}
}
&.success {
kendo-dialog-titlebar {
background-color: $success;
}
}
}
I'm developing an application using Angular, Semantic-UI and Animate.
I'm creating a form and I'm experiencing problems with dropdown that overlaps other inputs when it is open.
Here is a Plunker: https://plnkr.co/edit/BTCxfk
As you can see removing animated fadeIn animation from the class of Semantic-UI fields fixes the problem.
Then, what can I do to keep using both Semantic-UI and Animate and having that dropdown menu working with no bugs?
In this case it's recommended to use the built-in fade in animation (transition) in semantic-ui . this won't cause any bug on the dropdown .So first
remove animated fadeIn class , then change your code to the following :
export class App {
constructor() {
jQuery('.fields')
.transition('fade in')
;
setTimeout(() => {
jQuery('.ui.dropdown').dropdown();
}, 1000);)
}
}
Note that you can set parameters for your transition like: duration,callback... ,in transition settings:
jQuery('.fields')
.transition({
animation : 'fade in',
duration : '2s',
onComplete : function() {
alert('done');
}
})
;
For more settings see Docs
I'm new to AngularJS and I'm making made a couple of custom Angular directives to do what I used to do with Jquery, however there is one case where I'm not sure if I'm doing it the "the angular way". It works but I think there might be a better way.
I want to do is this for a search box:
When focus is on the search box the app must change the color of the text in the box from grey to black. The app must also then check the current text in the box, if it is the default text then the app must clear the text.
When the box loses focus (blur) the app must change the box's text back to grey. It must then put back the default text only if the text box is empty upon losing focus.
Here is a jsfiddle that has a directive set up to do all of this perfectly.
http://jsfiddle.net/Rick_KLN/5N73M/2/
However I suspect there is an even better way to do it.
It seems like all three those variables in the controller should be unnecessary.
I also seems like having 4 if, else statements is too much and that binding to all the events is overkill seeing as only focus and blur are used and they are specified in the if statements.
Any ideas on optimizing this directive?
The "default text" behavior you are looking for is automatically handled by the HTML5 placeholder attribute. It is supported in just about any modern browser, and can be styled using CSS, as follows:
Markup:
<input id="searchBar" type="text" placeholder="Search" />
CSS:
#searchBar { color: #858585; }
#searchBar:focus { color: #2c2c2c; }
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder { color: transparent; }
#searchBar:focus:-moz-placeholder { color: transparent; }
#searchBar:focus:-ms-input-placeholder { color: transparent; }
It's that simple.
Notes:
The pseudo-elements & pseudo-classes (-webkit-input-placeholder, etc) are what hide the placeholder text on focus. Normally it stays until you start typing.
I forked your original jsFiddle. It's not really an AngularJS app anymore:
http://jsfiddle.net/Smudge/RR9me/
For older browsers: You can still use the same code as above, but you could use Modernizr (or something similar) to fall-back to a javascript-only approach if the attribute is not supported.
You can create a custom directive that requires the ng-model directive and then within your directive's link function supply a fourth parameter that is a reference to the model. This will allow you to watch the model for changes and react accordingly. Here is the fiddle:
http://jsfiddle.net/brettlaforge/6t39j/3/
var app = angular.module('app', []);
app.directive('searchbar', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, model) {
var options = scope.$eval(attrs.searchbar);
scope.$watch(attrs.ngModel, function(value) {
// If the input element is currently focused.
if (!elm.is(":focus")) {
// If the input is empty.
if (value === undefined || value === "") {
// Set the input to the default. This will not update the controller's model.
elm.val(options.default);
}
}
});
elm.on('focus', function(event) {
// If the input is equal to the default, replace it with an empty string.
if (elm.val() === options.default) {
elm.val('');
}
});
elm.on('focusout', function(event) {
// If the input is empty, replace it with the default.
if (elm.val() === '') {
elm.val(options.default);
}
});
}
};
});
function FormCtrl($scope) {
$scope.search = "";
}