I would like to create a 3-column nav bar and when the screen size is small, hide the search in the middle. When I set XS to a column, this rule should be applied when screens is tool small or small. But it does the opposite. it means it hides the middle column in the large view ports.
PS. I do not want to use css and would like to do it with ant grid properties only.
https://codesandbox.io/s/jovial-johnson-nkg9p?file=/src/App.js:249-251
import "./styles.css";
import "antd/dist/antd.css";
import { Row, Col, Layout, AutoComplete } from "antd";
export default function App() {
return (
<Row align="middle">
<Col flex="150px">Logo</Col>
<Col
flex={1}
sm={{
flex: 0,
span: 0
}}
md={{
flex: 1
}}
>
<AutoComplete
style={{
width: 200
}}
placeholder="search"
/>
</Col>
<Col flex="150px">User Menu</Col>
</Row>
);
}
Related
I'm trying to make the MUI component Breadcrumbs responsive:
When the Breadcrumbs component takes all of its space, its items shrink using ellipsis like any Typography component with noWrap prop set.
I know it has itemsBeforeCollapse, itemsAfterCollapse and maxItems props but these props are about item number compared to viewport size, not about each item width.
I tried to set the noWrap property to Typography and Link components (as it extends Typography props), but the ellipsis does not show up and the Link or Typography component does not shrink.
<Breadcrumbs>
{links.map((link, i) =>
i !== links.length - 1 ? (
<Link
key={i}
underline={'hover'}
noWrap
>
{link}
</Link>
) : (
<Typography noWrap key={i}>
{link}
</Typography>
),
)}
</Breadcrumbs>
You can reproduce the issue on this codeSandbox:
If I understand you correctly, the problem is that the noWrap style is not affecting the right element.
Why?
noWrap affect elements that its width limited either explicit (e.g. width: 100px) or implicit (by parent's width).
In your case, the Link and the Typography's width is not limited.
What can you do?
Breadcrumbs renders ol with display: flex. In order to force the children (li) to stand a line (and take a third in your case) you should give it flex: 1. From this point, you can give the li the ellipsis styles.
The last part, how to give the li these styles? There are some ways as described at the css section.
I would take the styled approach and this is how it looks
import * as React from "react";
import Typography from "#mui/material/Typography";
import Breadcrumbs from "#mui/material/Breadcrumbs";
import Link from "#mui/material/Link";
import { styled } from "#mui/material/styles";
const StyledBreadcrumbs = styled(Breadcrumbs)`
.MuiBreadcrumbs-li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
`;
export default function BasicBreadcrumbs() {
const links = [
"this is a waaaaaaaaaaaaay too long link",
"and another link that can be long too",
"this is the last link and guess what? It's waaaaaaaaaaaaaaaaaaayyy more longer"
];
return (
<StyledBreadcrumbs>
{links.map((link, i) =>
i !== links.length - 1 ? (
<Link key={i} underline={"hover"}>
{link}
</Link>
) : (
<Typography key={i}>
{link}
</Typography>
)
)}
</StyledBreadcrumbs>
);
}
https://codesandbox.io/s/basicbreadcrumbs-material-demo-forked-y1bbo?file=/demo.js
Hi i am having some trouble with Antd Space wrapping.
Sorry i'm an idiot with the css. Is there a css or style i can do to make it wrap to the next row?
This is within a <List.Item>
(Am ok to switch out the Space component to a normal div with appropriate css that can do the wrapping)
import { Card, Col, Row, Space } from 'antd';
<Space>
{ item.shares.reverse().map((share, i) => (
<SinglePost
share = {share}
height={300}
width={300}
/>
))}
</Space>
in SinglePost.js
return (
<Col span={8}>
<Card style={{ width: props.width, height: props.height }}
bordered={false}
>
<div className="approval-list-sub-box-holder-small">
<Player
playsInline
// src={currentData.content.video}
fluid={false}
height="100%"
width="100%"
>
. . .
</div>
</Card>
</Col>
)
This is the output currently but as you can see it might become too long on the width and becomes unviewable :(
Adding a wrap = true seems to work. For some reason i think i tried it just now but didn't.
Alternatively having a div with flex-wrap: wrap; also seem to work. i went with space for now.
<Space wrap = {true}>
{ item.shares.reverse().map((share, i) => (
<SinglePost
share = {share}
userId = {props.userId}
height={300}
width={300}
/>
))}
</Space>
I have a card inside a vertically aligned card groups:
The react code:
import React from 'react';
import { Container, CardGroup, Card, Row, Col } from 'react-bootstrap';
const styles = {
card: {
backgroundColor: '#B7E0F2',
borderRadius: 55,
padding: '3rem'
},
cardImage: {
objectFit: 'cover',
borderRadius: 55
}
}
export default function FindingsPage() {
return(
<Container fluid>
<CardGroup className="m-5 d-block">
<Card className="m-5 border-0 shadow" style={styles.card}>
<Row>
<Col>
<Card.Img src={require("../assets/images/findingsPage/EnglishesOfTheWorld.jpg")} style={styles.cardImage} />
</Col>
<Col>
<Card.Body>
<Card.Title as="h1">Englishes of the World</Card.Title>
<Card.Text as="h4" style={styles.cardText}>
How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz, which we are using to understand how grammar differs in different parts of the English-speaking world (USA, Ireland, Australia, etc.). We are also investigating how grammar is different for people who learn English later in life: Do they make different mistakes if their first language is German as opposed to Japanese?
</Card.Text>
</Card.Body>
</Col>
</Row>
</Card>
</CardGroup>
</Container>
)
}
However, when the text length is longer than the image height, the image doesn't stretch:
I was wondering is there a way to fix that? Thanks.
Good! However, if you want to have more performant images then you should consider the following width & height values:
100px
33vw
20em
calc(50vw-10px)
In other words:
cardImage: {
objectFit: 'cover',
borderRadius: 55,
width: '50vw',
height: '30vh'
}
Here is a reference for more information: https://web.dev/serve-responsive-images/
Ok I figured that out, just add height: '100%' to the cardImage in styles.
I am trying to display container of the grid in the middle of the screen. To create Grid layout I am using a bootstrap library in React. But I am not getting the output as per expectation. Can anyone suggest me the right way to do it.
App.js
import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import "./App.css";
class App extends Component {
render() {
return (
<div className="container">
<Row className="purchase-card">
<Col>
<h1>Hello World!</h1>
</Col>
</Row>
</div>
);
}
}
export default App;
App.css
.container {
margin-top: 10px;
}
.purchase-card {
width: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 1em;
}
output ::
expected output ::
I am using something like this to align the content into center:
<Container fluid>
<Row>
<Col xs={12} className="text-center">
<Row className="justify-content-center">
<Col>
{/* your conntent goes here, the col size is depends on you */}
</Col>
</Row>
</Col>
</Row>
</Container>
Also, I'm using this when I want position everything into the middle of the screen (a login screen for example):
<Container className="vh-100" fluid>
<Row className="h-100">
<Col xs={12} className="my-auto text-center">
<Row className="justify-content-center">
<Col>
{/* your conntent goes here, the col size is depends on you */}
</Col>
</Row>
</Col>
</Row>
</Container>
The number of rows with the justify-content-center className can appear as many times as you want to hold something.
I have a <Checkbox> component wrapped in a <FormControlLabel>. They are placed inside a container like this:
<FormGroup row={true} key={option.id}>
<FormControlLabel
className="ContractOfferOptionsSelector__option"
key={option.id}
control={
<Checkbox checked={option.selected} onChange={this.handleChange} value={String(option.id)} />
}
label={this.renderLabel(option)}
/>
</FormGroup>
private renderLabel(option: ISelectableOption) {
return (
<div className="ContractOfferOptionsSelector__option">
<span className="ContractOfferOptionsSelector__option__title">
<span className="ContractOfferOptionsSelector__option__title__abbreviation">{option.abbreviation}</span>
<span className="ContractOfferOptionsSelector__option__title__description">{option.description}</span>
</span>
<span className="ContractOfferOptionsSelector__option__price">
{`${formatCurrency(option.price.priceInclVat)} ${t(option.price.currency)}`}
</span>
</div>
)
}
The label renders as a <span> and 'tightly' wraps the content (so it doesn't take full width of the container). I have put multiple elements inside the label (price, title...) and want to make the label take full width, so that the elements space out across full width.
I tried .ContractOfferOptionsSelector__option {width: 100%;} but it doesn't work because the parent is also a <span>? with a dynamically generated class name...
How can I control the width of the label in material-ui?
<span> has a default inline display property.
Inline elements:
- Respect left & right margins and padding, but not top and bottom
- Cannot have a width and height set
Try to set display: inline-block to your <span> and add position: relative to the FormGroup container.
Solution
(tested with MUI v4)
import React from "react";
import { Checkbox, FormControl, FormControlLabel, FormGroup, makeStyles, TextField } from "#material-ui/core";
export default function App() {
const classes = useStyles();
return (
<FormControl fullWidth>
<FormGroup>
<FormControlLabel
classes={{
label: classes.fullWidth
}}
control={<Checkbox />}
label={<TextField label="Full width" defaultValue="Working" variant="outlined" fullWidth />}
/>
</FormGroup>
</FormControl>
);
}
const useStyles = makeStyles((theme) => ({
fullWidth: {
width: "100%",
},
}));
Full code on codesandbox.
Explanation
As you pointed out in your question, both the label and the control components become span elements inside FormControlLabel, with some default style as well.
To force the label to cover full width, you need to:
Toggle on the fullWidth prop for the FormControl;
Override the label CSS class in FormControlLabel to set its width: 100%