Am attempting to use Stripe elements form (v3) with a meteor form. All code runs without blowing up but nothing is rendered after mount() is called. Any ideas?
js:
Template.billing.onRendered(function(){
let elements = stripe.elements();
let style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: "#32325d",
}
};
let card = elements.create('card', {style: style});
card.mount('#card-element');
console.log("done");
})
html:
<template name="billing">
<form id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
</div>
<div id="card-errors" role="alert"></div>
</div>
<input type="submit" class="submit" value="Submit Payment">
</form>
</template>
Nevermind, it was actually rendering but the width was 0 for some reason, so messing around with the css works.
Related
I'm working with Vuetify and Stylus on this snipped of HTML
<div class="input-group input-group--dirty input-group--text-field">
<label>Language</label>
<div class="input-group__input">
<input readonly="readonly" type="text"/>
</div>
<div class="input-group__details"></div>
</div>
Is there a CSS/Stylus way to edit input-group__details based on what the status of input[readonly] is?
Something like:
if (.input-group > input has readonly)
.input-group__details
height: 0px
else
.input-group__details
height: 5px
Basically, how do I change a class based on the sibling's child attribute?
Unfortunately as of now, this cannot be achieved in CSS, and as all CSS preprocessors need to generate CSS, it also cannot be done with any pre- or post-processing whatsoever.
You will either have to change your HTML structure (make sure the targeted element comes after the readonly input, and they share the parent element), or resort to Javascript.
If you have enough time, you can also wait for selectors level 4 to arrive.
which would solve your problem with this
.input-group__input:has(input[readonly]) + .input-group__details { ... }
Well not possible with the provided markup, but if you allowed to change some markup you can get this...try to make the .input-group__details next sibling of input..
Also you don't need to assign a value to readonly...just use readonly
input[readonly]+.input-group__details {
color: red;
}
<div class="input-group input-group--dirty input-group--text-field">
<label>Language</label>
<input class="input-group__input" type="text" readonly />
<div class="input-group__details">Welcome</div>
</div>
<br>
<div class="input-group input-group--dirty input-group--text-field">
<label>Language</label>
<input class="input-group__input" type="text" />
<div class="input-group__details">Welcome</div>
</div>
You can bind class.
<div class="input-group input-group--dirty input-group--text-field" :class="'className': trueFalse">
<label>Language</label>
<div class="input-group__input">
<input readonly="readonly" type="text"/>
</div>
<div class="input-group__details"></div>
</div>
Now in your vue script:
data: {
trueFalse: false,
},
methods: {
someClassName() {
//condition of your input field
//if condition true make 'trueFalse' to true else to false
this.trueFalse = true
}
}
at last in your css:
.className {
//add your style with !important
}
can i change the style of the input field
<div id="datafeedr-2" class="widget store_widget">
<h3 class="widget-title">
Search Store
</h3>
<div id="wdgt_ss">
<script type="text/javascript">
<!--
/*
* NOTE: This JS code would be much better off
* existing in your theme's header.php file.
*/
function wash( anInput ) { if(anInput.value == anInput.defaultValue) anInput.value = ''; }
function checkWash( anInput ) { if(anInput.value == '') anInput.value =anInput.defaultValue; }
//-->
</script>
<div class="store_search_form" style="border: none;">
<form action="/search/" method="get"><input onfocus="wash(this);"onblur="checkWash(this);" value="Search store..." name="word" pmbx_context="4F13FC2D-6A04-435C-AA7C-7AA2FEF6FC7E">
<input type="submit" value="Go" pmbx_context="E41A706C-6E36-4DE6-B2C3-3DF4B01B1D30">
</form>
</div>
</div><!-- ##CACHE -->
</div>
I have tried to apply the style using class id and input field
like Css
input.store_search_form
{
code
}
but it didnt work
i need this search bar style to exactly as the default search bar which is above it
Site url
The product search bar is a plugin from www.datafeedr.com
Try this
input[type=search]
/* your style */
input[type=submit]
/* your style */
or add id for inputs
demo:
http://jsfiddle.net/vwyhm/
<input onfocus="wash(this);" onblur="checkWash(this);" value="Search store..." name="word" type="text">
Then just a class to style the width. Add type="text"
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app.
So currently, on all elements that require the theme color, I have given them the css class has-main-color.
In the controller, I get their desired color from the web service and set it to the scope as $scope.mainColor = color;.
All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the has-main-color class.
Currently, I'm trying the following:
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
As you could probably guess, this doesn't work so well.
So what would be the best approach to solve this problem using AngularJS?
Look at the documentation page for ngStyle. It has almost exactly what you want.
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
I don't think you can use a class to do this, however try this
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
Demo: Fiddle
Another easy fix
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
Demo: Fiddle
If anyone would like to use your original approach, I came across the same problem today and threw together a (tiny!) directive for style which allows for angular expressions inside inline style sheets.
https://github.com/deanmcpherson/angular-inline-style
Allows for
body { background-color: {{bgColor}}; }
With bg color attached to the appropriate scope.
<input type='text' />
I need to add placeholder text in css, something like this:
input:placeholder{content: 'placeholder text';}
You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.
Take a look at this question: How to set placeholder value using CSS?
you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.
$(document).ready(function() {
placeholders();
function placeholders() {
var count = 0;
$('input[type=text]').each(function() {
count++;
$(this).attr('placeholder', 'value ' + count);
});
}
$(document).on('click', '.delete', function() {
$(this).closest('div').remove();
placeholders();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
<div>
<input type="text"/><button class="delete">DELETE</button>
</div>
Say I have the next form:
<form action="/orders/add" class="form-horizontal" id="OrderAddForm" method="post">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<div class="control-group">
<button type="button" class="btn" id="new-order-line">New order line</button>
</div>
<div class="control-group">
<input class="btn my-hidden" type="submit" value="Save Orderr">
</div>
</form>
And my css:
.my-hidden {
display: none;
}
And my js:
$(function() {
$('#new-order-line').click(function() {
$('.my-hidden').show('slow');
});
});
So I want to display the 'Save Order' button whenever I click the 'New order line' button, but it seems that Twitter Bootstrap override my 'my-hidden' class because is inside of a 'form' element and my 'Save Order' button is always shown.
I've read that some people have the same problem
Some workaround to hide my button?
I don't view this as a problem per se. It may not be (easily) done with Twitter Bootstrap CSS rules but if the problem is that Twitter Bootstrap overrides what you want to do, you can always create your own rules with higher specificity.
One easy way would be to add to the attributes style="display: none;" since inline styles automatically enjoy top specificity.
A way of giving your class higher specificity is elaborating the selector a bit. For example, this has a higher specificity than your example but I don't know if it's enough:
.form-horizontal .control-group .my-hidden { display: none; }
(I hope I understood your problem correctly... berate me if not ;)