I use MuiRichTextEditor and I set some styles to editor with height. But when I click inside editor (bottom parts), it does not focus in input. So I have to move mouse to placeholder to start typing. How can I make full text area of editor clickable (with cursor: text)?
editor: {
backgroundColor: '#fff',
padding: '10px 16px',
minHeight: '120px',
overflow: 'auto',
borderRadius: '6px 6px 0 0',
'& ol, ul': {
paddingLeft: '1.25rem',
},
'& ul': {
listStyle: 'initial',
},
},
```
Related
I'm trying to change the color of the legend text when a serie is unselected/not shown in echarts.
Using the legend.textStyle.color option, I am able to change the text color but only when the serie is shown.
However I can't seem to find a similar option for when the serie is not shown.
For example the settings:
legend: {
top: '10%',
textStyle: {
color: 'red'
}
}
results in the following (with series medium and high not selected)
But I'd like medium and high shown in a darker color
Am I missing it or is it just not there?
I've tried setting the color to an array (color: ['red', 'blue']) but that didn't work.
you can use inactiveColor:"red",
something like below
legend: {
data: [{name: 'Email',
inactiveColor:"red",
textStyle:{
color:'green'
},
itemStyle: {
//color: ['red', 'green'],
color: '#ccc',
borderType: [50, 10],
}}, 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
How can I override the theming of a component in Material-UI that has styles applied to it through withStyles?
When I look at the component in question I see the following in the DOM:
I'm attempting to restyle Backstage and am looking at the MuiSelect component right now. Backstage has adjusted the styling of the MuiSelect by overriding CSS with withStyles. Looking at the DOM I am trying to adjust CSS that is being applied through the WithStyles(ForwardRef(InputBase))-input-75764 class.
In Backstage's Select.tsx component file, the styles are defined this way:
const BootstrapInput = withStyles((theme: Theme) =>
createStyles({
root: {
'label + &': {
marginTop: theme.spacing(3),
},
},
input: {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.background.paper,
border: '1px solid #ced4da',
fontSize: 16,
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
fontFamily: 'Helvetica Neue',
'&:focus': {
background: theme.palette.background.paper,
borderRadius: 4,
},
},
}),
)(InputBase);
How, using Material-UIs createTheme can I target these styles?
There's a guide here on how to override styles for named Backstage components.
For Backstage components that don't have override names available, they can be added such as in this pull request.
I started with the clipped drawer sample code and tried to build around it. When inserting components inside the sample (i.e., replacing '{'You think water moves fast? You should see ice.'} with other content), the content is constrained by the height of the drawer. When trying to insert content outside of the sample , everything starts below the drawer.
Expected Behavior: ability to place content anywhere around the drawer. I've got different components hiding/becoming visible based on drawer menu selections
I originally started with the permanent drawer example and everything worked just fine except I need the drawer positioned below the app bar.
The layout consists of a flex container that contains the Drawer and main content area. The content area (.appContent) expands to fill the space to the right (or left) of the drawer. All of your content should be placed inside this element.
Updated: Fixed styles to work on IE 11
The basic structure:
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar} />
<Drawer
variant="permanent"
className={classes.drawer}
classes={{ paper: classes.drawerPaper }}
/>
<main className={classes.appContent}>
{/* Page content goes here */}
</main>
</div>
The styles
const styles = theme => ({
// The main flex container for the app's layout. Its min-height
// is set to `100vh` so it always fill the height of the screen.
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
position: "relative",
overflow: "hidden",
},
appBar: {
zIndex: theme.zIndex.drawer + 1
},
// Styles for the root `div` element in the `Drawer` component.
drawer: {
width: theme.layout.drawerWidth
},
// Styles for the `Paper` component rendered by `Drawer`.
drawerPaper: {
width: "inherit",
paddingTop: 64 // equal to AppBar height (on desktop)
},
// Styles for the content area. It fills the available space
// in the flex container to the right (or left) of the drawer.
appContent: theme.mixins.gutters({
// https://github.com/philipwalton/flexbugs#flexbug-17
flex: '1 1 100%', // Updated to fix IE 11 issue
maxWidth: "100%",
paddingTop: 80, // equal to AppBar height + 16px
margin: '0 auto',
// Set the max content width for large screens
[theme.breakpoints.up('lg')]: {
maxWidth: theme.breakpoints.values.lg,
},
})
Live Examples (codesandbox)
Permanent Drawer - clipped below appbar
Permanent Drawer - full height
Currently, I am using some haddock method where I've tweaked the styles in order to emulate the material-ui drop down. A sample of the styles is shown below:
```elonSelect: {
width: "70%",
height: 50,
fontSize: "120%",
border: "none",
borderBottom: "solid 1px",
outline: 0,
marginBottom: 50
},
```
Is there a better way of doing this? Or should I just wait for updates from the material-ui team?
The Select component was released as of version 1.0.0-beta.9.
I am trying to change background color of panel.
Please see the code:
panel: {
centered: true,
width: 200,
height: 150,
style: 'background-color: red',
fullscreen: false,
hidden: true,
zIndex: 10,
}
but style: 'background-color: red' statement doesn't fulfill my requirements. it changes the color of panel border only not complete panel background color.
please suggest for the same.
thanks!
This works for me in 2.0.0:
Ext.application({
launch : function() {
Ext.Viewport.add([{
xtype: 'panel',
style: 'background-color:#F00'
}]);
}
});
This link: http://www.sencha.com/forum/archive/index.php/t-108823.html
Suggests that background-color is its own entity. I've never actually used Sencha, but a group I was working with considered using it once... e.g.
panel: {
centered: true,
width: 200,
height: 150,
background-color: red,
fullscreen: false,
hidden: true,
zIndex: 10,
}
also, I don't know if that's for an older version you're not using.