First of all, I have tested all possible solutions I have founded and I still didn't solve my problem.
I want to put a shorter height in my material-table rows. This is what it looks like right now.
Table
I would like my rows to have a height similar to the headers in that image. I have tried many things, one of them was the following:
options={{
headerStyle: {
whiteSpace: "nowrap",
height: 20,
maxHeight: 20,
padding: 0
},
rowStyle: {
height: 20,
maxHeight: 20,
padding: 0
},
}}
I would really appreciate it if someone can help me.
You can set options in material-table
options={{
padding: "dense",
}}
I had the same problem with React Material-Table. I fixed adding this in the global index.css of the project:
.MuiTableCell-root {
padding: 0 14px !important;
}
and then i could modify the height in the rowStyle in the options of the Material-Table component:
options = {
rowStyle: {
height: "20px"
}
}
you need to use withStyles and update the specific element class style, so it will reflect to all the elements. Check the working example as you expected here : codesandbox
import MuiTableCell from '#material-ui/core/TableCell';
const TableCell = withStyles(theme => ({
root: {
height: 10,
padding:0
}
}))(MuiTableCell);
Much more simplified, overwrite padding of 16px to smaller size...<TableCell style={{padding:5px}} ...>.
I think the link below might be helpful for you.
customizing material ui table
Related
<Box
paddingX={4}
mt={3}
sx={{
backgroundColor: "#fff",
width: 600,
height: 220,
border: "1px solid #e1e1e1",
overflow: 'auto',
'&::-webkit-scrollbar': { display: 'none' }
// '&::-webkit-scrollbar': { width : 0 },
}}
>
Here is a piece of code i tried but nothing happens
i need to hide scroll bar
In my case I had a MUI Dialog component, where the Dialog Content was overflowing:
Which as a result placed a scrollbar in the Dialog.
Ended up overriding the sx prop of the Dialog component to look something like this:
sx={{
'& .MuiDialogContent-root::-webkit-scrollbar': { display: 'none' },
'& .MuiDialogContent-root': {
'msOverflowStyle': 'none',
'scrollbarWidth': 'none',
},
}}
Which applies styles to the Dialog Content via its CSS class.
I covered the use case for all major browsers, reference here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
In your particular example, I recommend tracking down where the overflow happens and then applying this from the parent component.
Hope this helps :)
Having trouble with styling table created by react-table library.
Please find the design below.
Table is created the way it is shown in documentation. Is it possible to colour headers as shown in design?
Thank you in advance
P.S.
Here is the code snippet from documentation
To create headers I need to create an array. So i cant change style for a specific header (actually I can provide element to render, but it will be rendered inside the element)
Check this, there are class names added to the data where the data should be styled differently. I think that's what you need.
You can use any react component or JSX to display content in column headers, cells and footers.
const columns = [
{
Header: () => (
<span>
<i className="fa-tasks" /> Progress
</span>
)
}
]
kindly check on this link for further details
https://github.com/tannerlinsley/react-table/tree/v6#custom-cell-header-and-footer-rendering
Had to use a workaround.
As Taha Jamil mentioned you can any JSX to render inside of the Header. By adjusting some styles you will get something like this:
{
Header: () => {
return(
<div
style={{
backgroundColor: "red",
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
padding: "12px 20px",
}}
>
Title
</div>
);
}
}
Not the best solution, but works
When using DataGrid, I cannot figure out how to make row heights variable, so that the row's height is dynamically based on the length of the text content in the cell.
I was thinking I would need to add renderCell on the column with the longer text, and use the <Typography> component, but I don't know what params to use to style it this way.
There is a lot of documentation on how to handle truncation, ellipsis, etc, but I cannot seem to figure out what I need to apply for variable row heights based on content.
const StyledDataGrid = withStyles({
root: {
'& .MuiDataGrid-renderingZone': {
maxHeight: 'none !important',
},
'& .MuiDataGrid-cell': {
lineHeight: 'unset !important',
maxHeight: 'none !important',
whiteSpace: 'normal',
},
'& .MuiDataGrid-row': {
maxHeight: 'none !important',
},
},
})(DataGrid);
See this demo for an example.
As of Data Grid version 5.12.0 there is support for dynamic row height.
To use it:
<DataGrid getRowHeight={() => 'auto'} />
See documentation here for more details.
Based on this thread it's not possible.
#ronnyroeller thanks for the feature request. It's definitely something we were expecting. We are happy to see it surface :). For the virtualization to work, the grid needs to know the size of all the rows.
Based on the other answers, it COULD be possible, if you disable the virtualization. But beware, you are disabling performance optimizations.
export const StyledDataGrid = withStyles({
root: {
'& .MuiDataGrid-renderingZone': {
maxHeight: 'none !important'
},
'& .MuiDataGrid-cell': {
lineHeight: 'unset !important',
maxHeight: 'none !important',
whiteSpace: 'normal',
wordWrap: 'break-word'
},
'& .MuiDataGrid-row': {
maxHeight: 'none !important'
}
},
virtualScrollerContent: {
height: '100% !important',
overflow: 'scroll'
}
})(DataGrid);
Then disable the virtualization:
<StyledDataGrid disableVirtualization />
This is how you can do -
Import this at the top of your theme -
import type {} from '#mui/x-data-grid/themeAugmentation';
in the components section of your theme paste this
MuiDataGrid: {
styleOverrides: {
root: {
'& .MuiDataGrid-main > div:nth-child(2)': {
height: 'fit-content !important',
},
},
},
},
working with Material UI Grid, this has oversize full screen and generate horizontal scroll bar, how to can fix it ?
const styles = theme => ({ root: { flexGrow: 1,}, paper: { padding: theme.spacing.unit * 2,textAlign: 'center',color: theme.palette.text.secondary,},});
generate like horizontal scroll bar
I had the same problem. Find out that using minHeight: "100vh" solves this problem
root: {
minHeight: "100vh",
}
where i found this solution
the bellow worked too:
root: {
position: 'fixed',
width: '100%',
height: '100%',
left: 0,
top: 0,
zIndex: 10,
}
where i found this solution
After too much test, I get solve this problem, change spacing 24 to 16, because childs has 12, I hope this helps someone
<Grid container spacing={16}>
Without horizontal scroll bar
When using react-select it is not auto sizing by option value, but using width:100% as you can see in picture:
Options are short:
getOptions() {
return [
{ value: 'AND', label: 'AND' },
{ value: 'OR', label: 'OR' }
]
}
And code which produces it:
<Select
options={this.getOptions()}
value={value}
autosize={true}
clearable={false}
simpleValue
/>
Is there any way to make react-select to show these values with auto sizing, so select box would be the same as option length, and I could, for example, center this select box in <div>?
Updated 14.11.2017
Full example can be seen in this jsFiddle
Inline styles did not work for me.
I just wrapped the Select component in a div and gave the div the width I wanted.
<div style={{width: '300px'}}>
<Select
menuPlacement="auto"
menuPosition="fixed"
etc, etc..
/>
</div>
SOLUTION 1
You can leverage React's inline styles by updating the components' width based on the length of the selected option.
Let me explain further: Say the selected value is HelloWorld. This string is of length 10. We could guess that each character accounts for say 8px each on average (total guess I have no clue at all). Thus, the width of this word is around 8*10=80px, right ? Also, there are some controls after the word (the carret and the cross) and we need some minimum padding: together they may be of 100px width. Then here you have it: your div's width should be ( 8px * 10 letters ) + 100px = 180px.
More precisely, the correct formula is something like:
(average_letter_size * selected_value.length) + other_elements_sizes
When selected_value changes, so does its length, and therefore the width of the div gets updated with the new total.
Example: if the selected value is now Lorem Ipsum dolor sit amet, the length is now 26. By applying the formula we get a larger width of : (8px * 26 letters) + 100px = 308px.
For this to work in react, here is a snippet:
<Select
style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
className="select-custom-class"
name="form-field-name"
value={this.state.selectedOption2}
options={options2}
onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
/>
As you can see I added :
style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
to your component. Whenever the state gets updated, everything is propagated including the width of the component.
See a working example in this fiddle.
Eventually, you want to fine-tune the rules and averages to your needs. I also suggest you apply a letter size depending on the number of capital and lowercase letters in the selected value.
SOLUTION 2 (edit)
I came up with a pure CSS solution if you want. It should be better tested against your design, but this should work:
/* .Select-value comes with an absolute position to stack it below .Select-input */
/* we need to scratch that in order for us to be able to let the div grow depending on its content size */
.Select-placeholder, .Select--single > .Select-control .Select-value {
position: relative;
padding-left: 0;
}
/* All these 3 classes come with ugly "table" display...*/
.Select-control, .Select-clear-zone, .Select-arrow-zone {
display: inherit;
}
/* here is the trick: we display the wrapper as flex in order to make it fit in height*/
/* we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right */
.select-custom-class .Select-multi-value-wrapper {
display: flex;
flex-direction: row-reverse;
}
/*we put our controls back to a better center position */
.Select-clear-zone {
position: absolute;
top: 8px;
right: 20px;
}
.Select-arrow-zone {
position: absolute;
top: 8px;
right: 0px;
}
See a working fiddle (I changed some of the examples for better illustration)
Tell me what you think. :)
I borrowed this from aidan-keay on the repo thread, but adding this to the custom styles prop worked for me:
menu: (base) => ({
...base,
width: "max-content",
minWidth: "100%"
}),
if you're using react-select v3 you can use customStyles object:
const customStyles = {
container: provided => ({
...provided,
width: 150
})
};
<Select
styles={customStyles}
{...otherProps}
/>
9/2020
Hey guys :) the solution is so simple than that workarounds !
the problem in these classes __placeholder, __single-value
just add this css to both of them and you will get auto sized react-select
.CUSTOM_PREFIX__single-value,
.CUSTOM_PREFIX__placeholder {
position: static;
transform: none;
max-width: none;
}
In the above example the prop classNamePrefix will equal CUSTOM_PREFIX
classNamePrefix="CUSTOM_PREFIX"
09/2021 (react-select v4)
Adding position: static and transform: none will scale the select-container accordingly.
placeholder: (provided) => ({
...provided,
position: 'static',
transform: 'none',
}),
singleValue: (provided) => ({
...provided,
position: 'static',
transform: 'none',
}),
Update: for people who are using React-Select for a "tags autocomplete" feature but are having trouble where it sets a style width that is too narrow based on the previous tag you searched, this is what works for me:
Set a style of:
.myCustomPrefix__value-container > div {
width: auto !important;
}
Set classNamePrefix="myCustomPrefix" in the component (docs).
Old answer:
See the official docs at https://react-select.com/styles#style-object
I originally thought that setting width to "auto" for option worked for me:
const customStyles = {
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
return {
...styles,
fontSize: '12px',
textAlign: 'left',
width: 'auto',
}
},
}
...
return (
//https://react-select.com/props
<AsyncSelect
components={animatedComponents}
isMulti
// isDisabled={isLoading}
// isLoading={isLoading}
onChange={handleChange}
onInputChange={handleInputChange}
cacheOptions
defaultOptions
defaultMenuIsOpen={false}
closeMenuOnSelect={closeMenuOnSelect}
placeholder={placeholder}
loadOptions={promiseOptions}
value={selectedOptions}
styles={customStyles}
formatOptionLabel={formatOptionLabel}
/>
)