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'},
}
})
Related
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
I have an echart with a serie type:'custom' and I have a rendering issues on the labels.
I return this
return {
type: 'group',
children: [
{
type: 'rect',
ignore: !rectNormal,
shape: rectNormal,
style: { stroke: '#707070' }
},
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
strokeLinejoin: "round",
strokeLinecap: "round",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
]
And it' rendered like this
As you can see the text stroke have problem in rendering the M letters and the strokeLinejoin and strokeLinecap did not solve the problem.
Do someone know how to fix this?
I solved it this way
{
type: 'rect',
ignore: !rectText,
shape: rectText,
strokeLinejoin: "round",
stroke: 'trasparent',
strokeWidth: 0,
style: api.style({
fill: 'transparent',
fontWeight: bigText? 600 : 100,
fontSize: bigText? 15 : 10,
textStroke: '#707070',
lineJoin: "bevel",
textStrokeWidth: 3,
text: text,
textFill: '#ffffff'
})
}
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'm trying to get results such as this in my MUI Button -
http://jsfiddle.net/bcGdJ/3160/
I ended up with this, but it seems that both before and after css selectors doesn't work.
import React from "react";
import Button from "#material-ui/core/Button";
import Notifications from "#material-ui/icons/Notifications";
import "./box.css";
const styles = {
color: 'purple',
backgroundColor: 'gray',
minWidth: '40px',
minHeight: '40px',
borderRadius: 1,
position: "relative",
"&:before,&:after": {
content: '',
position: "absolute",
bottom: 0,
left: 0,
borderColor: "transparent",
borderStyle: "solid"
},
"&:before": {
borderWidth: "8px",
borderLeftColor: "#efefef",
borderBottomColor: "#efefef",
},
"&:after": {
borderRadius: "3px",
borderWidth: "5px",
borderLeftColor: "#fff", /* color of the triangle */
borderBottomColor: "#fff" /* color of the triangle */
}
};
function CustomizedInputs(props) {
return (
<div id="container">
<Button color="primary" style={styles}>
<Notifications />
</Button>
</div>
);
}
export default CustomizedInputs;
```
https://codesandbox.io/s/72jyr75461
Any help would be appreciated
Your code is nice but you missed some simple points.
You need to use content: "''" instead of content: "".
You need to use :: instead of : for before and after.
cssRoot: {
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[200],
minWidth: "40px",
minHeight: "40px",
borderRadius: 1,
position: "relative",
"&::before,&::after": {
content: "''",
position: "absolute",
bottom: 0,
left: 0,
borderColor: "transparent",
borderStyle: "solid"
},
"&::before": {
borderWidth: "8px",
borderLeftColor: "#efefef",
borderBottomColor: "#efefef"
},
"&::after": {
borderRadius: "3px",
borderWidth: "5px",
borderLeftColor: "#fffff" /* color of the triangle */,
borderBottomColor: "#fffff" /* color of the triangle */
}
}
https://codesandbox.io/s/541v247qlp
I have set custom properties on SVG objects and on paths within the SVG objects.
Each object I add to the canvas also gets assigned an 'id' property, as well as some others properties that I use to interact with the objects in the app.
So far, when I clone these objects, I have been able to retain the properties that are on the SVG object by storing them in a session variable prior to cloning, then adding them back after cloning.
My problem is with the properties that are set on each of the object.paths. I have an 'id' property for each path, which I use for some functions that can manipulate the paths within the object.
So for example, before I group the object, the object.paths attribute looks like this...
paths: Array(4)
0: klass {id: "_25mm_x_400mm_ROUND", d: "M400.5,60.5A21.52,21.52", fill: "#ccc", dirty: false, stroke: "#000", …}
1: klass {id: "_25mm_x_400mm_ROUND", d: "M400.5,60.5v25c0", stroke: "#000", dirty: false, strokeMiterLimit: 10, …}
2: {id: "shapeTopColor", d: "M400.5,60.5A21.52,21.52", fill: "rgba(0, 0, 0, 0)", dirty: false, stroke: "#000", …}
3: {id: "shapeSideColor", d: "M400.5,60.5v25c0", stroke: "#000", dirty: false, strokeMiterLimit: 10, …}
Then, after ungrouping the object, the object.paths attribute looks like this...
paths: Array(4)
0: klass {type: "path", originX: "left", originY: "top", left: 0.4999999999999982, top: 0.5, …}
1: klass {type: "path", originX: "left", originY: "top", left: 0.5, top: 60.5, …}
2: klass {type: "path", originX: "left", originY: "top", left: 0.4999999999999982, top: 0.5, …}
3: klass {type: "path", originX: "left", originY: "top", left: 0.5, top: 60.5, …}
This breaks some functions that use the 'shapeTopColor and 'shapeSideColor' ids to change fill attributes for each path. So if a user groups an object, then ungroups it, they are no longer able to change the colour of the object.
Here is the code I am using to group objects...
export function groupSelectedItems() {
canvas = document.getElementById("c").fabric;
var activegroup = canvas.getActiveGroup();
var objectsInGroup = activegroup.getObjects();
var objectIds = [];
activegroup.clone(function(newgroup) {
canvas.discardActiveGroup();
objectsInGroup.forEach(function(object) {
objectIds.push({
'id':object.id,
'componentType':object.componentType,
'shape': object.shape,
// paths = object.paths //Tried this but causes errors.
});
canvas.remove(object);
});
newgroup.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false, 'ml': false, 'mr': false, 'mb': false, 'mt': false});
canvas.add(newgroup);
//Store the objects id's on to a session variable.
Session.set('objectIds', objectIds);
//put original objects id's back onto the new groups objects respectively.
var objectsInNewGroup = newgroup.getObjects();
objectsInNewGroup.forEach(function(object, key) {
Session.get('objectIds').forEach(function(o, i) {
if (key == i) {
object.id = o.id
object.componentType = o.componentType,
object.shape = o.shape
// object.paths = o.paths
}
});
});
});
}
So my question is, how can I clone an object or group and not lose any custom attributes I have set?
DEMO
var canvas = new fabric.Canvas('c');
var rect1 = new fabric.Rect({
id: 1,
width: 100,
height: 100,
fill: 'red',
componentType: 'a1',
shape: 'round1'
});
var rect2 = new fabric.Rect({
id: 2,
left:10,
top:20,
width: 100,
height: 100,
fill: 'magenta',
componentType: 'a2',
shape: 'round2'
});
var rect3 = new fabric.Rect({
id: 3,
left:30,
top:30,
width: 100,
height: 100,
fill: 'yellow',
componentType: 'a3',
shape: 'round3'
});
var group = new fabric.Group([rect1, rect2, rect3]);
canvas.add(group)
canvas.setActiveObject(group);
function cloneObj() {
group.clone(function(newgroup) {
canvas.add(newgroup.set({
left: newgroup.left + 10,
top: newgroup.top + 10
}));
console.log(newgroup);
}, ['id', 'componentType', 'shape']);
}
canvas {
border: 1px solid #999;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='cloneObj()'>Clone</button>
<canvas id="c" width="700" height="400"></canvas>
clone accepts a callback and array for additional property to include in cloned object.
Use this code to save and get custom properties at initialization of component
fabric.Object.prototype.toObject = (function (toObject) {
return function (propertiesToInclude) {
propertiesToInclude = (propertiesToInclude || []).concat(
["data", "name", "lockRotation"] // custom attributes
);
return toObject.apply(this, [propertiesToInclude]);
};
})(fabric.Object.prototype.toObject);