The Google Visualization Chart is filled with a color if the fill css property is set, e.g.
* {
fill: black;
}
Is there a way to unset the CSS fill property so that it uses the original colors? The goal is not to modify the Chart component is any way, the fill is unrelated to the chart (can be used to change other SVGs) but it affects the chart.
This does not work:
#chart_div * {
fill: unset;
}
See this fiddle: https://jsfiddle.net/g37fjyLx/1/
I realize that setting the fill for all elements * is probably not a good idea, but I'd still like to know if there is a way to reset it.
you need to use backgroundColor.fill. Please refer this https://developers.google.com/chart/interactive/docs/gallery/ganttchart#configuration-options
var options = {
height: 275,
backgroundColor: { fill: "#333" }
};
use this for your color:
var options = {
height: 275,
gantt: {
criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
arrow: {
angle: 100,
width: 5,
color: 'blue',
radius: 0
}
}
};
Related
I am using react grid and I would like to set the hover color and rowSelectedColor for each row differently, When I tried overwriting the hover background color it applies to every row not each row.
example - https://plnkr.co/edit/UwszBQxteLy9vPE3
I tried using rowClassRule for achieving the functionality but it did not worked, I am expecting row should have there own unique hover color and selected background color based on some condition ex: age>10 then hover-color: Red
Your code seems working to me, you just didn't passed the correct classname to your other rules.
Here's the code edited, with one new class
// main.js
const gridOptions = {
rowData: getData(),
columnDefs: [
{ headerName: 'Employee', field: 'employee' },
{ headerName: 'Number Sick Days', field: 'sickDays', editable: true },
],
rowClassRules: {
// row style function
'warning': (params) => {
var numSickDays = params.data.sickDays;
return numSickDays > 1 && numSickDays <= 5;
},
// row style expression
'breach': 'data.sickDays >= 5',
'new': 'data.sickDays >= 7'
},
};
For the style you don't need to put !important to override, try to understand why the style you want does not apply before using !important
// styles.css
.warning {
background-color: sandybrown;
}
.warning:hover {
background-color: purple;
}
// you set the class to 'blue' but the class did not exists in your style, so I set it to 'breach' because that's a class you had
.breach {
background-color: lightcoral;
}
.breach:hover {
background-color: black;
color: white;
}
.new {
background-color: greenyellow;
}
The edited and working sandbox : https://plnkr.co/edit/CijuUinXkVUJkRFG
<PageHeader className="site-page-header" title={title} subTitle={subTitle} {...(onBackClick !== undefined ? {onBack: () => { onBackClick() } } : {})} />
And
.site-page-header {
border: 1px solid rgb(235, 237, 240);
background-color: #253655;
}
How can I set the color of title (or any text) in this element to another color (from default black)? I tried to set every color related field I could find in .site-page-header but nothing seems to work.
Inspecting the elements to see why the color prop is not passed down to the title reveals that the class .ant-page-header-heading-title has a color prop which has higher specificity. Either add the !important to the color or increase specificity e.g.
.site-page-header .ant-page-header-heading-title {
color: blue;
}
I'm using Video.js together with Vue.js and Electron.js and I'm trying to change the outline of the video player to something a bit better looking than the standard yellow outline but the outline just stays as it is.
My Video Component:
<template>
<div id="video-container">
<video class="video-js" id="video-player" ref="video"></video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
name: "Preferences",
props: ["item"],
methods: {
getPath: function () {
return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
},
},
mounted: function () {
let options = {
autoplay: false,
controls: true,
fluid: true,
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
controlBar: {
pictureInPictureToggle: false,
},
};
this.player = videojs(this.$refs.video, options).src(this.getPath());
},
};
</script>
<style scoped>
#video-player {
outline: none;
}
</style>
I've also tried !important, #video-player:hover and using the video-container div to change the outline but so far nothing worked.
The outline looks like this:
Video Box outline
button outline
If I understand what you are saying, you are talking about the bowser focus, that blue line around the focus component.
you need something like
.video-js:focus {
outline-style: none;
}
if still not working you can add !important or add this too
.video-js:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
Normally we don't remove this for the simple reason that could be hard to use Tab around the components. But if you are ok with that go for it!
EDIT (10/02/2021):
So for the video JS, you can actually use your custom class and overwrite the Video-js CSS class in order to do that you will need to create this 3 follow classes in your CSS.
.vjs-matrix.video-js {
color: #00ff00;
/*put other stuff you need here*/
}
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
border-color: #00ff00;
/*put other stuff you need here*/
}
/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
background: #00ff00;
/*put other stuff you need here*/
}
And for your HTML
<video class="vjs-matrix video-js">...</video>
Try to play around with this and see if fix your problem!
Source (videojs)
How can I add a custom background color for the maps tile layers. using css class?
function initLayer(item, map) {
const stateLayer = L.geoJSON(item, {
style: function(feature) {
return {
weight: 8,
opacity: 1,
color: '#333',
fillOpacity: 1,
className: 'gradient-class' // add custom class
}
},
});
map.addLayer(stateLayer);
}
You can change the background of the map. (By default the grey background when loading tiles)
#map{
background-color: #bb4040;
}
If you wnat to change the tile color you can use a css filter: https://stackoverflow.com/a/60431006/8283938
When positing mapTypeControl (Satellite, Terrain) to BOTTOM_LEFT/BOTTOM_CENTER/BOTTOM_RIGHT, it sets the controls too low, so when clicking on Satellite the sub-option becomes cutoff.
This issue is viewable here:
https://developers.google.com/maps/documentation/javascript/examples/control-positioning
Left and Right side have solution by placing the controls in LEFT_BOTTOM/RIGHT_BOTTOM.
Is it possible to position it a bit higher in the center position?
Thanks
I have run into the same issues. You can find all the available Positions here. You might want to use LEFT_BOTTOM: "Elements are positioned on the left, above bottom-left elements, and flow upwards."
Worst case scenario try LEFT_CENTER position.
+----------------+
+ TL TC TR +
+ LT RT +
+ +
+ LC RC +
+ +
+ LB RB +
+ BL BC BR +
+----------------+
You can override the dropdown to make it appear above the button with the following CSS:
.gm-style-mtc div[role="button"] + div {
top: -90px !important;
}
The top negative px amount will depend on your button size setting (e.g. controlSize: 30).
Create custom buttons like this:
// css
toggleGroup: {
position: 'absolute',
boxShadow: `rgb(0 0 0 / 30%) 0px 1px 4px -1px`,
bottom: '35px',
left: '10px',
'& .MuiToggleButton-root': {
fontSize: '18px',
color: 'rgb(86, 86, 86)',
},
'& .MuiToggleButton-root.Mui-selected': {
color: '#000',
fontWeight: 700
},
}
// toggle method
const handleToggle = (_e: React.MouseEvent<HTMLElement, MouseEvent>, view: ViewType) => {
if (map === null) {
return;
}
if (view !== null) {
setView(view);
view === ViewType.SATELLITE ? map.setMapTypeId('hybrid') : map.setMapTypeId('roadmap');
}
};
// component
<ToggleButtonGroup
value={view}
className={classes.toggleGroup}
onChange={handleToggle}
aria-label='Select Map Type'
exclusive>
<ToggleButton value={ViewType.MAP}>Map</ToggleButton>
<ToggleButton value={ViewType.SATELLITE}>Satellite</ToggleButton>
</ToggleButtonGroup>