I'm using Stripe Elements on my site but running into some issues with the icon styling.
I've done some searching and found this link but they have closed the ticket saying the issue was fixed.
As you can see on my screenshot here the icon is flush to the edge and I'd like some padding to the left.
I've tried adding padding via my JS like so but it doesn't change anything.
var style = {
base: {
iconColor: "#fff",
padding: "5px 10px 5px 20px",
backgroundColor: "#a91537",
color: "#fff",
fontWeight: "400",
fontFamily: "Montserrat, sans-serif",
fontSize: "18px",
lineHeight: "80px",
fontSmoothing: "antialiased",
showIcon: false,
textIndent: "10px",
":-webkit-autofill": {
color: "#fff",
},
"::placeholder": {
color: "#fff",
},
},
invalid: {
color: "#fa775a",
iconColor: "#fa775a",
},
};
I've even tried adding it via CSS but because it's pulled in via an iframe my styling does nothing.
You need to be changing the style of the container you mount the Element to, not the Element itself. For example, if you were mounting your card element to #card-element you could add some basic styling like this:
<style>
#card-element {
padding: 12px;
}
</style>
<div id="card-element"></div>
You can read more about this here: https://stripe.com/docs/js/element/the_element_container?type=card
Related
I am looking to get a loading icon as below in Extjs. I came across Extjs loadMask but it is not exactly what I am looking for. Are there any other existing components that I could use and perhaps make changes to, to achieve this behavior and look? If not, any suggestions on how this could be implemented?
Updates: I am trying to add the icon for every row in a table and below is the code which is included as one of the items in a list under this.columns. However, nothing gets displayed on the rows. Am I missing something ?
{
xtype: 'actioncolumn',
sortable:false,
menuDisabled:true,
width:50,
hidden:false,
items: [{
xtype:'component',
cls:'spinner-circular',
height:50
}]
}
We made our own component to display loadicon as following :
it's just as simple as :
{
xtype: 'component',
cls: 'spinner-circular',
height: 50
}
with css being :
#keyframes spinner-circular {
to {transform: rotate(360deg);}
}
.spinner-circular:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 1px solid #ccc;
border-top-color: #f48b31;
animation: spinner-circular .6s linear infinite;
}
I tried to just use below setting but turn out the header and footer positions will be changed. Please advise.
await page.pdf({
path: FILENAME,
format: 'A4',
margin: {
top: "0px",
right: "0px",
bottom: "0px",
left: "0px"
},
printBackground: true // required for photos otherwise blank
});
try preferCSSPageSize: true in page.pdf options.
This allows you to specify the margin's for page in the CSS and it will take priority.
**place CSS **
<style>
#page
{
size: A4 portrait;
margin:0;
}
</style>
I'm attempting a theme type system, where i can create themes as json files, and then style my app based on it. For the most part all of it works except 2 parts for some reason,
Text Color
Background Colors
So everything else is styled correctly, but the backgroundColor and text colors just wont for some reason. I have checked multiple times over that the theme's values are available, console.log prints them fine too. There's no error message, and other styling from the theme works fine.
Here's where i load in the themes
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
let theme = {};
function loadDefaultTheme() {
parseTheme(themes.DEFAULT);
}
function parseTheme(json) {
theme.name = json.name;
theme.backgroundColor = json.backgroundColor;
theme.navBackgroundColor = json.navBackgroundColor;
theme.blueColor = json.blueColor;
theme.redColor = json.redColor;
theme.darkBlueColor = json.darkBlueColor;
theme.placeholderColor = json.placeholderColor;
theme.buttonTextColor = json.buttonTextColor;
theme.textColor = json.textColor;
theme.iconColor = json.iconColor;
theme.iconActiveColor = json.iconActiveColor;
theme.navTextColor = json.navTextColor;
theme.navActiveTextColor = json.navActiveTextColor;
}
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
Here's my styling
const welcomeStyles = StyleSheet.create({
background: {
flex: 1,
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT
},
logo: {
width: '50%',
height: '50%',
alignSelf: 'center'
},
text: {
color: ThemeParser.theme.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
appNameText: {
fontWeight: 'bold',
fontSize: 30,
marginTop: -60
},
descText: {
fontSize: 22
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.theme.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
}
});
Finally, my theme:
{
"name": "Default",
"backgroundColor": "#1D1D1D",
"navBackgroundColor": "#343434",
"blueColor": "#05b7ed",
"redColor": "#FF5757",
"darkBlueColor": "#047A9E",
"placeholderColor": "#545454",
"buttonTextColor": "white",
"textColor": "white",
"iconColor": "#047A9E",
"iconActiveColor": "#05B7ED",
"navTextColor": "#C1C1C1",
"navActiveTextColor": "white"
}
I have this bit elsewhere but this works for some reason...
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} />
Edit: Components which the styles are not being applied. They work fine when i statically type a color like 'white' or '#1d1d1d'
<View style={styles.loginStyles.loginView}>
<Input
placeholder='Token'
placeholderTextColor={ThemeParser.theme.placeholderColor}
returnKeyType='done'
inputStyle={styles.loginStyles.token}
leftIcon={<Ionicons name='md-key' size={32} color={ThemeParser.theme.blueColor} />}
onChangeText={text => this.setState({token: text})}
/>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.blueColor, borderRightColor: 'black', borderRightWidth: 4}]} onPress={() => AniListAuth.getALCode()}>
<Text style={global.globalStyles.buttonText}>Get Code</Text>
</TouchableOpacity>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} onPress={() => AniListAuth.login(this.state.token)}>
<Text style={global.globalStyles.buttonText}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
The background color for the TouchableOpacity seems to work fine, but not for the View background color or Text color
Edit2: Here's a snack of the project thus far if my code above isn't as clear... http://snack.expo.io/Hk1_2AOtr
Check out the working snack.
This is because you are exporting the theme object before you are parsing it.
Your theme object is empty when you are exporting but you are parsing and adding properties to your object after it is exported which means you are calling themeParser.loadDefaultTheme() later in your code, by the time the empty theme object has already been exported.
It would be better if you use your themes object in your ThemeParser.js file:
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
and use it in GlobalStyles like so:
buttonText: {
color: ThemeParser.themes.DEFAULT.textColor,
fontWeight: 'bold',
fontSize: 20
}
And in WelcomeStyles like so:
text: {
color: ThemeParser.themes.DEFAULT.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.themes.DEFAULT.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
},
You can make the checks according to your needs when you want to load the themes object or theme object.
I have this Zingchart(gauge type) which displays random numbers from 1 to 100 using JS. I need to achieve the same via PHP. How can I do this? What are the necessary changes that needs to be done?
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * 100);
callback(JSON.stringify(tick));
refresh:{
type:"feed",
transport:"js",
url:"feed()",
interval:1000,
resetTimeout:1000
},
The necessary changes to work in php would be to set up a endpoint to hit. If you did something like:
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * <?php $phpValue ?>);
callback(JSON.stringify(tick));
The variable $phpValue would not work for a Javascript feed function because that value would printed only ONE time as the server compiles the php ONCE.
What to do then?
You want to add a proper url endpoint which returns the tick format. That would look something like this:
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=2',
interval: 200
}
Where the url returns the following data structure:
[{
plot0: 3,
plot1: 18,
'scale-x': "13:33:48" // optional scale-x argument to produce [x,y] plotting
}]
You can read more on the http docs.
Solution
Demo here
// define top level feed control functions
function clearGraph() {
zingchart.exec('myChart', 'clearfeed')
}
function startGraph() {
zingchart.exec('myChart', 'startfeed');
}
function stopGraph() {
zingchart.exec('myChart', 'stopfeed');
}
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
//clear start stop click events
document.getElementById('clear').addEventListener('click', clearGraph);
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
const myConfig = {
//chart styling
type: 'line',
globals: {
fontFamily: 'Roboto',
},
backgroundColor: '#fff',
title: {
backgroundColor: '#1565C0',
text: 'Real-Time Line Chart',
color: '#fff',
height: '30x',
},
plotarea: {
marginTop: '80px'
},
crosshairX: {
lineWidth: 4,
lineStyle: 'dashed',
lineColor: '#424242',
marker : {
visible : true,
size : 9
},
plotLabel: {
backgroundColor: '#fff',
borderColor: '#e3e3e3',
borderRadius:5,
padding:15,
fontSize: 15,
shadow : true,
shadowAlpha : 0.2,
shadowBlur : 5,
shadowDistance : 4,
},
scaleLabel: {
backgroundColor: '#424242',
padding:5
}
},
scaleY: {
guide: {
visible: false
},
values: '0:100:25'
},
tooltip: {
visible: false
},
//real-time feed
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=1',
interval: 500,
},
plot: {
shadow: 1,
shadowColor: '#eee',
shadowDistance: '10px',
lineWidth:5,
hoverState: {visible: false},
marker:{ visible: false},
aspect:'spline'
},
series: [{
values: [],
lineColor: '#2196F3',
text: 'Blue Line'
},{
values: [],
lineColor: '#ff9800',
text: 'Orange Line'
}]
};
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
margin: 0 auto;
height: 380px;
width: 98%;
box-shadow: 5px 5px 5px #eee;
background-color: #fff;
border: 1px solid #eee;
display: flex;
flex-flow: column wrap;
}
.controls--container {
display: flex;
align-items: center;
justify-content: center;
}
.controls--container button {
margin: 40px;
padding: 15px;
background-color: #FF4081;
border: none;
color: #fff;
box-shadow: 5px 5px 5px #eee;
font-size: 16px;
font-family: Roboto;
cursor: pointer;
transition: .1s;
}
.controls--container button:hover {
opacity: .9;
}
/*button movement*/
.controls--container button:active {
border-width: 0 0 2px 0;
transform: translateY(8px);
opacity: 0.9;
}
.zc-ref { display:none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart">
<a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
</div>
<div class="controls--container">
<button id="clear">Clear</button>
<button id="stop">Stop</button>
<button id="start">Start</button>
</div>
</body>
</html>
I have a jsx style that looks like this:
let styles = {
appBarStyle: {
display: 'flex',
flexWrap: 'nowrap',
WebkitFlexFlow: 'nowrap',
flex: '1 1 0%',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0',
margin: '0',
listStyle: 'none',
backgroundColor: '#00bcd4',
fontFamily: 'Roboto',
minHeight: '64px',
color: 'white',
fontSize: '2em',
margin: '0px',
padding: '0px',
width: '100%',
zIndex: '2',
position: 'static',
top: 'auto',
left: 'auto',
right: 'auto'
}
};
I want it to be position:fixed on smartphones and IOS, but not on desktops.
So I have some code that uses immutability-helper:
if (useFixedMenuBar) {
styles = update(styles, {
appBarStyle:{top: {$set: '0px'}},
appBarStyle:{left: {$set: '0px'}},
appBarStyle:{right: {$set: '0px'}},
appBarStyle:{position: {$set: 'fixed'}},
}
After the call to update, the position property is correctly updated to fixed, but the top, left, and right properties are not updated to 0px -- they still are set to auto.
What am I missing?
I think you're overwriting what's getting set to the appBarStyle key so only the last one is set, and then the update happens. Try:
styles = update(styles, {
appBarStyle:{
top: {$set: '0px'},
left: {$set: '0px'},
right: {$set: '0px'},
position: {$set: 'fixed'},
}
})