Vega/Vega Lite plots have a faint gray border around them... is it possible to remove this via a configuration parameter, or do I need to render as SVG and use CSS to do so?
You can override the default cell style
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
}
}
Alternatively, you can set the view stroke
"config": {
"view": {
"stroke": "transparent"
}
}
Related
I want to change the background color of the MathJax component. How can I do it? I tried few different solution but they won't work for me. I added custom style for 'mathJaxOptions' but it will changed only formula area color.
My code as follows, please help me to resolve this problem.
const mmlOptions = {
styles: {
'#formula': {
'background-color': '#212121',
color: '#000000',
padding: 8,
},
},
messageStyle: 'none',
extensions: ['tex2jax.js'],
jax: ['input/TeX', 'output/HTML-CSS'],
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)'],
],
displayMath: [
['$$', '$$'],
['\\[', '\\]'],
],
processEscapes: true,
},
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js'],
},
};
<MathJax
html={props?.tnode?.init?.domNode?.children[0].data}
mathJaxOptions={mmlOptions}
hasIframe={true}
enableBaseUrl={true}
color={'red'}
/>
change the background color of react-native-mathjax library
I have the following methods in different parent components :
viewHelpMultimedia(): void {
this.dialogService.open(HelpCompComponent, {
data: {
},
header: 'Delete a Certification',
styleClass: 'edit-popup',
width: '1000px'
});
}
viewHelpMultimedia(): void {
this.dialogService.open(HelpCompComponent, {
data: {
},
header: 'Help Steps',
styleClass: 'edit-popup',
width: '700px'
});
}
Those methods only differ in the popup width. Still, in the image we see different layouts. Is the difference in the width causing this
The difference in the width - width: '1000px' vs. width: '700px' - was causing the image to not be centered inside Paginator in Angular 8.
I'm using vue-toasted to show notifaction.
By default, it pops down to top.
Code:
<v-btn #click="onTest" />
...
onTest() {
this.$toast.info('Test!', {
containerClass: 'toasted-container',
className: 'toasted',
keepOnHover: true,
})
},
nuxt.config.js:
toast: {
duration: 3800,
action: {
icon: 'mdi-close-circle',
onClick: (e, toastObject) => {
toastObject.goAway(0)
},
},
iconPack: 'mdi',
icon: 'mdi-check-circle',
},
The toast pops down to top.
I tried to add some css like transition.
I'm not familiar with CSS, so I guess it's wrong.
How can I change it to right to left?
I couldn't find any info on their GitHub.
vue-toasted v1.1.27 only supports animating upward or downward. It has no API to add new animations.
I added some #keyframes and animation, it worked.
#keyframes in {
0% {
opacity: 0;
left: 100%
}
100% {
opacity: 1;
left: 0%
}
}
.some-class{
animation: in 300ms;
}
I have a dynamically filled datatable with fixed columns and scrollX enabled:
$('#products').DataTable({
"data": formattedData,
"scrollX": true,
"fixedColumns":{ "leftColumns": 0, "rightColumns": 1 }
});
The problem is, I need the columns to stop automatically calculating their width. Even if I try to force them on initialization...
$('#products').DataTable({
"order": [[ 0, "asc" ]],
"columnDefs": [
{ "title": "Name", "targets": 0, "width": "350px" },
{ "title": "Code", "targets": 1 },
{ "title": "Regular code", "targets": 2, "width": "500px" },
{ "title": "Special code", "targets": 3, "width": "300px" }
]
});
... if scrollX is enabled, the scrolling is enabled just if the columns are too small. And I want the scrolling enaled always, and the columns not changing their width.
Any idea about how to force the column width?
The same question was asked here but has no answer: https://datatables.net/forums/discussion/31403/scrollx-not-work-with-fixed-column-width
First disable autoWidth -> https://datatables.net/reference/option/autoWidth
In my humble opinion columns.width are useless to anything than relative percentages. Define minimum column widths in CSS instead
#products td:nth-child(1) { min-width: 350px; }
#products td:nth-child(3) { min-width: 500px; }
#products td:nth-child(4) { min-width: 300px; }
http://jsfiddle.net/f8uw6rLy/
I set a value in settings_data.json of Shopify Config.
And I am trying to insert it into my CSS.
settings_schema.json
...
{
"type": "image",
"id": "image1.png"
"label": "Background Image"
}
...
index.liquid
...
<style>
.div {
background-color: url({{image1.png}});
}
</style>
But I can't get the background image.
How can I fix?
You have to use a filter for the image in order to show the full URL address:
For example: {{ image1.png | img_url: 'medium' }}
To get a value of the store settings you need to call the settings object. Also in your schema it seems that the id contains the value and a comma is missing. Double check this.
settings_schema.json
...
{
"type": "image",
"id": "image1", // Name of variable
"label": "Background Image",
"default": "image1.png" // Content
}
...
index.liquid
...
<style>
.div {
background-color: url({{ settings.image1 }});
}
</style>