I have having problem to binding jagged array in knockout-js. I have search a lot but could not found any thing. Let make a simple example,
<div data-bind="foreach: items">
<div data-bind="style: { textAlign: align, backgroundColor: bgColor, fontFamily: fontFamily, fontSize: size, color: color }, text: title"></div>
</div>
and here is the my array,
var items = [{
title: 'A',
align: 'right',
fontFamily: 'helvetica',
color: '#777777',
bgColor: '#ffffff'
},
{
title: 'A',
align: 'right',
size: 'large',
fontFamily: 'helvetica'
}
{
size: 'large',
fontFamily: 'helvetica',
color: '#777777'
}]
Clearly sometime some property(ies) are missing? So I get * is not defined* error. How to handle this situation.
you have two options. You can make sure your ViewModels aren't jagged. This is accomplished well by using the knockout mapping plugin against your model and having it use a constructor of your type. this way you can even define defaults
the other option is to reference the values off of the $data context. IE:
<div data-bind="style: { textAlign: $data.align, backgroundColor: $data.bgColor, fontFamily: $data.fontFamily, fontSize: $data.size, color: $data.color }, text: $data.title"></div>
fiddle: http://jsfiddle.net/drdamour/Xp9Er/
Related
I am using this dropdown picker library from import DropDownPicker from 'react-native-dropdown-picker'; which kinda doesnt expand properly when inside View that has certain styles.
Here is some code:
<View style={styles.cellBox}>
<DropDownPicker
items={[
{ label: '5', value: 5 },
{ label: '10', value: 10 },
{ label: '20`', value: 20 },
{ label: '45`', value: 45 },
{ label: '57`', value: 57 },
]}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
onChangeItem={item => buyOfferStore.setBatchQuantityInTons(item.value)}
/>
</View>
Style has cellbox property that looks like:
cellBox: {
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: theme.colors.lightSilver,
backgroundColor: 'white',
padding: 10,
minHeight: 55,
marginTop: -1,
},
Output:
enter image description here
If I remove style from View element works fine. No idea why is it behaving so, I cannot remove the style from View element as I need to style the View element to look in certain way!
I do not think it is aproblem with the View element, you see you have a style of cellbox and you probabaly used it for the cell below as well and they have the same zIndex level. So any overlays won't be shown. You could try to create a special class for DropDownPicker View and give it an extra style of zIndex: 2,
Such as:
View style={styles.cellBox1}>
<DropDownPicker
...
cellBox1: {
...
zIndex: 2,
},
I have to add an number in space behind the chart. Something like this
Here is the Fiddle
Here is my code
title: {
text: title,
align: 'left',
x: 10,
style: {
color: '#000000',
fontSize: '20px',
fontWeight: '600',
lineHeight: '29px'
},
},
subtitle: {
text: subtitle,
align: 'left',
x: 10,
style: {
color: '#4A4A4A',
fontSize: '14px',
},
y: 50,
},
How I can I do this?
You can add text using Highcharts.SVGRenderer.text. Check the code and demo posted below.
Code:
chart: {
type: 'areaspline',
width: 300,
height: 275,
events: {
load: function() {
var chart = this,
number = 853;
chart.renderer.text(number, 50, 70)
.css({
color: '#8b8bff',
fontSize: 26,
fontWeight: 'bold'
})
.add()
.toFront();
}
}
}
Demo:
http://jsfiddle.net/BlackLabel/kqay3e7g/1/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I am trying to overwrite the material UI css.
I tried to capitalize both the words, but its changing only on selected and hover,
is it possible to change it in normal state too
I debugged but not able to fid the issue.
can you tell me how to fix it.
providing my code snippet below and sandbox below.
https://codesandbox.io/s/2pomwq2z20
const styles = theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper
},
tabsIndicator: {
backgroundColor: "red",
textTransform: "capitalize"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1,
textTransform: "capitalize"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
tabSelected: {}
});
You need to add textTransform: "initial" in tabRoot. Look into https://codesandbox.io/s/p5z9m029v0
I have a trouble with FabricJS. When I create a russian text with follow constructor, I have no russian text only symbol '!'.
What am I doing wrong?
var textObject = new fabric.Text('Привет!', {
originX: 'center',
originY: 'center',
left: zone.left,
top: zone.getCenterPoint().y,
textAlign: 'center',
fill: finalFill,
stroke: '#000',
strokeWidth: bezel,
fontSize: fontSize,
spacing: 5,
fontFamily: 'Arial',
fontWeight: 'bold',
fontStyle: 'normal'
});
I've checked your example. It looks good.
Generally, the Russian text shouldn't be a problem, because we use it in our project. I didn't see any problems with it.
What can I guess:
1. Your left and top values are so, that text is outside of the canvas, and you see only the symbol "!".
2. Other, but hardly - some of your variables have wrong values. Try to set values, as in my example (I've tested it with fabric 2.0.3 and 1.7.22).
https://jsfiddle.net/Eugene_Ilyin/o2drxd0L/
var canvas = new fabric.Canvas('c');
var textObject = new fabric.Text('Привет!', {
originX: 'center',
originY: 'center',
left: 100,
top: 100,
textAlign: 'center',
fill: 'red',
stroke: '#000',
strokeWidth: 1,
fontSize: 20,
spacing: 5,
fontFamily: 'Arial',
fontWeight: 'bold',
fontStyle: 'normal'
});
canvas.add(textObject);
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.3/fabric.min.js"></script>
<canvas id="c"></canvas>
For me it is rendered like this:
I'm using Highcharts for my web page and I can't seem to figure out how to correctly change the font size of the title and key at the bottom. I'm using the basic column with green background: http://www.highcharts.com/demo/column-basic/dark-green
Currently this is my code:
Function:
$(function () {
$('#content').highcharts({
chart: {
type: 'column'
},
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
},
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
categories: [
' '
]
},
yAxis: {
min: 0,
title: {
text: 'MMBTUs x 10,0000',
style:{
color: 'white',
fontSize: '25px'
}
},
labels: {
style: {
color: 'white',
fontSize:'25px'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2009',
data: [4900000]
}, {
name: '2010',
data: [4900000]
}, {
name: '2011',
data: [5500000]
}, {
name: '2012',
data: [5200000]
}]
});
});
Html call:
<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>
and as stated I'm using the Highcharts green theme provided by the website when you click view visual theme.
Now my problem is when I change:
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
depending on how big my font size is the 4 values (2009, 2010, 2011, 2012) are either not visable or the move out of the box below the chart. The box itself doesn't resize (which it does in jfiddle which doesn't include the theme). The same thing happens with:
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
the color changes based on my value but the font size doesn't. Any help would be appreciated.
That theme uses font instead of fontSize. So, it's legend is defined as:
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
If you define your's with both font and fontSize, it'll work (seems like a bug to me, but maybe it's a feature):
legend: {
itemStyle: {
fontSize:'20px',
font: '20pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
I assume the title has the same thing going on.
http://jsfiddle.net/kHzr9/