I want to create this view. I am using react. Using bumbag for theming. The part I am struggling right now is to Overlap the balance card with that "+" Button.
My code so far is
<Box
padding="major-2"
width="100vw"
height="25vh"
display="flex"
flexDirection="row"
gap="2em"
>
<Card width="100vw" height="17vh" borderRadius="1em">
<Box fontWeight="bold">৳ Balance</Box>
<Box textAlign="center" fontSize="3rem" fontWeight="bold" color={balanceTextColor}>
{balance.amount}
{balance.hasUnverrifiedLoad ? "+" : ""}
<sup style={{ fontWeight: "normal" }}>৳</sup>
</Box>
{/* <Button variant="circle">+</Button> */}
</Card>
<Box padding="major-1" display="flex" flexDirection="column" alignItems="center">
<Text>You can now earn with your wifi router</Text>
<Image src={process.env.PUBLIC_URL + "/down-arrow.png"} height="12vh" width="5vw"/>
</Box>
</Box>
Here Box,Card,Text,Image are from Bumbag. How Can I overlap the button with the bottom right of the card?
So far I was able to do this, without overlapping.
you can add those styling to the Button styles and adjust it to fit your styling
.card-button {
position: absolute;
bottom: -5px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 20px !important;
box-sizing: content-box !important;
}
I usually use styled-components to custom style my component. As for the answer for the question, please refer here:
https://codesandbox.io/s/sad-montalcini-0gw4j?file=/src/App.js
Please edit the css as per your requirement.
Related
I have successfully centered the Hello There button.
But my problem is, a little bit of lines are appearing on it.
I could put a background-color: white to solve it, but is there a better way to do this and a better coding? Like not using position: absolute etc....?
CLICK HERE FOR CODESANDBOX
<Stack
alignItems={"center"}
sx={{
marginTop: 2,
position: "absolute",
display: "flex",
left: 0,
right: 0
}}
>
<Button variant="outlined">Hello There</Button>
</Stack>
The Button variant you are using is the varian="outlined" which has a transparent background. So when is positioned above the dashed border they are shown behind it. In this case if you wan to keep this style of Button you have to add a background-colour of white to it.
Another option would be to use the contained variant like below but this would change the style of the button.
<Button variant="contained">
Hello there
</Button>
UPDATED:
or (for any reason you don't want to add the background colour to the button) you can add using :after or :before at the button, an element that will be behind the button and hide the dashed border. As a solution is not optimal as this will not work for dynamic backgrounds, or if they have an image or even a gradient color.
<Button
variant="outlined"
sx={{
position: "relative",
zIndex: "1",
"&:before": {
content: `''`,
background: "white",
width: "100%",
height: "10px",
position: "absolute",
zIndex: "-1"
}
}}
>
Hello There
</Button>
I think your question should be clearer but here is the answer of what I am thinking.
<Stack
sx={{
marginTop: 2,
position: "absolute",
width: "100%"
}}
>
<Button
variant="outlined"
sx={{
margin: "0px auto"
}}
>
Hello There
</Button>
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 >
im trying to make a full response window, which contains a rows. Above a video playing and at the bottom, some controls.
i applied the css recommended here for a full responsive keeping aspect ratio https://www.npmjs.com/package/react-player
This is the screen code:
<Flex color="white" direction="column">
<Flex justifyContent="center" flex="5">
<Box pos="relative" h="100%" w="100%">
<Player url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
</Box>
</Flex>
<Flex
justifyContent="space-around"
alignItems="center"
flex="1"
padding="2vmax"
>
<IconButton
aria-label="Search database"
icon={<GrVolume color="black" size="2vmax" />}
/>
<IconButton
aria-label="Search database"
icon={<GiExitDoor color="black" size="2vmax" />}
/>
</Flex>
</Flex>
and this is the Player component
const Player: FC<PlayerType> = ({ url }) => (
<div className="player-wrapper">
<ReactPlayer
url={url}
className="react-player"
playing
width="100%"
height="100%"
config={{
youtube: {
playerVars: {
rel: 0,
showinfo: 0,
modestbranding: 1,
fs: 0,
disablekb: 1,
host: "http://www.youtube.com",
},
},
}}
/>
</div>
);
this is the extra css applied:
.player-wrapper {
position: relative;
padding-top: 56.25%;
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
I tried by wrapping everything with chakra aspect-ratio component, but this is the closest escenario for a responsive thing that i found, and its bad lol.
This is also affecting Flex somehow since flex=5 is not being applied i guess
on bigger screens it overflows. The idea is to keep everything whitin 100vh.
I have a react component that contains a forms and it is formatted as follows:
<Box
display="flex"
justifyContent="center"
alignItems="center"
style={{ minHeight: "100vh", backgroundColor: "gray", opacity: "0.8" }}
> ...
</Box>
This componenent, called Form is then passed in App.js as follows:
import React from "react";
import Form from "./components/Form";
const sectionStyle = {
height: "100vh",
backgroundImage:
"url('www.blablabla.com/img.jpg') ",
backgroundRepeat: "no-repeat",
backgroundSize: "cover"
};
const App = () => {
return (
<div style={sectionStyle}>
<Form />
</div>
);
};
export default App;
However, the results I get is this one:
I added the opacity to better show that my Box component is 'stretched' all over the window, while I would like it to just wrap its content, so that if some opacity is applied, it will only appear I side the Box, and the background image will be normal.
How can I achieve this?
material-ui Box's default component is a div. see material-ui Box
A div's default behavior is to stretch horizontally across the available space. That is why your Box is stretching horizontally. Where is the default size of a div element defined or calculated?
The minHeight: "100vh" style you are applying to the Box is telling it to stretch across the available vertical space. That is why your Box is stretching vertically.
see Fun with Viewport Units
Perhaps using the Grid component as a wrapper will give you what you are looking for
<Grid container className={props.classes.sectionStyle}
direction="column"
justify="space-evenly"
alignItems="center"
>
<Grid item>
<Form />
</Grid>
</Grid>
This would change your code to be:
import React from "react";
import {Grid} from '#material-ui/core';
import Form from "./components/Form";
const sectionStyle = {
height: "100vh",
backgroundImage:
"url('www.blablabla.com/img.jpg') ",
backgroundRepeat: "no-repeat",
backgroundSize: "cover"
};
const App = () => {
return (
<Grid style={sectionStyle}
container
direction="column"
justify="space-evenly"
alignItems="center"
>
<Grid item>
<Form />
</Grid>
</Grid>
);
};
export default App;
I would suggest you to use pseudo elem like:after and :before
Here is an example.
.background-filter::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: .8;
background: red;
}
.background-filter {
position: relative;
}
.background {
background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
width: 200px;
height: 200px;
}
.background span{
position: absolute;
z-index: 1;
}
<div class="background background-filter"><span>Hello World I am text with background blur</span></div>
Do what ever you want to apply to ::after wont effect the form above
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>