After I've added DatePickers to a simple form, all components got placed vertically, while I would prefer them to be placed horizontally. Is there any parameter that should be set to make this work, or I must play a bit with CSS?
<MuiThemeProvider>
<div>
<TextField hintText="Enter text"/>
<DatePicker hintText="Date from" container="inline" mode="landscape" />
<DatePicker hintText="Date to" container="inline" mode="landscape" />
<IconButton>
<img src="img/ic_search_black_24px.svg"/>
</IconButton>
</div>
</MuiThemeProvider>
Any suggestions are appreciated!
On each DatePicker, set the style to:
style={{ display: 'inline-block' }}
Related
When using a Textfield as the first child of DialogContent:
export default function App() {
return (
<Dialog open={true}>
<DialogTitle>Hey</DialogTitle>
<DialogContent>
<TextField
fullWidth
id='name'
label={'Foo'}
name='name'
required
type='text'
value={'Bar'}
/>
</DialogContent>
</Dialog>
);
}
its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?
You can easily fix that issue by adding some margin to the TextField like the following.
sx={{ marginTop: 2 }}
Or you could wrap the TextField using Box inside the DialogContent like the following.
<Box p={1}>
<TextField
...
/>
</Box>
I would like to override the Datagrid's NoRowsOverlay component with my custom one, which uses react-dropzone:
<GridOverlay
{...getRootProps()}
className={clsx(classes.zone, {
[classes.valid]: isDragAccept,
[classes.invalid]: isDragReject
})}
>
<input {...getInputProps()} />
{isDragActive
? (
<Typography variant='h6'>
{isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
</Typography>
)
: (
<Typography variant='h6'>
Drop CSV file here or click to upload.
</Typography>
)}
</GridOverlay>
I'm overriding the component like so:
<DataGrid
autoHeight
columns={getColumns(classes)}
components={{
NoRowsOverlay: DropZone
}}
disableColumnMenu
disableSelectionOnClick
hideFooter
rows={devices}
/>
I cannot figure out why drag&drop and also clicking on dropzone does not work anymore.
Replacing GridOverlay with regular div also does not work. Dropzone component works as long as rendered outside the DataGrid. Any ideas?
I had a similar problem recently where I placed a button in my custom overlay, but it was unclickable.
The cause of the problem for me was that the DataGrid was inside a modal, causing the button to be unclickable whenever the overlay was active. However, I fixed the issue by giving my overlay component a higher z-index.
<GridOverlay {...getRootProps()}
style={{ zIndex: 5}}
//Or add it to your classes.zone styles
className={clsx(classes.zone, {
[classes.valid]: isDragAccept,
[classes.invalid]: isDragReject
})}
>
<input {...getInputProps()} />
{isDragActive
? (
<Typography variant='h6'>
{isDragAccept ? 'Drop the file here.' : 'Invalid file type.'}
</Typography>
)
: (
<Typography variant='h6'>
Drop CSV file here or click to upload.
</Typography>
)}
</GridOverlay>
(this seem to have been asked previously but I couldn't find any hint on if it was actually answered)
MUI has a good demo for creating upload buttons which boils down to:
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</label>
What I wonder is how to implement the same using the Speed Dial. Inherently the SpeedDialAction seems to materialize as a <button/>, but it's not possible to e.g. wrap the SpeedDialAction in a <label htmlFor /> as its parent will try to set some props on it and will fail.
So how do I initiate the file selection from within the Speed Dial or a FAB in general?
You can create a wrapper component that forwards props to SpeedDialAction.
function UploadSpeedDialAction(props) {
return (
<React.Fragment>
<input
accept="image/*"
style={{ display: "none" }}
id="icon-button-file"
type="file"
/>
<label htmlFor="icon-button-file">
<SpeedDialAction
icon={<CloudUploadIcon />}
tooltipTitle="upload"
component="span"
{...props}
></SpeedDialAction>
</label>
</React.Fragment>
);
}
https://codesandbox.io/s/material-demo-forked-h6s4l
(Note to future readers: For v5, time allowing, we hope to rationalise where props rather than context are used to control children, in order to solve exactly this kind of issue. So check whether this solution is still needed.)
It is - in my knowledge - not possible to add the htmlFor in any way. So what I would do is to add a hidden input type file and then add a ref to it. Then in the onclick of the SpeedDialAction button I would call a handler function that clicks on the input ref. Like this:
const inputRef = useRef();
const handleFileUploadClick = () => {
inputRef.current.click();
};
Then your SpeedDialAction:
<SpeedDialAction
onClick={handleFileUploadClick}
... the rest of your props
/>
And then finnaly your actual input:
<input
style={{ display: "none" }}
ref={inputRef}
accept="image/*"
id="contained-button-file"
multiple
type="file"
/>
Working demo: https://codesandbox.io/s/material-demo-forked-f9i6q?file=/demo.tsx:1691-1868
I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.
My code snippet is
<div>
<MuiThemeProvider muiTheme={muiTheme} class="navbar">
<AppBar
title='Module Name'
onTitleClick={handleClick}
iconElementRight={<FlatButton label='LogOut' />}
onClick = {handleclick}
/>
</MuiThemeProvider>
</div>
It will be helpful if I get any solution for it.
You can use children property to add any node in AppBar, like this:
<AppBar
title="Title"
children= {
<input />
}
/>
Use styling on input field, check the working codesandbox.
you can add a ToolBar contains a Textfield
you can check documentation ,this is a Demo
Using only Material UI
<AppBar>
<Toolbar>
<Input
type="search"
/>
</Toolbar>
</AppBar>
You can check the docs here.
Installing another framework.
npm i material-ui-search-bar
A basic code snippet can be found on the main page.
import SearchBar from "material-ui-search-bar";
// *snip*
return (
<SearchBar
value={this.state.value}
onChange={(newValue) => this.setState({ value: newValue })}
onRequestSearch={() => doSomethingWith(this.state.value)}
/>
);
You can check the docs here.
Try this
<AppBar>
<Toolbar>
<InputBase placeholder="Search for products, brands and more" />
</Toolbar>
</AppBar>
Pass a prop in the AppBar component
<AppBar
title="Title"
showSearch= {
<Toolbar>
<InputBase placeholder="Search" />
</Toolbar>
}
/>
You can handle AppBar component based on customName prop like if you're passing this prop then it should show Search else not.
It's a trivial issue but I'm not seeing where the problem exactly lies.
As far as I know, React offers the ability to pull stuff apart into (somewhat) independent components which results in cleaner pages because not everything is crammed into one huge HTML file. Or so the philosophy goes, I think.
Basically, when I do this, everything works fine:
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/><br />
<TextField hintText="Passwort" type="password" ref="password_login" floatingLabelText="Passwort" /><br />
<RaisedButton label="Login" onTouchTap={e => this.handleLoginTap(e, dispatch)} />
<p>Zur <a href="javascript://" onTouchTap={e => this.handleShowRegisterTap(e, dispatch)}>Registration</a>.</p>
</div>
</Popover>
Which looks like this:
However, when I pull out the <div> into another module and then do something like this:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<LoginFragment />
</Popover>
where LoginFragment.jsx contains something like this:
var LoginFragment = React.createClass({
render() {
return (
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/>
)
}
})
Which results in this hot mess:
So, what is going on here?
It can be a CSS styling issue, since you aren´t wrapping your fields inside a div anymore (and you are now skipping the loginStyle that was applied to this containing div.)
So, in the old version you had:
<Popover ...>
<div style={loginStyle}>
<TextField ...><br />
<TextField ...><br />
<RaisedButton .../>
<p>...</p>
</div>
</Popover>
But what you are including in your new version right now, using a single LoginFragment component, once expanded, would look like:
<Popover ...>
<TextField ...>
</Popover>
In this version, the wrapping divs (and their styling) would be missing. Including <div style={loginStyle}> in your code again would fix any CSS styling conflict, or help find and isolate the issue. Like so:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<LoginFragment />
</div>
</Popover>