I am trying to get the user input from my <paper-input-container> using this code:
<paper-input-container id="nameInput">
<label slot="label">Your name</label>
<iron-input slot="input">
<input on-keydown="keypressed" value="{{first}}" id="nameBox">
</iron-input>
</paper-input-container>
In my properties, I have:
static get properties() {
return {
first:{
type:String,
value:''
}
}
}
and my keypressed function is:
keypressed(e) {
console.log(this.first);
}
I've been able to get it to work with the <paper-input> element, but I wasn't able to style it the way I wanted to. If you know how to increase the user input text size on paper-input in Polymer 2.0, that would also help.
Polymer's change notification requires an event naming convention that the native <input> does not follow, so the two-way data binding you seek requires special syntax, as shown here:
target-prop="{{hostProp::target-change-event}}"
In your case, that would be:
<input value="{{first::input}}>
This tells Polymer to set first equal to value when the input event occurs from the <input>. This is equivalent to:
const inputEl = this.shadowRoot.querySelector('input');
inputEl.addEventListener('input', () => this.first = value);
demo
Alternatively, you could bind first to <iron-input>.bindValue, which reflects the value of <input>:
<iron-input bind-value="{{first}}">
<input>
</iron-input>
demo
if you know how to increase the user input text size on paper-input in polymer 2.0, that would also help
The font-size of the <paper-input>'s inner <input> can be styled with the --paper-input-container-input CSS property of <paper-input-container>:
<dom-module id="x-foo">
<template>
<style>
paper-input {
--paper-input-container-input: {
font-size: 40px;
};
}
</style>
<paper-input label="My label" value="My value"></paper-input>
</template>
</dom-module>
demo
Is it possible to modify style of "Pay with Card" Stripe button? I've tried modifying by,
adding a new class defined in external style sheet
modifying its own class of stripe-button in external style sheet
and editing it inline with style=""
But I cannot get the button to change its style.
It looks like it might be possible with the custom integration instead of the simple integration (source: https://stripe.com/docs/checkout#integration-simple), but I was hoping there was something simpler.
Button with default style:
Does anyone have experience with this?
(I'm integrating into Ruby on Rails if that makes any difference.)
None of those worked for me. I ended up hiding the button in javascript and making a new one.
<form action="/your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="xxx"
data-amount="999"
data-name="zzz"
data-locale="auto">
</script>
<script>
// Hide default stripe button, be careful there if you
// have more than 1 button of that class
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
<button type="submit" class="yourCustomClass">Buy my things</button>
</form>
Search for this class:
.stripe-button-el span
I think this is where you have to modify your own button's style.
You may overwrite it within your own external css file.
Although a little hacky, for anyone wanting a super quick and simple way of using a different button along with the "simple integration", especially if you don't have "solid JavaScript skills", you can just hide the Stripe button with;
.stripe-button-el { display: none }
This way, any submit button within the form will call the checkout so you can just use the button you already had before introducing Stripe.
The following will override the background color with the custom color #EB649C. Disabling the background-image is required, as well as styling both the button and it's inside span tag.
button.stripe-button-el,
button.stripe-button-el>span {
background-color: #EB649C !important;
background-image: none;
}
You should use data-label its part of the regular stripe Checkout API:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= ENV.fetch('STRIPE_PUBLISHABLE_KEY') %>"
data-amount="10000"
data-label="Proceed to Pay with Card"
...
...
data-locale="auto">
</script>
Using jQuery, you can also simply scale the button like this:
<script>
$(function() {
$(".stripe-button-el").css({'transform': 'scale(2)'});
});
</script>
Or replace it by a button with any image you want, like this:
<script>
$(function() {
$(".stripe-button-el").replaceWith('<button type="submit" class="pay"><img src="/assets/paywithcard.jpg"></button>');
});
</script>
You can remove the button styles with Jquery and add your own. Worked a charm for me:
<script type="text/javascript">
$(document).ready(function(){
$(".stripe-button-el span").remove();
$("button.stripe-button-el").removeAttr('style').css({
"display":"inline-block",
"width":"100%",
"padding":"15px",
"background":"#3fb0ac",
"color":"white",
"font-size":"1.3em" }).html("Sign Me Up!");
});
</script>
The .stripe-button-el span actually works.
But you need to add !important in CSS to overwrite the default CSS.
You can try this,
$(".stripe-button-el").find("span").remove();
$(".stripe-button-el").html("Proceed to pay");
Pay with card is inside a span.
For those of you who want to change the background color of the button, make sure you do something like
.stripe-button-el span {
background: #5e366a !important;
background-image:none !important;
background-color: #5e366a !important;
}
in your css file. this will change the actual background of the button fr you. If you wish to have the parent div changed, you can do the same thing without the span or do a direct inline style.
I have a simple example at plunker. I have an ng-show on one element and a select as another element. The select should toggle showing/hiding the other (input) element. Initially setting the select to Yes shows the other input element as expected. Then setting the select to No does toggle the scope value to false as expected, but does not hide the input element.
I've scoured the other posts related to this and the ones I found are around having or not having {{}} on the ng-show (I don't as it should be) or not having the value on $scope (which I do). I thought is may be a $scope.apply() issue, but then why does the 1st change to Yes work? Also adding the apply still does not make the No(false) work. What am I missing?
TIA!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.conf = {};
});
You need to check ng-show="conf.is_ieee=='true'" instead of ng-show="conf.is_ieee". Check this plunker.
<div class="col-md-4" ng-show="conf.is_ieee=='true'">
<label class="form-label">IEEE Conference ID:</label>
<input type="text" class="form-control" name="ieee-id" ng-model="conf.ieee_id"/>
</div>
http://plnkr.co/edit/MXvuhSPB0ChJyDrvPI55?p=preview
Can someone help me look at this plunkr. The style seems not to be working.
<!DOCTYPE html>
<div ng-controller="testController">
<h1>Hello Plunker!</h1>
<input type="text" name="bDay" ng-model="mydate | date : 'dd-MM-yyyy'" id="" value="" ng-click="showDatePicker('bday')" />
<div date-picker="mydate" view="year" min-view="date" ng-class="{hidden: (picker !== 'bday')}" auto-close="true"></div>
{{mydate}}
</div>
<script>
var app = angular.module('sample', ['datePicker']);
app.controller('testController', ['$scope', function($scope){
$scope.picker = 'null';
$scope.showDatePicker = function(picker){
$scope.picker = 'null';
setTimeout(function(){
$scope.picker = picker;
$scope.$apply();
}, 100);
}
}]);
</script>
http://plnkr.co/edit/94TifOjXZjEAhA25Kl4A?p=preview
I assume you mean you want it to look like this datepicker. For the most part, it does look like the yearly datepicker from that page. Few differences:
The arrows need the "prev" and "next" classes for proper font sizing
The difference in color is the difference between the "active" and "now" classes being applied to that year box
Your datepicker isn't in a popup since the html is inserted inline, rather than as a grandchild of an element with body as its parent.
If you want any gray dates, you need to apply the "old" class.
Make sure your jquery versions are not clashing.i had the exact same issue and resolved it.You cant use jquery 1.10.4 and 1.1.34....etc...
Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) The user will check checkboxes to indicate which items should be deleted. If a checkbox is unchecked, that item should revert back to its normal look.
What's the best way to apply or remove the CSS styling?
Q2. Suppose I want to allow each user to personalize how my site is presented. E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.
What's the best way to apply the CSS styling the user selects/inputs?
Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:
ng-class - use when the set of CSS styles is static/known ahead of time
ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
ng-disabled and ng-readonly - use to restrict form element behavior
ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations
The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.
When the user changes the UI, Angular will automatically update the associated elements on the page.
Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.
ng-class accepts an "expression" that must evaluate to one of the following:
a string of space-delimited class names
an array of class names
a map/object of class names to boolean values
Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
... HTML to display the item ...
<input type="checkbox" ng-model="item.checked">
</div>
Above, we used ng-class expression type #3 - a map/object of class names to boolean values.
Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this.
ng-style accepts an "expression" that must evaluate to:
an map/object of CSS style names to CSS values
For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer):
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">
Fiddle for both of the above.
The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If 'red' is entered in the textbox, a div becomes hidden.
I have found problems when applying classes inside table elements when I had one class already applied to the whole table (for example, a color applied to the odd rows <myClass tbody tr:nth-child(even) td>). It seems that when you inspect the element with Developer Tools, the element.style has no style assigned. So instead of using ng-class, I have tried using ng-style, and in this case, the new CSS attribute does appear inside element.style. This code works great for me:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="myvar === 0 && {'background-color': 'red'} ||
myvar === 1 && {'background-color': 'green'} ||
myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>
[...more amazing code...]
</tr>
Myvar is what I am evaluating, and in each case I apply a style to each <td> depending on myvar value, that overwrites the current style applied by the CSS class for the whole table.
UPDATE
If you want to apply a class to the table for example, when visiting a page or in other cases, you can use this structure:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
Basically, what we need to activate a ng-class is the class to apply and a true or false statement. True applies the class and false doesn't. So here we have two checks of the route of the page and an OR between them, so if we are in /route_a OR we are in route_b, the active class will be applied.
This works just having a logic function on the right that returns true or false.
So in the first example, ng-style is conditioned by three statements. If all of them are false, no style is applied, but following our logic, at least one is going to be applied, so, the logic expression will check which variable comparison is true and because a non empty array is always true, that will left an array as return and with only one true, considering we are using OR for the whole response, the style remaining will be applied.
By the way, I forgot to give you the function isActive():
$rootScope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
NEW UPDATE
Here you have something I find really useful. When you need to apply a class depending on the value of a variable, for example, an icon depending on the contents of the div, you can use the following code (very useful in ng-repeat):
<i class="fa" ng-class="{ 'fa-github' : type === 0,
'fa-linkedin' : type === 1,
'fa-skype' : type === 2,
'fa-google' : type === 3 }"></i>
Icons from Font Awesome
This works well when ng-class can't be used (for example when styling SVG):
ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"
(I think you need to be on latest unstable Angular to use ng-attr-, I'm currently on 1.1.4)
I have published an article on working with AngularJS+SVG. It talks about this issue and numerous others. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS
span class="circle circle-{{selectcss(document.Extension)}}">
and code
$scope.selectcss = function (data) {
if (data == '.pdf')
return 'circle circle-pdf';
else
return 'circle circle-small';
};
css
.circle-pdf {
width: 24px;
height: 24px;
font-size: 16px;
font-weight: 700;
padding-top: 3px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-image: url(images/pdf_icon32.png);
}
This solution did the trick for me
<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
You can use ternary expression. There are two ways to do this:
<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>
or...
<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>
Another option when you need a simple css style of one or two properties:
View:
<tr ng-repeat="element in collection">
[...amazing code...]
<td ng-style="{'background-color': getTrColor(element.myvar)}">
{{ element.myvar }}
</td>
[...more amazing code...]
</tr>
Controller:
$scope.getTrColor = function (colorIndex) {
switch(colorIndex){
case 0: return 'red';
case 1: return 'green';
default: return 'yellow';
}
};
See the following example
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo Changing CSS Classes Conditionally with Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="res/js/controllers.js"></script>
<style>
.checkboxList {
border:1px solid #000;
background-color:#fff;
color:#000;
width:300px;
height: 100px;
overflow-y: scroll;
}
.uncheckedClass {
background-color:#eeeeee;
color:black;
}
.checkedClass {
background-color:#3ab44a;
color:white;
}
</style>
</head>
<body ng-controller="TeamListCtrl">
<b>Teams</b>
<div id="teamCheckboxList" class="checkboxList">
<div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">
<label>
<input type="checkbox" ng-model="team.isChecked" />
<span>{{team.name}}</span>
</label>
</div>
</div>
</body>
</html>
As of AngularJS v1.2.0rc, ng-class and even ng-attr-class fail with SVG elements (They did work earlier, even with normal binding inside the class attribute)
Specifically, none of these work now:
ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"
As a workaround, I've to use
ng-attr-otherAttr="{{current==this_element?'active':''}}"
and then style using
[otherAttr='active'] {
... styles ...
}
One more (in the future) way to conditionally apply style is by conditionally creating scoped style
<style scoped type="text/css" ng-if="...">
</style>
But nowadays only FireFox supports scoped styles.
There is one more option that I recently discovered that some people may find useful because it allows you to change a CSS rule within a style element - thus avoiding the need for repeated use of an angular directive such as ng-style, ng-class, ng-show, ng-hide, ng-animate, and others.
This option makes use of a service with service variables which are set by a controller and watched by an attribute-directive I call "custom-style". This strategy could be used in many different ways, and I attempted to provide some general guidance with this fiddle.
var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
var vm = this;
});
app.controller('MainCtrl', function(MainService){
var vm = this;
vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
return {
restrict : 'A',
link : function(scope, element, attr){
var style = angular.element('<style></style>');
element.append(style);
scope.$watch(function(){ return MainService.theme; },
function(){
var css = '';
angular.forEach(MainService.theme, function(selector, key){
angular.forEach(MainService.theme[key], function(val, k){
css += key + ' { '+k+' : '+val+'} ';
});
});
style.html(css);
}, true);
}
};
});
well i would suggest you to check condition in your controller with a function returning true or false .
<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>
and in your controller check the condition
$scope.getTodayForHighLight = function(today, date){
return (today == date);
}
One thing to watch is - if the CSS style has dashes - you must remove them. So if you want to set background-color, the correct way is:
ng-style="{backgroundColor:myColor}"
Here's how i conditionally applied gray text style on a disabled button
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
styleUrls: [ './app.component.css' ],
template: `
<button
(click)='buttonClick1()'
[disabled] = "btnDisabled"
[ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
{{btnText}}
</button>`
})
export class AppComponent {
name = 'Angular';
btnText = 'Click me';
btnDisabled = false;
buttonClick1() {
this.btnDisabled = true;
this.btnText = 'you clicked me';
setTimeout(() => {
this.btnText = 'click me again';
this.btnDisabled = false
}, 5000);
}
}
Here's a working example:
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.html