I have the below tabbed form and no matter what I set as far as content (grids, boxes, etc) the width of the parent form is always 256px
The html element is MuiContainer-root RaFormInput-input-61 but its always the RaFormInput with this limit.
Is there something obvious I am missing here?
<Edit {...props} title={<ClientTitle />}>
<TabbedForm>
<FormTab label="details">
<Container maxWidth={false}>
<Grid container className={classes.root} spacing={2}>
<Grid container direction="row">
<Typography variant="h6" gutterBottom>
{translate('resources.clients.fieldGroups.identity')}
</Typography>
</Grid>
<Grid container direction="row" justify="flex-start" alignItems="center" spacing={2}>
<Grid item>
<TextInput source="firstname" resource="clients" validate={requiredValidate} fullWidth />
</Grid>
<Grid item>
<TextInput source="lastname" resource="clients" validate={requiredValidate} fullWidth />
</Grid>
</Grid>
</Grid>
</Container>
</FormTab>
<FormTab label="referrals">
<AddNewReferralButton record={props.record} />
<ReferenceManyField reference="referrals" target="clientid" addLabel={false}>
<Datagrid>
<TextField label="Name" source="name" />
<TextField label="Status" source="status" />
<EditButton />
</Datagrid>
</ReferenceManyField>
</FormTab>
</TabbedForm>
</Edit>
Yes, you are.
SimpleForm docs state that:
The <SimpleForm> renders its child components line by line (within
components). It accepts **Input** and **Field** components as
children.
TabbedForm section underneath in the docs explains that it has the same behaviour as the SimpleForm except:
However, the component renders inputs grouped by tab.
The Mui Container / Grid /Box components are not ra-inputs nor ra-fields. What you are trying to do is build a custom form layout which is achieved through the FormWithRedirect component read here or you can do it entirely by your own following react-final-form docs.
Related
This error shows in my dev tools when I load my app. I'm not sure how to go about changing it to fix the problem. I suspect it is a reason why when I deploy it to heroku it looks different that when I view it locally so I'm hoping if I fix this it will fix my problem with heroku as well.
Here is my code:
return (
<Container className="container" maxWidth="xl">
<CssBaseline />
{/* <Box sx={{ marginTop: 10, padding: 7, bgcolor: "#eeeeee", borderRadius: "0.3rem" }}> */}
<Grid className="homeContainer" container spacing={1}>
<Grid className="topGrid">
<Grid className="imageContainer" item xs={4} sx={{ }}>
<img className="cctLogoLarge" src={cctlogo1} alt="outline of horse with parliament buildings in background"></img>
</Grid>
<Grid className="introContainer" item xs={12}>
<p>Welcome to Cap City Trotters! The CCT was created in 2019 by KMAC, Lynch, Bruster, and Damarts. Our Routes include several loops in both Ottawa and Gatineau.
We are always looking for new members so if you want to join you can take a look at some of our main routes and signup if you like what you see!</p>
{/* Test Connect to Strava */}
</Grid>
</Grid>
<Grid >
<Grid className="postList-grid">
{/* {loggedIn && (
<div className="col-12 mb-3">
<PostForm />
</div>
)} */}
<Grid item xs={6} sx={{ bgcolor: ""}} className="recentPosts">
{loading ? (
<div>Loading...</div>
) : (
<PostList posts={posts}/>
)}
</Grid>
{loggedIn && userData ? (
<Grid>
{/* <FriendList
username={userData.me.username}
friendCount={userData.me.friendCount}
friends={userData.me.friends}
/> */}
</Grid>
) : null}
</Grid>
</Grid>
{/* </Box> */}
</Grid>
</Container>
)
I've looked at similar questions and answers but can't figure out how to solve this problem specifically.
Thanks in advance!
Whenever you add a prop without a value to React component, it evaluates to true:
<MyComponent boo />
Here, MyComponent receives a boo = true property. That's what you have in your code with item, while it shouldn't be a boolean value. Just pass some value to item:
<Grid item={somethingElse}>
So i'm trying basically to have a input field which completes a link and refers the user to it.
However when I click on the button I get a page to open properly but with a 'undefined' at the end as if the input field was not updated.
Any insight would be appreciated :)
let workerID;
const workerLink = "html link";
const workerSearch = workerLink + workerID
return (
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<h1><DashboardOutlinedIcon /> Job Card</h1>
<Moment className={classes.time}interval={1000} format="HH:mm:ss DD/MM/YYYY" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3><AccessibilityNewRoundedIcon /> NameGet</h3>
<TextField id="standard-basic" label="Name:" variant="outlined" />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<h3>Fetch</h3>
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID}/>
<Button variant="contained" color="primary" className={classes.formstyle} value={workerID}>Search</Button><SearchRoundedIcon />
</Paper>
</Grid>
</Grid>
</div>
);
You should add a onChange attribute to the input(TextField in MaterialUI) and you are better using state in React instead of variables because if the variable updates again react will not update the UI with respect to the value of variable but it will update in case of state.
import React, {useState} from 'react'
// Your Rest of code
const [workerID, setWorkerID] = useState('')//initial value of workerID is empty string
return(
//Rest of Code
<TextField id="standard-basic" label="ID:" variant="outlined" value={workerID} onChange={event=>setWorkerID(event.target.value)}/>
//Rest of Code
)
I am trying to set the value of TextField when a user clicks on a button.
The error I am getting is:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
I think it has to do with the Button as I have a onclick function for each one. maybe there a better solution?
const [txtValue, setTxtValue] = useState({})
function campaignAmount(value){
// alert(value)
setTxtValue(value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" aria-label="outlined primary button group">
<Button onclick={campaignAmount(300)}>$300</Button>
<Button onclick={campaignAmount(500)}>$500</Button>
<Button onclick={campaignAmount(1000)}>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
Update:
I have made some changes and now I am getting
Line 164:9: 'setTextValue' is not defined no-undef
Search for the keywords to learn more about each error.
New Code
const [txtValue, setTxtValue] = useState("0")
function schemaTypeSelectionHandle(event) {
// console.log('key: ', $(event.target).data('key'));
setTextValue(event.target.attributes.getNamedItem('data-key').value);
console.log('key: ', event.target.attributes.getNamedItem('data-key').value);
}
return (
<Grid container>
<Grid item lg={6}>
<ButtonGroup color="primary" onClick={this.schemaTypeSelectionHandle.bind(this)} aria-label="outlined primary button group">
<Button data-key='1'>$300</Button>
<Button data-key='1'>$500</Button>
<Button data-key='1'>>$1000</Button>
</ButtonGroup>
</Grid>
<Grid item lg={3}>
<TextField
id="campaignAmount"
name="campaignAmount"
margin="none"
fullWidth
value={`${txtValue[0]}`=== "undefined" ? '0' : `${txtValue[0]}`}
variant="outlined"
required={true}
/>
</Grid>
</Grid>
);
The edited code seems to be working fine. But the only issue is the little typo you have. It is "setTxtValue" not "setTextValue".
Your defined hook => const [txtValue, setTxtValue] = useState("0")
I am trying to add bulk action capabilities to <MuiGridList> component in react-admin 2.9.7. While rendering table like this:
<List>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
Checkboxes are shown in the first column, corresponding to this demo https://marmelab.com/react-admin-demo/#/categories. That's awesome.
Then I have grid layout (which I am switching to dynamically from list view if that's important):
<List>
<MuiGridList
cellHeight={180}
cols={getColsForWidth(width)}
className={classes.gridList}
>
{ids.map(id => (
<GridListTile>
<Checkbox/>
<EditButton to={linkToRecord(basePath, data[id].id)}/>
<ThumbnailField record={data[id]}/>
<GridListTileBar
className={classes.tileBar}
title={data[id].name}
key={id}
/>
</GridListTile>
))}
</MuiGridList>
</List>
This looks like a demo at https://marmelab.com/react-admin-demo/#/products but how can I achieve the same bulk actions capabilities as in <Datagrid> component?
I want to set direction property to <Grid container> component of the Material UI framework. I have read the doc
and I tried setting direction property as column like below:
<Grid container direction="column">
<Grid item xs={12} >
<h3 className="center-align">Log In</h3>
<input type="text" id="user-email-on-login" placeholder="username#email.com" />
<input type="password" id="user-password-on-login" placeholder="password" />
<button>Log In</button>
</Grid>
<Grid item xs={12}>
<button>Forgot Id/Password</button>
<button>Create Account</button>
<button>Remember Me</button>
</Grid>
</Grid>
But the output is not expected result. The output seems the same with the way I have used direction="row".
When I remove <Grid item> tag, then direction=column property on <Grid container> works perfectly.
If I have to use <Grid item> tag, is there a way to set flex-direction property as column?
You could add the "container" property to the grid element and thus have the "direction" property.
It's possible for an item to be both container and item at the same time.
Anyway, if you want to be more precise, you can upload an example of sandbox :)
Here's an example of what you want:
https://stackblitz.com/edit/react-2m3blz