I am trying to target the "root" class for the MuiCardActions component with a theme custom-variables override. Here is my JSS:
overrides: {
MuiCardActions: {
root: {
display: 'flex',
justifyContent: 'flex-end',
padding: 0
},
}
},
I can see that the display 'flex' and 'flex-end' is affecting it. If I change it to 'space-between' it does affect the component, but padding has no affect.
Link to post I made on a closed issue - 9749
The override feature behaves at the JavaScript level, not the CSS level.
You have to account for the media query:
https://github.com/mui-org/material-ui/blob/33a03a06c51a0d70260a89a022d6e57e80d02629/packages/material-ui/src/CardActions/CardActions.js#L13-L16
Something like this should do it:
overrides: {
MuiCardActions: {
root: {
display: 'flex',
justifyContent: 'flex-end',
[theme.breakpoints.up(0)] : {
padding: 0,
},
},
}
},
Related
Versions:
vueJS: 3.0.0
bootstrap: 5.0.0-beta3
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2
See screenshot below. In my columnDefs for ag-grid, I have specified checkboxSelection: true for the Pending column. I do not wish to render any text in that column. Rather, I wish for a single checkbox that is centered in each cell. Can this be done? As things stand now, the checkbox is left-aligned in the cell.
Here is the columnDef for Pending:
{ headerName: "Pending", field: "pending", sortable: true, editable: true, checkboxSelection: true, cellStyle: () => getPageStatus() },
And here is styling for column headers:
.ag-header-cell-label {
justify-content: center;
}
Thanks for looking into it.
I scratched up a general solution that explains how to render custom HTML elements within a grid cell. Most of this solution is based on pre-existing articles and blogs out there. Note the data model here (rendered to the grid) assumes a pending property.
<template>
<ag-grid-vue
class="ag-theme-alpine"
:frameworkComponents="frameworkComponents"
:columnDefs="columnDefs"
:rowData="getRowData"
rowSelection="multiple"
domLayout="autoHeight"
editType="fullRow"
#grid-ready="onGridReady">
</ag-grid-vue>
<script>
import CheckboxRenderer from '#/components/CheckboxRenderer.vue';
export default {
data() {
return {
frameworkComponents: {
checkboxRenderer: CheckboxRenderer
},
columnDefs: [
{ headerName: "Pending", field: "pending", sortable: true, editable: true,
cellStyle: () => getPageStatus(), cellRenderer: 'checkboxRenderer', valueGetter: params => params ? null : null },
]
}
}
};
CheckboxRenderer.vue
<template>
<input ref="eGui" #click="checkedHandler" type="checkbox" v-model="params.data.pending" class="ag-input-field-input ag-checkbox-input" />
</template>
<script>
export default {
name: "CheckboxRenderer",
props: {
params: Object
},
methods: {
getGui() {
return this.$refs.eGui;
},
checkedHandler(e) {
let checked = e.target.checked;
let colId = this.params.column.colId;
this.params.node.setDataValue(colId, checked);
}
},
};
</script>
<style>
.ag-checkbox-input {
width: 18px;
height: 18px;
vertical-align: middle;
}
</style>
const useStyles = makeStyles({
buttonStyle: {
background: "red",
"&:hover": {
transitionDelay: '1',
transform: "scale(1.1)",
background: "red",
},
},
});
how can i implemated i transitionDelay on makeStyles? This did not
work.
You're missing a few things here:
You need a transitionProperty to which the transitionDelay will apply to. In your case, it is the transform CSS property.
Your transitionDelay needs to include the units of the delay e.g. 1s or 1000ms.
If you want to apply your transitions on the button when it is not on a hover state, then apply the styling to the button instead of the &:hover.
This is what it will look like:
const useStyles = makeStyles({
buttonStyle: {
background: "red",
transitionProperty: "transform",
transitionDelay: "1s",
"&:hover": {
transform: "scale(1.1)",
background: "red",
},
},
});
I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.
None of these methods work:
const useStyles = makeStyles((theme) => ({
// Method 1:
'#global': {
'.MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 2:
cell: {
'& .MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 3:
cell: {
':focus': { outline: 0 },
},
const classes = useStyles()
const dataGridColumns: GridColumns = [
{
...other,
cellClassName: classes.cell,
}]
Edit:
'#global': {
'.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 0,
},
},
worked for me, but I would prefer not to use a global css adjustment.
You can modify the MuiDataGrid-cell class by using Material UI's useStyles() function like the following (no need to declare globally):
import { makeStyles } from '#material-ui/core/styles';
import { DataGrid } from '#material-ui/data-grid';
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<DataGrid
className={classes.root}
// ...other table setup props
/>
);
}
export default MyComponent;
Resources:
https://material-ui.com/styles/advanced/#with-material-ui-core
https://material-ui.com/api/data-grid/#css
https://github.com/mui-org/material-ui-x/issues/420
Edit: Updated for 4.0.0-alpha.29
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
Just for completion sake this is how I styled the DataGrid with styled components and it worked.
const StyledDataGrid = styled(DataGrid)`
&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
&.MuiDataGrid-root .MuiDataGrid-cell:focus {
outline: none;
}
`;
If you're using MUI >= 5, you can simply do the follow:
<DataGrid
sx={{
"&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
outline: "none !important",
},
}}
...
/>
const useStyles = makeStyles(
() => createStyles({
root: {
'& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
outline: 'none',
},
'& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-cell:focus': {
outline: 'none',
},
},
}),
);
I just needed to do this as well for a project I'm working on.
You can override many of the classes used by the datagrid, but you'll need to make sure that the selector being used is more specific in order for it to take precedence.
Many of their classes are documented here in the CSS section.
The below snippet worked for me.
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiDataGrid-root": {
"& .MuiDataGrid-colCell:focus": {
outline: "none"
},
},
},
}));
The perfect way for me was add this code to your css file:
.MuiDataGrid-root .MuiDataGrid-columnHeader,
.MuiDataGrid-root .MuiDataGrid-cell {
outline: none !important;
}
I found that if we set it just for :focus, then if we click to a button of cell, outline still visible
I created a simple responsive HTML + JS chart with chart.js which worked well. I decided to do it within Vue CLI and so have tried to switch it to vue-chartjs but the same chart always renders about 33% taller than my window and so presents vertical scrollbars (the width is fine). I recreated the problem with a sample trivial graph which I render with:
import {Line} from 'vue-chartjs'
export default {
extends: Line,
mounted () {
this.renderChart(data, options)
}
}
Note the data is trivial and the options are {}.
If I use chart.js in my Vue component, instead of vue-chartjs then it works fine. I.e. I do nothing more than delete the above code from my component and change it to the following then it renders fine, just like my sample HTML + chart.js version.
import Chart from 'chart.js'
function mount(el) {
return new Chart(
document.getElementById(el).getContext('2d'), {
type: 'line',
data: data,
options: options,
})
}
export default {
template: '<canvas id="chart"></canvas>',
mounted () {
self.chart = mount('chart')
}
}
I am using the default responsive: true and maintainAspectRatio: false of course, and have no explicit CSS or size settings anywhere.
Why can I not get the chart to render the height correctly when I use vue-chartjs? I am using vue-chartjs version 3.4.2 but have also tried a few versions back. I have looked all over the github bug tracker but seen nothing related.
UPDATE:
You should pass the options as prop or locally. But it's needed to add:
responsive: true
maintainAspectRatio: false
the desired height as well as the options as you said. Here's how it worked for me:
options:
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
maintainAspectRatio: false
}
In template:
<bin-graph-weight :chart-data="datacollection" :styles="myStyles" :options="datacollection.options"/>
graph-component.js:
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
this.renderChart(this.chartData, this.options)
},
// If you want to pass options please create a local options object
watch: {
chartData () {
this.$data._chart.update()
}
}
}
Also had problem with height overflow and responsiveness, fixed by introducing flex parent container that takes up 100% of the space. After setting responsive and ratio options (check out related chartjs doc):
options: {
// ..
responsive: true,
maintainAspectRatio: true
}
I used following css to fill 100% of the parent (where TheChart is vue-chartjs component. Basically need to make sure the chart's parent is always filling 100% of it's own parent):
vue template
<v-container class="chart-container">
<TheChart :chartdata="chartData" :options="chartOptions" />
</v-container>
scss:
.chart-container {
flex-grow: 1;
min-height: 0;
> div {
position: relative;
height: 100%;
}
}
With responsiveness the chart rerenders with promises and actually sets two times.
With a watcher in Vue.js you can rerender every time with changes in the chartData.
Chart component:
<script>
import { Bar, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['chartOptions'],
mounted() {
this.renderChart(this.chartData, this.chartOptions);
},
watch: {
chartData() {
this.renderChart(this.chartData, this.chartOptions);
},
},
};
</script>
Use together with dynamic styles.
Chart properties:
<template>
<div style="height:300px;">
<bar-chart :styles="myStyles" :chart-data="dataCollection"
:chart-options="chartOptions"></bar-chart>
</div>
</template>
<script>
import BarChart from './ChartBar.vue';
export default {
components: {
BarChart,
},
props: ['dataCollection'],
data() {
return {
myStyles: {
height: '300px',
width: '100%',
position: 'relative',
},
chartOptions: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
},
}],
xAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
},
}],
},
legend: {
display: true,
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label(tooltipItems, data) {
const { datasetIndex, index } = tooltipItems;
const value = data.datasets[datasetIndex].data[index];
if (parseInt(value, 10) > 999) {
return ` ${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
}
return ` ${value}`;
},
},
},
responsive: true,
maintainAspectRatio: false,
height: 300,
},
};
},
};
</script>
<style lang="scss" scoped>
</style>
im starting a new project using react, react-router and material-ui-next.
Im facing a problem that i've trying to find with no success.
table exceeds containing component boundaries
Structure is in this way
return (
<Paper>
<Fragment>
<CommonToolbar reload={getAnns} />
<Typography variant="title">Announces</Typography>
<Table className={classes.table}>
<TableHead>
styles is defined this way
const styles = {
root: {
flexGrow: 1,
padding: 10,
margin: 10
},
flex: {
flex: 1,
},
input: {
marginRight: 10
},
select: {
marginRight: 10
}
}
What im trying to achieve is a table contained on the screen, and if it exceeds the screen, the table should be horizontally scrollable, but always contained inside the Paper Component.
Any hint will be appreciated. Thanks
Regards
Can you try adding overflowX: "auto" in your paper container?
JSX:
return (
<Paper className={classes.paperContainer}>
<Fragment>
<CommonToolbar reload={getAnns} />
<Typography variant="title">Announces</Typography>
<Table className={classes.table}>
<TableHead>
Your styles:
const styles = {
root: {
flexGrow: 1,
padding: 10,
margin: 10
},
flex: {
flex: 1,
},
input: {
marginRight: 10
},
select: {
marginRight: 10
},
paperContainer: { margin: "10px", overflowX: "auto" }
}