I am trying to create a Card in React which look like the first one on the left:
So I have created a class as below (plz do not take care of the immage, I just play with the text position for now)
import React from 'react';
import BlueButton from '../materialdesign/BlueButton'
import TextContents from '../../assets/translations/TextContents';
import { Container } from 'react-bootstrap';
class ClassCard extends React.Component {
render() {
const tileStyle = {
postion: "absolute",
topMargin: "100px !important",
textAlign: "center",
width: "300px",
height: "460px",
margin: "20px",
backgroundColor: "#999999",
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
borderRadius: 21,
}
const titleStyle = {
display: "inline-block",
width: "200px",
fontFamily: "Fredoka One",
fontSize: 20 ,
fontWeight: "bold",
color: "#ffffffff",
}
const descStyle = {
display: "inline-block",
width: "200px",
fontFamily: "Source Sans Pro",
fontSize: 14 ,
fontWeight: "bold",
textAlign: "center",
color: "#ffffffff",
}
return(
<Container style={tileStyle}>
<div>
<p style={titleStyle}>{this.props.title}</p>
<p style={descStyle}>{this.props.desc}</p>
</div>
<div style={{position: "relative", bottom: "-100px", top:"auto !important"}}>
<BlueButton textSize="14" link_href="#" text={TextContents.BookBtn} />
</div>
</Container>
);
}
}
export default ClassCard;
I am trying to make sure that the title is always fixed at the same margin from the top, same for the descriptio and also the book button always at the same place from the bottom. The goal is to make sure that if all the cards are aligned, it has all title, desc and button aligned.
Also, I can't find a way to create an animation to do a nice effect. What I am trying to achieve is when the card is selected or the mouse point is hover, you can see title, desc and button. When not focus or selected or hover, every look like slide down to only display the title. like seen on the second picture on the image above.
The effect should look like slide up and down
Any idea how to fix the position of the text and do this animation
Thanks a lot
use position:absoulut to do the positioning
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 40%;
position: relative;
display: inline-block;
height: 500px;
background: lightblue;
}
.title {
position: absolute;
top: 10%;
}
.des {
position: absolute;
top: 30%;
}
.btn {
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div class="container">
<p class="title">This is a title</p>
<p class="des">This is a discription</p>
<button class="btn">buttom</button>
</div>
<div class="container">
<p class="title">This is a title</p>
<button class="btn">buttom</button>
</div>
</body>
codepen
Related
So far I have tried this:
import "./styles.css";
import { Box, Typography } from "#mui/material";
import styled from "#emotion/styled";
export default function App() {
const MainStyle = styled("div")(({ theme }) => ({
position: "fixed",
zIndex: 99999,
right: 0,
bottom: 0
}));
return (
<MainStyle>
<Box sx={{ transform: "rotate(-90deg)", backgroundColor: "blue" }}>
<Typography sx={{ color: "white" }}>CHAT WITH US!</Typography>
</Box>
</MainStyle>
);
}
The problem with this is that half the box is out of the screen and is not all the way to the right.
My goal is to have it all the way in the right corner but also show the entire box like up against the side like https://proxy-seller.com/ have their "chat with us, we are online" just I want it on the right side.
writing-mode: vertical-rl; you can the mentioned css property.
Simple html example for writing-mode: vertical-rl, you can lear more about it from this.
.main {
position: relative;
}
.text {
writing-mode: vertical-rl;
border: 2px solid #000;
position: absolute;
top: 15px;
right: 15px;
height: 120px;
}
<main class="main">
<h1 class="text">Test text</h1>
</main>
I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement).
I have written the following code: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. At the moment, the panel is NOT under Button2 and does NOT overlay the editor.
Does anyone know how to amend the CSS?
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
render() {
return (
<div>
<Stack horizontal horizontalAlign="space-between">
<div>Title</div>
<div>Button1 Button2 Button3</div>
</Stack>
<div
style={{
backgroundColor: "yellow",
width: "350px",
height: "50px"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px"
}}
>
An editor
</div>
</div>
);
}
}
You need to use position:absolute on floating pane and add it in the editor div which will have position:relative.You can see the result it works fine
On clicking button 2 the floating panel hides/shows alternatively
This will work.
var btn=document.querySelector('.drop_btn');
btn.onclick=function()
{
document.querySelector('.dropdown').classList.toggle('block');
}
*
{
font-family: 'arial';
margin: 0px;
padding: 0px;
}
.menu_pane
{
display: flex;
background: #151515;
color: white;
padding:5px 10px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.menu_pane h3
{
font-weight: normal;
font-size: 18px;
flex-grow: 1;
}
.menu_pane .btn button
{
position: relative;
background: #0971F1;
color: white;
border-radius: 5px;
border:none;
cursor: pointer;
padding: 8px 20px;
margin-right: 10px;
}
.dropdown
{
display: none;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: white !important;
position: absolute;
background: #242424;
border-radius: 0 0 10px 10px;
}
.menu_pane .btn .dropdown p
{
font-size: 14px;
}
.editor_pane
{
position: relative;
background:#151515;
color: white;
min-height: 50vh;
border-radius: 0 0 10px 10px;
padding: 10px;
color: #512DA8;
}
.block
{
display: block;
}
<div class="container">
<div class="menu_pane">
<h3>Title</h3>
<div class="btn">
<button>Button-1</button>
</div>
<div class="btn">
<button class="drop_btn">Button-2</button>
</div>
<div class="btn">
<button>Button-3</button>
</div>
</div>
<div class="editor_pane">
<p>An editor</p>
<div class="dropdown">
<p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
</div>
</div>
</div>
How does this look?
https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js
I moved the floating pane into the button, made the button position relative, and made the floating pane position absolute.
Note: notice there's no top property on the floating pane. One neat thing about position absolute is if you don't set top, left, bottom, right those positions will be where that box would be if it wasn't position absolute.
Update
I noticed that the overlay needed to cover the "editor" area only and have the example updated with hopefully the right placement of it.
Updated live example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
position: "relative"
}}
>
An editor
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
</div>
</div>
);
}
}
Keeping the original example (it had overlay on the whole component except for "Button 2") just in case if it might be useful.
Original
Not sure if I fully understand the desired result, but here is the component implemented with a toggle overlay controlled by Button2.
The overlay is currently set on top of and blocking all child elements except for Button2, so that it works as a "start editing" button, but it can be further adjusted to specify which element it covers to better suit the use case.
Quick demo of the example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div style={{ position: "relative", zIndex: "1" }}>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button style={{ zIndex: "75" }} onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
zIndex: "50",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff",
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
}}
>
An editor
</div>
</div>
);
}
}
I'd like to have an element overlapping onto an image in react native. I'm new in react native but could do this in CSS in 3 lines of code:
container in position relative.
element in position absolute + bottom: 20px.
Here is my react native code and a screenshot of what it looks like.
<ScrollView style={styles.container}>
<Image
style={styles.profileImage}
source={{uri: blabla}}
/>
<View style={styles.iconContainer}>
<ActionIcon
name={'mode-edit'}
color={colorBrand}
onPress={() => console.log('test')}
/>
</View>
<List containerStyle={styles.list}>
<ListItem
title={'Account Settings'}
/>
<ListItem
title={'Notifications'}
/>
<ListItem
title={'Terms & Conditions'}
/>
<ListItem
title={'Privacy Policy'}
/>
<ListItem
title={'Log Out'}
/>
</ScrollView>
and StyleSheet:
const styles = StyleSheet.create({
container: {
flex: 1
},
profileImage: {
height: 250
},
list: {
borderTopWidth: 0,
flex: 1,
marginTop: 0
},
iconContainer: {
alignSelf: 'flex-end',
right: 10,
bottom: 40,
marginBottom: -60,
zIndex: 1
}
})
So it looks like:
So it looks like exactly like I want it. But I am not liking that zIndex, nor that negative bottomMargin.
I first tried with a container of the iconContainer in position relative, then the iconContainer in position absolute. But to have it displayed you had to set a height. Then you have a white space full width and of the set height with the icon at the right. Which pushes the list down and adds a big white space.
Is there any other options?
Cheers
Add the css property, position: 'absolute' to the element you want to overlap.
I will suggest you to wrap your image and icon in a div and then play with position css
Stack Snippet
.wrapper {
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.wrapper i {
position: absolute;
right: 20px;
bottom: -25px;
width: 50px;
height: 50px;
background: #5ab985;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
.wrapper img {
display: block;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="wrapper">
<img src="http://lorempixel.com/200/200/sports">
<i class="material-icons">mode_edit</i>
</div>
Using React & Material UI I'm trying to layout 3 divs within a <Card> <CardHeader/> such that it has a left, center and right alignment respectively as shown below.
The change is trivial, I need to remove the padding and change to display: inherit but it seems this <div> exists between the exposed style & titleStyle for <CardHeader> and <CardHeader title={someElement}/>
The hierarchy looks like:
...<div><div.myCardHeader><div><span><myTitleElement>...
Being so new to React and styles, I'm unsure how to get to it.
Some representative code follows.
Thanks for help.
// #flow
import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
const style = {
paper: {
height: 250,
width: 200,
margin: 20,
},
card: {
header: {
container: {
display: 'flex', /* establish flex container */
justifyContent: 'space-between',
backgroundColor: 'lightblue'
},
padding: 1,
height: 26
}
}
};
const POCardTitle = () => (
<div className="myContainer" style={style.card.header.container}>
<div style={{ width: 25, height: 26, border: '2px dashed red' }}> - </div>
<div style={{ width: 25, height: 26, border: '2px dashed blue' }}> - </div>
<div style={{ width: 25, height: 26, border: '2px dashed green' }}> - </div>
</div>
);
export default class POCard extends Component {
render() {
return (
<div>
<Paper style={style.paper} zDepth={2} >
<Card >
<CardHeader className="myCardHeader"
style={style.card.header}
titleStyle={{ paddingRight: 0, display: 'inline' }}
title={<POCardTitle />}
/>
</Card>
</Paper>
</div>
);
}
}
I managed to get there courtesy of https://www.styled-components.com
and the following:
const StyledHeader = styled(CardHeader) `
padding: 0px !important;
height: 26px !important;
> div {
display: inherit !important;
padding-right: 0px !important;
}
`;
I could find no other way to get to the "first div" after the component through regular CSS...
I've made a sticky footer higher-level component that wraps other components inside itself:
Footer.js
//this is a higher-order component that wraps other components placing them in footer
var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
};
const Footer = React.createClass({
render: function() {
return (
<div style={style}>
{this.props.children}
</div>
);
}
});
export default Footer;
Usage:
<Footer><Button>test</Button></Footer>
But it is hiding the contents of the page:
This looks like a common problem, so I searched a bit and found this issue, where is FlexBox is recommended for the sticky footer. But at this demo the footer is at the very bottom of the page, while I need the footer to be always displayed on the page and the content being scrolled inside the above area (like in SO chat). In addition to that, there is an advice to change all the other components with custom stylesheet rules. Is it possible to achieve what I need using styling only the footer component so the code will remain modular?
Here's an idea (sandbox example link).
Include a phantom div in your footer component that represents the footer's position that other dom elements will respect (i.e. affecting page flow by not being position: 'fixed';).
var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100%",
}
var phantom = {
display: 'block',
padding: '20px',
height: '60px',
width: '100%',
}
function Footer({ children }) {
return (
<div>
<div style={phantom} />
<div style={style}>
{ children }
</div>
</div>
)
}
export default Footer
Much easier idea (following the trend), i imported both bootstrap and reactstrap, used the bootstrap fixed bottom class and workaround with that like this.
class AppFooter extends Component{
render() {
return(
<div className="fixed-bottom">
<Navbar color="dark" dark>
<Container>
<NavbarBrand>Footer</NavbarBrand>
</Container>
</Navbar>
</div>
)
}
There is a much simpler way. I am creating a portfolio site with React, and some of my pages are not very long, so in some devices, like kindle fire hd for example, the footer would not stick to the bottom. And of course to set this up in the traditional fashion with would not work, because the would be wrapped in there. And we don't want that. So this is what I did:
In App.js:
import React, { Component } from 'react';
import {Header} from './components/Header';
import {Main} from './components/Main';
import {Footer} from './components/Footer';
class App extends Component {
render() {
return (
<div className="App Site">
<div className="Site-content">
<div className="App-header">
<Header />
</div>
<div className="main">
<Main />
</div>
</div>
<Footer />
</div>
);
}
}
export default App;
And then in _sticky-footer.css (I use POSTCSS):
:root {
--space: 1.5em 0;
--space: 2em 0;
}
.Site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.Site-content {
flex: 1 0 auto;
padding: var(--space) var(--space) 0;
width: 100%;
}
.Site-content:after {
content: '\00a0';
display: block;
margin-top: var(--space);
height: 0;
visibility: hidden;
}
The original solution for this was created by Philip Walton: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
You can fix this by adding margin-bottom: 60px; to the body of your website. With the 60px being the height of your footer.
.footer{
width: 100%;
position: fixed;
bottom: 0;
}
This should do the trick! Cheers! (:
.App will be the main component you load to your Root.
Assume that the footer is the last child of .App in the document flow
.App {
height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
I found that if you wrap your 'footer' component in a standard html
<footer>
tag, it pretty much sorts out all of the positioning for you
I wanted to share this solution that worked. I cribbed this from https://react.semantic-ui.com/modules/sticky. Scroll to the bottom of this page and inspect the text 'This is the bottom' to see where I stole it. Its a site built on react so it should work for your situation.
Here it is:
{
padding-top: 50vh;
}
Conceptually, this solution is creating negative space like jacoballenwood's phantom div to push the footer down to the bottom and stick it there. Just add it to your css style class for the footer and adjust the value to taste.
Very late answer, but someone can find this useful. You can, instead of phantom style, set Toolbar. I have build some standard layout for the components, where {children} is component from the parent component - App.js. This is example:
import React from "react";
import { Route } from "react-router-dom";
import { makeStyles } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
import CssBaseline from "#material-ui/core/CssBaseline";
import Toolbar from "#material-ui/core/Toolbar";
import Header from "../components/header";
import Footer from "../components/footer";
import SideBar from "../components/sidebar";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
content: {
flexGrow: 5,
padding: theme.spacing(3),
},
}));
const StandardLayout = ({ children }) => {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Route path="/" component={Header} />
</AppBar>
<SideBar />
<main className={classes.content}>
<Toolbar />
<br />
{children}
<Toolbar/>
</main>
<AppBar className={classes.appBar}>
<Route path="/" component={Footer} />
</AppBar>
</div>
);
};
export default StandardLayout;
Its rule for me
<footer style={{position:"fixed",bottom:"0"}}>
Try this html code:
/public/index.html
<html lang="en" class="h-100">
<body class="h-100">
<div id="root" class="d-flex flex-column h-100"></div>
...
/src/App.js
<main role='main' className='flex-shrink-0'>
You can follow this template:
react-bootstrap-sticky-footer/public/index.html
react-bootstrap-sticky-footer/src/App.js