I have a logo image I'm attempting to responsively resize to fit within the container div. This is how I'm doing it, but the image extends vertically past the div's boundaries depending on the screen size.
What am I doing wrong? Here's the live site.
https://stoic-snyder-620f18.netlify.app/
<div id='app' style={{ height: '100vh', backgroundColor: 'pink', display: 'grid', gridTemplateRows: '15% 70% 15%' }}>
<div id='header' style={{ height: '100%', backgroundColor: 'blue', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%', backgroundColor: 'orange' }} >
<img src={logo_image} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
</div>
<div id='title' style={{ width: '100%', backgroundColor: 'lime' }}>
Title
</div>
<div id='menu' style={{ width: '100%', backgroundColor: 'coral' }}>
</div>
</div>
<div id='content' style={{ height: '100%', backgroundColor: 'teal' }}>
</div>
<div id='footer' style={{ height: '100%', backgroundColor: 'grey', textAlign: 'center', marginTop: '0.25rem', marginBottom: '0.25rem' }}>
<img src={fb_icon_image} style={{ height: '90%', display: 'inline-block' }} />
<img src={ig_icon_image} style={{ height: '90%', display: 'inline-block', marginLeft: '1rem', marginRight: '1rem' }} />
<img src={yt_icon_image} style={{ height: '90%', display: 'inline-block' }} />
</div>
<Global />
</div>
I also tried doing it as a background image, but this returns a broken link. Is this syntax wrong?
<img alt='logo' style={{ maxWidth: '100%', maxHeight: '100%', backgroundSize: 'cover', display: 'block', backgroundImage: 'url(' + logo_image + ')', backgroundPosition: 'top' }} />
Try this:
<img src={logo_image} style={{ maxWidth: '100px', height:"auto !important" }} />
Related
I have this MUI App bar which contains an image, some text, and a box containing an Icon along with some info on the logged in user. I am having difficulty forcing the box with user info to be right aligned. I cannot get it to go to the right edge of the page. I can only get it to stick to the end of the last Box.
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
<Box id="logo-env-txt-box" justifyContent="left" style={{ display: "flex", alignItems: "center" }}>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Box>
<Box id="user-info-box" justifyContent="right" style={{ display: "flex", alignItems: "center", width: "400px", height: "64px" }}>
<i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
John Doe Admin
</Typography>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
Product Lead
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>
(Repost)
No need to use width for your div user-info-box.
You can use justifyContent : "space-between" for your first element and you can remove both justifyContent : "left" and justifyContent : "right" of your children elements.
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
<Box id="logo-env-txt-box" style={{ display: "flex", alignItems: "center" }}>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Box>
<Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "auto" }}>
<i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
John Doe Admin
</Typography>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
Product Lead
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>
I am creating a form and have the following so far:
I need the inputs Name to be on top and then Start Date and End Date to be in the rows below which is fine. However I want the text for "Start Date" and "End Date" to be on top of the input fields rather than within the row. I am not sure how to achieve this and have tried using flexDirection as follows:
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<span
style={{
flexDirection: "column",
display: "flex",
}}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
<span>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
One solution is wrap each span and input into a div and give each span display: block
It would be better to use classes instead of using inline style.
<span>Name </span>
<Input
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>
<div style={{ flexDirection: "row", display: "flex" }}>
<div>
<span
style={{ display: 'block' }}
>
Start Date
</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setStartDate(e.target.value)}
value={startDate}
/>
</div>
<div>
<span style={{ display: 'block' }}>End Date</span>
<Input
style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
type="text"
onChange={(e) => setEndDate(e.target.value)}
value={endDate}
/>
</div>
</div>
I'm using the react mui Select Component for forms and now for language select
my problem is for the language Select I need a different style for the dropdown I can do it by overriding the relevant class but the problem is it will happen to every Select and I want it only for the language Select as you can see in the photo:
and here my code:
const LanguagesSelect = props => {
return (
<Select className="test" classes="assad" style={{ position: "relative !important", left: "20px !important", top: "30px !important", width: "168.3px !important", background: "white !important", borderRadius:"12.75px" }} >
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<div style={{ display: "flex", width: "100%" }}>
<img src={require("../../../assets/img/icons/flags/franch.svg").default} />
<div style={{ marginLeft: "5px" }} >Franch</div>
</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/eng.svg").default} />
<div style={{ marginLeft: "5px" }}>English</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/turkish.svg").default} />
<div style={{ marginLeft: "5px" }}>Turkish</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/czech.svg").default} />
<div style={{ marginLeft: "5px" }}>Czech</div>
</MenuItem>
<MenuItem className="menuTest" style={{ paddingLeft: "5px" }}>
<img src={require("../../../assets/img/icons/flags/hebrew.svg").default} />
<div style={{ marginLeft: "5px" }}>עברית</div>
</MenuItem>
</Select>
)
}
You can use the sx prop to override the default style.
here's a link for more description mui_sx_prop
You can give external css to the Select element and manipulate the child (MenuItem) from there.
Hello, I am using react-bootstrap library. I want to center the search bar and button on the navbar. But while centering, it's also taking into account the sibling element (logo) and leaning towards the right of the page. I don't want to solve this by applying brute force minus margin-left if possible. I'm confused with these justify-content stuff. Thanks in advance.
<Navbar style={{ backgroundColor: "#D3D3D3" }}>
<Nav className="d-flex justify-content-start">
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250, marginLeft: 20 }} />
</NavbarBrand>
</Nav>
<Nav className="d-flex flex-grow-1 justify-content-center">
<Form className="d-inline-flex">
<FormControl
type="search"
placeholder="Type pokemon name"
value={search}
onChange={e => setSearch(e.target.value)}
/>
<Button
style={{ backgroundColor: "#ffe031", color: "#396bba" }}
onClick={() => history.push(`/pokemon/${search}`)}
>
<strong>Search</strong>
</Button>
</Form>
</Nav>
</Navbar>
Try it like this:
<Navbar style={{ backgroundColor: "#D3D3D3", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'start' }}>
<NavbarBrand href="/">
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form className="" style={{ margin: 'auto' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)}/>
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
Here, the Navbar has display flex and the flex direction is row so the logo along with the 2 search elements (text field and search button) will be shown in a row. Then alignItems:'center' centers these 3 elements vertically in the Navbar and the justifyContent: 'start' moves the 3 elements to the start of the Navbar horizontally.
After this, to make the 2 elements of search come in the center, margin:'auto' is used in the Form.
And here's another way: (if the above code doesn't correctly align the search elements in center)
<Navbar style={{ position: 'relative', display: 'flex', backgroundColor: "#D3D3D3" }}>
<NavbarBrand href="/" style={{float: 'left'}}>
<img src={logo} alt="pokedex-logo" style={{ width: 250 }} />
</NavbarBrand>
<Form style={{ float: 'none', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
<FormControl type="search" placeholder="Type pokemon name" value={search} onChange={e => setSearch(e.target.value)} />
<Button style={{ backgroundColor: "#ffe031", color: "#396bba" }} onClick={() => history.push(`/pokemon/${search}`)}>
<strong>Search</strong>
</Button>
</Form>
</Navbar>
In this code, the CSS properties of position and float are used. float: 'left' moves the logo to the left and the search elements have float: 'none'. The search elements use the position property to align to the center of the Navbar which has position: 'relative'.
Please help anyone,
3d design Icon size is 219px
When I use the first Div component size 219px is working fine as well as all Cols are attached together in full screen and align center to the mobile screen also
and if I try to use it as the same Div style using Card's content is not able to align properly..... is there any issue with Card component or I missed something somewhere
<div style={{ paddingTop: 50, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" }}>
<Row>
<Col style={{ width: 219 }}> <Example /></Col>
<Col style={{ width: 219 }}><Example1 /> </Col>
<Col style={{ width: 219 }}><Example1 /></Col>
<Col style={{ width: 219 }}><Example1 /></Col>
<Col style={{ width: 219 }}><Example1 /></Col>
</Row>
</div>
<div style={{ paddingTop: 10, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" , textAlign:"left"}}>
<Row>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={threedcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#e0741b", color: "white" }}> 3D DESIGN</Card.Header>
<Card.Body style={{ backgroundColor: "#fff567" }}>
<Card.Text>
We at Hephy, have the finest Designer to make 3d models out of your desired material.
</Card.Text>
<Threed />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={eventcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#d15950", color: "white" }}> EVENT </Card.Header>
<Card.Body style={{ backgroundColor: "#feece6" }}>
<Card.Text>
Right from employee birthday parties to culture events, we like to add that something extra to the Event to make it grand.
</Card.Text>
<Eventmodal />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={decocard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#dc6372", color: "white" }}>DECORATION</Card.Header>
<Card.Body style={{ backgroundColor: "#fff0f5" }}>
<Card.Text>
At hephy, we understand the emotions of parents and their joy when their Children get married.
</Card.Text>
<Decoration />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={promoaddcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#31986b", color: "white" }}>PROMO & ADDS</Card.Header>
<Card.Body style={{ backgroundColor: "#b7fbf3" }}>
<Card.Text>
Rather focusing on specific product or services, we focus on your brand as a whole. It enables to increase your growth in many ways.
</Card.Text>
<Promomodal />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={festcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#3d7867", color: "white" }}>FEST</Card.Header>
<Card.Body style={{ backgroundColor: "#cff6f2" }}>
<Card.Text>
We provide School and College Events. While organizing events, we provide proper arrangements for everything.
</Card.Text>
<Festmodal />
</Card.Body>
</Card>
</Col>
</Row>
</div>
do justify-space-around in parent div