I want to make a grid and organize the items in the card like that:
Here is what I have done so far:
<Grid stackable style={{border: '1px solid lack;'}}>
<Grid.Row>
<Grid.Column width={7}>
<Header
style={{ padding: '10px' }}
as="h3"
color={headerColor}
textAlign="left"
content="Church Mutual Worker's Compensation Claim"
/>
</Grid.Column>
<div style={{marginTop: '0px'}}>#ID-1234567</div>
</Grid.Row>
<Grid.Row>
<Grid.Column width={7}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
</Grid.Column>
<Grid.Column width={5}>
<Form.Button color="red" size="mini" content="Urgent" />
</Grid.Column>
</Grid.Row>
</Grid>
However, the result is not quite what I want:
How to orginize this card block?
Wouldn't it be better just to use card for that and not grid
<Card>
<Card.Content>
<Card.Header style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<div>Church Mutual Worker's Compensation Claim</div>
<div>#ID-1234567</div>
</Card.Header>
<Card.Meta style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
<p>
Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
<span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
</p>
<Button color="red" size="mini" content="Urgent" />
</Card.Meta>
</Card.Content>
</Card>
After this, you just need to add some style in order to make it look more like you want. Also, I suggest using className instead of inline styles. It is better for rendering and makes your code more readable.
Related
I am trying to center some cards inside a row element but I cant get it to work!
<Row className="d-flex justify-content-center">
{cardData.map((data) => {
return (
<Col>
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={data.img} />
<Card.Body>
<Card.Title>{data.title}</Card.Title>
<Card.Text>{data.text}</Card.Text>
<Button variant="primary">{data.button}</Button>
</Card.Body>
</Card>
</Col>
);
})}
</Row>
this is how it looks:: (as you can see, there is un-event spacing on the left and right of the card
I tried to put the following classes (mx-auto,d-flex justify-content-center) on the parent row but I cant get it to work
any advice is greatly appreciated
use justify-content: space-between
<Row style={{display:'flex', justifyContent: 'space-between'}}>
I usually using uuid from react-uuid but this time I get all time an error even I try to combine it with unique item.id..
<Swiper
{...params}
>
{listMovie?.map((item, index) =>{
const time = new Date(item.release_date)
return(
<React.Fragment key={`${item.id + uuid()}`}>
<SwiperSlide >
<Grid item className="items">
<Card sx={{ maxWidth: "350" }}>
<div className="favorite">
<IconContext.Provider
value={{ color: 'red', size: '30px' }}
>
<div className="fav" onClick={() => FavHanlder(item, index)}>
{likes.includes(item.id) ? <MdFavorite/> : <MdFavoriteBorder/>}
</div>
</IconContext.Provider> </div>
<Link to={`/movie/${item.id}`}>
<CardMedia
component="img"
height="350"
image={`${apiConfig.w500Image(item.poster_path)}`}
// alt={item.Title}
/>
<CardContent>
</CardContent>
</Link>
</Card>
<div className="title">
<Typography variant="body2" color="white" >
{item.original_title}
</Typography>
<Typography variant="body2" color="white" >
({time?.getFullYear()})
</Typography>
<div style={{display: "flex", float: "left", paddingLeft: "10px", paddingRight: "10px"}}>
<ReactStars
count={10}
value={item.vote_average}
size={10}
isHalf={true}
emptyIcon={<i className="far fa-star"></i>}
halfIcon={<i className="fa fa-star-half-alt"></i>}
fullIcon={<i className="fa fa-star"></i>}
activeColor="#ffd700"
/><p style={{fontSize: "5px"}}>/{item.vote_count}votes</p></div>
</div>
</Grid>
</SwiperSlide>
</React.Fragment>
)})}
</Swiper>
I am a little bit confused, because this is an error of beginners.
full msg:
Warning: Encountered two children with the same key, .0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
I am currently using react-infinite-scroll-component to paginate the comments from a certain post. There is a button in the comment section which shows a drawer that is supposed to show the paginated comments. The problem is, the react-infinite-scroll-component doesn't work, as it does not fire
the "next" function.
Here is the code:
<div>
<Drawer
anchor={"bottom"}
open={open}
onClose={handleDrawer}
style={{ height: "100vh", overflow: "auto", margin: "0px 4px" }}
>
<Toolbar>
<Typography variant="h4" style={{ flexGrow: 1 }}>
Comments
</Typography>
<IconButton onClick={handleDrawer}>
<CloseIcon />
</IconButton>
</Toolbar>
<Divider />
<br />
<CommentForm
comment={comment}
handleChange={handleChange}
handleSubmit={handleSubmit}
/>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Drawer>
</div>
The drawer is mostly similar to Youtube's comment drawer on the mobile app. Is there anything I am missing here?
Probably, the problem is the relation with Drawer and Infinite Scroll height. The height of Infinite Scroll is not reaching the right point to trigger next function. If you provide the demo in Codesandbox would be easier to understand.
Fixed height of infinite scroll container
<Box sx={{ height: 500 }}>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Box>
So I've set up some sticky rail content using an example for the SUIR docs. However, when scrolling the main content, the rail content scrolls into my fixed header.
Do I need to set more rules on the style prop for <Rail>?
Codesandbox link here
To view the issue, navigate to Docs from the menu bar.
The <Rail> component is at the bottom of Overview.js file
export default class Overview extends Component {
contextRef = createRef();
render() {
return (
<div>
<FixedMenuLayout />
<Grid centered columns={3} style={{ marginTop: "7em" }}>
<Grid.Column>
<Ref innerRef={this.contextRef}>
<Segment>
<Docs />
<Rail position="left">
<Sticky context={this.contextRef}>
<Header as="h3">Getting Started</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
<Header as="h3">How To</Header>
<List style={{ padding: "5px" }}>
<List.Item>Building</List.Item>
<List.Item>Standalone</List.Item>
<List.Item>Deployment</List.Item>
</List>
<Header as="h3">Development</Header>
<List style={{ padding: "5px" }}>
<List.Item>Road Map</List.Item>
<List.Item>Upcoming Features</List.Item>
</List>
</Sticky>
</Rail>
<Rail position="right">
<Sticky context={this.contextRef}>
<Header as="h3">Overview</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
</Sticky>
</Rail>
</Segment>
</Ref>
</Grid.Column>
</Grid>
</div>
);
}
}
Well a rather easy fix just didn't see the correct prop that handles this exact issue.
The offset prop for <Sticky> needs to be set to an appropriate value.
In my case,
<Sticky offset={90} context={this.contextRef}>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>