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.
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.
I need to make fixed my tab bar headers which is opening in a drawer. Here is what I have tried.
Antd recommends react-sticky lib. Somehow it does not work. Maybe the reason is drawer scroll etc. Even if I hide the drawer scroll and create a scroll for tab body, sticky is not worked.
Ant Sticky Referans : https://ant.design/components/tabs/
react-sticky package : https://www.npmjs.com/package/react-sticky
position: -webkit-sticky;
position: sticky;
top: 0;
I also tried hard css but it does not work as well.
I look for Antd how handles the subject : fixed/sticky [sth]. So I find out Header from Layout component. Setting the style position fixed solved my problem. May be this is not a perfect solution but at least now in a drawer Tab Bar Headers are fixed.
Final codes are :
const renderTabBar = (props, DefaultTabBar) => (
<Layout>
<Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%',
background: 'white' }}>
<DefaultTabBar {...props} style={{
top: 20,
}} />
</Header>
</Layout>
);
<Drawer
placement="right"
onClose={onClose}
visible={visible}
getContainer={false}
title={<> </>}
style={{ position: 'absolute' }}
width={"25%"}
keyboard={true}
closable={true}
closeIcon={<CloseOutlined />}
mask={false}
maskClosable={false}
headerStyle={{ border: 'none' }}>
<Tabs tabPosition="top"
renderTabBar={renderTabBar}
animated={true}
style={{ paddingTop: 20 }}>
{tabBody}
</Tabs>
</Drawer >
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>
I'm using the MUI Card and CardMedia components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
I've tried placing the text div in above the CardMedia, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the CardMedia, but the v1 library doesn't seem to have anything like that.
Any know how to properly do this? Thanks in advance for any help!
Your CSS is off, you'll want to absolutely position the styles.overlay, and make sure the Card is position relative
Try something like this:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
Use the code below if you want to have an overlay like the Card in version 0. Remember to set the position of the container to relative so the absolute position of the overlay can take effect:
<Card sx={{ maxWidth: 345 }}>
<Box sx={{ position: 'relative' }}>
<CardMedia
component="img"
height="200"
image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
/>
<Box
sx={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
bgcolor: 'rgba(0, 0, 0, 0.54)',
color: 'white',
padding: '10px',
}}
>
<Typography variant="h5">Lizard</Typography>
<Typography variant="body2">Subtitle</Typography>
</Box>
</Box>
{...}
</Card>
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>