I am trying to get a full page bootstrap carousel to work. Currently the photos show up to the left and different sizes. I would like them to be centered and filled all with the same height. I am using the react bootstrap carousel package. I have looked all over. I added flex to my carousel item and it centered everything perfectly but broke the slider. css has never been my strong point so any help would be appreciated.
<Carousel
prevIcon={prevIcon}
nextIcon={nextIcon}
interval={null}
slide={false}
style={{
width: '100%;',
}}>
{this.state.sliderPhotos.map (s =>
<Carousel.Item
style={{
width: '100%',
height: '100%'
}}>
<img src={s.photo} className="landing-page-image"
style={{
objectFit: 'cover',
height: '300px !important',
width: '100%'
}}/>
<Carousel.Caption>
</Carousel.Caption>
</Carousel.Item>
)}
</Carousel>
Related
I finished the layout of the website I'm working on, and like how it looks...
But...when my friend opens it on her iPhone, it looks like this.
I can't figure out what's causing this. If I use Chrome Developer Tools and set it to a responsive mobile format, or iPhone X, it resizes properly. Can anyone help me figure out what I'm doing wrong here?
I also had a third person look at it who told me the video isn't playing. So I'm pretty lost, not sure what I'm doing wrong since I can't reproduce the issue myself.
Here is the link if anyone wants to check.
And this is the code for the header.
import React, { useState } from "react"
import styled from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
import title_image from "../../static/title.png"
const MenuIcon = //Removed
const MenuLinks = //Removed
const Header = () => {
const [nav, showNav] = useState(false)
return (
<div id='header' style={{ height: '100%', backgroundColor: 'black', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%' }} >
<img alt='logo' src={logo_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='title' style={{ position: 'relative', margin: 'auto', textAlign: 'center' }}>
<img alt='title' src={title_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='menu' style={{ width: '100%' }}>
<MenuIcon nav={nav} onClick={() => showNav(!nav)}>
<div />
<div />
<div />
</MenuIcon>
<MenuLinks nav={nav}>
<ul>
//Removed
</ul>
</MenuLinks>
</div>
</div >
)
}
export default Header
And here is the index code.
import React, { useState } from "react"
import Header from "./header"
import Footer from "./footer"
import "./style.css"
import VideoFile from "../../resources/vide_file.mp4"
const Index = () => {
const [nav, showNav] = useState(false)
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<Header style={{ alignItems: "flex-start" }}>
</Header >
<video loop autoPlay muted style={{ preload: 'auto', height: "75vh", objectFit: "cover", display: "block", margin: "0 auto", alignItems: "stretch" }}>
<source src={VideoFile} type="video/mp4" />
</video>
<Footer style={{ alignItems: "flex-end" }}>
</Footer>
</div>
)
}
export default Index
A slight tweak to the margin property on your div id='title' element fixes the issue:
margin: '0 auto'
Remember that margin: 'auto' centers elements horizontally and vertically. I believe what's happening is Chromium is properly centering the element within the direct parent container, in this case:
<div id="header" style="height:100%;background-color:black;display:grid;grid-template-columns:20% 60% 20%"></div>
Safari instead is going a level up and centering the element on the grandparent, which is the full viewport height:
<div style="display:flex;flex-direction:column"></div>
Specifying a '0' margin above and below the element forces Safari to move the logo back to the top of the parent element.
So I have my layout from Ant design and on the profile page theres one div at the top which has user's info.
Under it, there are many divs (one for each post), essentially mapping a post array into post divs.
Problem is, ive struggled with centring them to the middle of the page but after messing around with flex, i thought i did a good job in the end. It looked perfect at first when the user has no posts underneath the profile div. The moment there's posts, the profile div goes to the left alot for some goddamn reason.
The posts are perfectly centered like i want them but my problem is with the profile div. To fix it, i did a margin-left on the it. This makes it look perfect. But not so fast. Now when theres no posts, its awfully to the right cuz it was perfectly centered before the margin-left
So is there any way i can pass in a condition to say if posts.length === 0, and set the margin-left accordingly?
Losing my head.
Layout.js code:
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Network</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
{children}
</div>
</Content>
UserProfile.js code :
<div>
<div className="site-card-wrapper" style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
<Row gutter={16} type="flex" style={{justifyContent: "center", }}>
<Col span={16}>
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
<div style={{display:"flex", justifyContent: "space-between"}}>
<CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
<CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
</div>
</Card>
</Col>
</Row>
</div>
{
(userPosts.length > 0) ?
<Heading>Posts</Heading> :
<Heading>No posts yet</Heading>
}
{
userPosts.map(post => {
return <SinglePost key={post.id} post={post} />
})
}
</div>
SinglePost.js code (simplified):
<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
<Row gutter={16} type="flex" style={{justifyContent: "center"}}>
<Col span={16} >
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
<div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}>
{post.content}
</div>
<Likes>{likes} Likes</Likes>
</Card>
</Col>
</Row>
</div>
<div className="site-card-wrapper"
style={
{display: "inline-block",
marginBottom:20,
width: 500,
marginLeft:posts.length === 0 ? 0 : 355
}}>
use above conditional statement to handle run time marginLeft
I'm trying to have a segment float to the left and to the right in this situation. I may have a fundamental misunderstanding of how floats work. I have no idea why the right segment is behaving this way.
Left highlighted in blue and right highlighted in red for clarification.
Perhaps Segments aren't the solution here?
This is my layout component:
return (
<Container fluid>
<Navbar />
<Segment floated={"left"} style={{
height: "65vh",
marginLeft: "1rem",
}}
>Left Floating Segment</Segment>
<Segment style={{
height: "80vh",
margin: `0 auto`,
width: "60vw",
padding: `0 1.45rem`,
}}>{children}</Segment>
<Segment floated={"right"} style={{
height: "65vh",
marginRight: "1rem",
}}>Right Floating Segment</Segment>
<Footer />
</Container>
)
I found that putting the segments in a container with display: flex was enough to get them to behave.
<Container style={{display: 'flex'}}> </Container>
I am using a material ui library for my react project (material-ui.com) and want to add my logo in the center of the appbar component.
I tried with the following code:
<AppBar position="sticky" >
<Toolbar>
<img src={'../logo.svg'} className={classes.logo} alt="logo" />
</Toolbar>
</AppBar>
And the styling is:
logo: {
margin: 'auto',
textAlign: 'center',
maxWidth: '50%',
maxHeight: '70%',
}
It "kind of" works. By this I mean in Chrome and Firefox the logo size is different and in IE it overlapping the appbar.
I am looking how to center this logo in the middle of the bar where it is relatively consistent among all browsers.
I have created running example can be found on link
<AppBar position="sticky" >
<Toolbar>
<div style={classes.logoHorizontallyCenter}>
<img src={'../logo.svg'} className={classes.logo} alt="logo" />
</div>
</Toolbar>
</AppBar>
Styling:
var classes = {
logo: {
margin: 'auto',
textAlign: 'center',
maxWidth: '50%',
maxHeight: '70%',
},
logoHorizontallyCenter: {
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}
};
Please try to provide example on sandbox so that it would be easy for the person to help you out.
Stack: Meteor + React + MUI
Here's my full code of my 'main' renderer components:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
return (
<div className = "container">
<AppBar title = "test" />
<Tabs /> // Tab contents goes here
<RefreshIndicator
left={70} // Required properties
top={0} // Required properties
status="loading"
style={{
display: 'inline-block',
position: 'relative',
margin: '0 auto' }} />
</div>
);
},
I want to make Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :
In the document of MUI here, this indicator comes with following styles:
display: 'inline-block',
position: 'relative',
With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.
What I have tried :
margin: 0 auto --> failed
text-align: center --> failed
display: flex --> failed
combination of 1 & 2 --> failed
left={$(window).width/2-20} --> This works but I'd like to use CSS only
The solution below centres progress indicator without any hacky calculations that cause element to be offset:
<div style={{display: 'flex', justifyContent: 'center'}}>
<RefreshIndicator status="loading" />
</div>
Here is how I did to ensure it's horizontally centered. Works great for me.
Set the parent component style to position: 'relative'.
Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).
here is the code (I put it in a CardText component).
...
<CardText style={{position: 'relative'}}>
<RefreshIndicator
size={40}
left={-20}
top={10}
status={'loading'}
style={{marginLeft: '50%'}}
/>
</CardText>
...
In MUI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:
<Stack alignItems="center">
<CircularProgress />
</Stack>
Live Demo
circularprocess in material ui and text middle of page stackoverflow
<div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
<CircularProgress />
<span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
</div>[![enter image description here][1]][1]
The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.
<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>