I'm using the following line to change some visual properties based on some conditions
this.$refs.pieChart.chart.series[0].update({ dataLabels: { color: 'blue' }, chart: { backgroundColor: 'yellow' } })
This works fine for the dataLabels part, but I'm unable to change the backgroundColor one.
I tried this:
this.$refs.pieChart.chart.series[0].update({ dataLabels: { color: 'blue' }, backgroundColor: 'yellow' })
and this
this.$refs.pieChart.chart.series[0].update({ backgroundColor: 'yellow' })
With no luck, I searched everywhere else in my code, nothing is overriding or setting the backgroundColor
side.
You should do an update on the whole chart config, not on the series:
chart.update({
chart: {
backgroundColor: 'red'
}
})
API: https://api.highcharts.com/highcharts/chart.backgroundColor
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Demo: https://jsfiddle.net/BlackLabel/p7yg386x/
I am using react-native-material-dropdown for a form where I also use RN TextInput so I want a consistent look between both.
I want to have a black label header and a light grey underline
For Android I use underlineColorAndroid={'transparent'} and that works fine.
The problem is on iOS if I change the baseColor property, it automatically changes the dropdown arrow, the underline and the label.
How could set the color of the label and the underline separately?
import { Dropdown } from 'react-native-material-dropdown'
//...
<Dropdown
underlineColorAndroid="transparent"
label={'BILLING TYPE'}
labelFontSize={12}
labelTextStyle={styles.dropdownLabel}
itemTextStyle={styles.dropdownItem}
style={styles.dropdownMainText}
style = {{color: Colors.black}}
baseColor={Colors.black}
value={'Paper'}
data={billingTypes}
onChangeText={value => this.onEditField(value)}
/>
If I set baseColor={Colors.black} (which I want) the underline becomes black instead of grey (which I don't want).
If I set baseColor={Colors.rose}, all 3 elements change colors: label, arrow and underline.
here is my styles.js file where nothing special happens
export default StyleSheet.create({
//...
dropdownLabel: {
textTransform: 'uppercase',
color: Colors.black,
},
dropdownItem: {
fontSize: Fonts.size.tiny,
color: Colors.black,
},
dropdownMainText: {
},
});
const colors = {
black: '#252525',
rose: '#e6968f',
};
The color you would like to change in the Dropdown object is currently running in the function. You cannot set it separately because you do not specify a separate color for the underline.
/dropdown/index.js
renderRipple() {
let {
baseColor,
rippleColor = baseColor,
rippleOpacity,
rippleDuration,
rippleCentered,
rippleSequential,
} = this.props;
let { bottom, ...insets } = this.rippleInsets();
let style = {
...insets,
height: this.itemSize() - bottom,
position: 'absolute',
};
return (
<Ripple
style={style}
rippleColor={rippleColor}
rippleDuration={rippleDuration}
rippleOpacity={rippleOpacity}
rippleCentered={rippleCentered}
rippleSequential={rippleSequential}
ref={this.updateRippleRef}
/>
);
}
I found it! As explained here: https://github.com/n4kz/react-native-material-dropdown/issues/23
<Dropdown
//
inputContainerStyle={{ borderBottomColor: Colors.midGrey, borderBottomWidth: 1 }}
/>
with const colors = {midGrey: 'rgba(214, 219, 224, 1)'};
I want to style the MultiValueRemove container when it is focused (the one with the x inside to remove the chosen value). The backgroundColor changes to a red I don't want to have.
I can style the background when it is neither focused nor selected, but the "onHover" red background remains unaffected. Styling the background with the state isSelected, isFocused does not affect the red background when I hover on it.
multiValueRemove: (provided, state) => ({
...provided,
color: '#ffffff',
backgroundColor: '#6FC5C4',
borderRadius: 0,
}),
There's a trick for this one, isSelected and isFocused don't work in this case but you can use regular css hover state like this:
multiValueRemove: (base, state) => ({
...base,
color: "#fff",
backgroundColor: "#6FC5C4",
borderRadius: 0,
"&:hover": {
backgroundColor: "#6FC5C4",
color: "#fff"
}
})
The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)?
Try passing in a value for the maxMenuHeight prop:
<Select
maxMenuHeight={190}
/>
see documentation
The answer below was given when react-select v2 was in beta, much has changed since then.
Read the react-select docs HERE
React-Select v2 uses emotion CSS-in-JS so the new way to control style over the select components and sub-components is by passing a style object to the styles prop. You can also set a className to style with an external stylesheet.
CSS-in-JS way
const customControlStyles = base => ({
height: 20,
minHeight: 20
});
<Select ... styles={{control: customControlStyles}} ... />
CSS Way <Select ... className="myClassName" ... />
.myClassName__control {
height: 20px;
min-height: 20px;
}
Setting the height property looks like it retains that height even when you have overflow (from multiple selected values spilling onto the next line) so you end up with the values falling outside the box.
I solved this issue by setting the padding top and bottom on the dropdownIndicator and the clearIndicator and setting minHeight on control like so:
const styles = {
control: (base) => ({
...base,
minHeight: 32,
}),
dropdownIndicator: (base) => ({
...base,
paddingTop: 0,
paddingBottom: 0,
}),
clearIndicator: (base) => ({
...base,
paddingTop: 0,
paddingBottom: 0,
}),
};
<Select styles={styles}/>
Adding onto what #craigmichaelmartin commented, the minHeight on control is important to overwrite, and it needs to be set at a bunch of places in order to really overcome it.
Here's what worked for me to get it to match the height of a 36px text input element (These settings also work in css, of course)
const customStyles = {
container: (provided) => ({
...provided,
display: 'inline-block',
width: '250px',
minHeight: '1px',
textAlign: 'left',
border: 'none',
}),
control: (provided) => ({
...provided,
border: '2px solid #757575',
borderRadius: '0',
minHeight: '1px',
height: '42px',
}),
input: (provided) => ({
...provided,
minHeight: '1px',
}),
dropdownIndicator: (provided) => ({
...provided,
minHeight: '1px',
paddingTop: '0',
paddingBottom: '0',
color: '#757575',
}),
indicatorSeparator: (provided) => ({
...provided,
minHeight: '1px',
height: '24px',
}),
clearIndicator: (provided) => ({
...provided,
minHeight: '1px',
}),
valueContainer: (provided) => ({
...provided,
minHeight: '1px',
height: '40px',
paddingTop: '0',
paddingBottom: '0',
}),
singleValue: (provided) => ({
...provided,
minHeight: '1px',
paddingBottom: '2px',
}),
};
You can also try to style the input field of your react-select component, as it can impact the height of the whole react-select component. In my case, this was happening through interference from materializecss.
const customStyles = {
input: styles => {
return {
...styles,
height: '1.8em'
};
}
const App = () => (
<Select
styles={customStyles}
options={...}
/>
);
From a similar question also on SO, you can modify the react-select theme to change the height of the control. Seems easier to me than the other answers.
const customThemeFn = (theme) => ({
...theme,
spacing: {
...theme.spacing,
controlHeight: 30,
baseUnit: 2
}
})
<Select theme={customThemeFn}> ... </Select>
For more, see Theme modifier method at this page of the docs.
Yet another CSS Way
You can also specify classNamePrefix and use it to override CSS styles.
<Select classNamePrefix="mySelect" />
.mySelect__value-container{
height: 35px;
}
I got the answer. I think the following is the minimal setting. I could able to reduce the hight of the react select.
This is the code, I used TypeScript for this code.
const targetHeight = 30;
const styles = {
control: (base: any) => ({
...base,
minHeight: 'initial',
}),
valueContainer: (base: any) => ({
...base,
height: `${targetHeight - 1 - 1}px`,
padding: '0 8px',
}),
clearIndicator: (base: any) => ({
...base,
padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
}),
dropdownIndicator: (base: any) => ({
...base,
padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
}),
};
<Select
styles={styles}
/>
As I see in android applications almost all drawers in open state makes a black "mask" above main content.
white mask in "react-native-drawer:
black color example:
It is possible to change the color of this "mask" in "react-native-drawer" component to black?
Was looking for the same thing and found a solution at GitHub.
tweenHandler={ratio => ({
main: {
opacity: 1,
},
mainOverlay: {
opacity: ratio / 2,
backgroundColor: 'black',
},
})}
Tested it out and here's what I got (made it pink for visibility):
<Drawer
tweenHandler={ratio => ({
main: {
opacity: 1,
},
mainOverlay: {
opacity: ratio / 2,
backgroundColor: 'pink',
},
})}
ref={(ref) => { this._drawer = ref; }}
content={ navigationView }
side="right"
panOpenMask={.25}
>
Screenshot: