HELLO I have the following structure in my flexbox
header
main
footer
and in my main I have a container to centralize the content But when I use smaller resolutions it is problematic as in the photo:
code:
export default function App() {
return (
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<div style={{ flex: "none", background: "blue", height: "140px" }}>a</div>
<div
style={{
padding: "0 30px",
margin: "0 auto",
background: "red",
maxWidth: "1240px",
width: "100%"
}}
>
<h2>
Nam dui ligula, fringilla a, euismod sodales, sollicitudin vel, wisi..
</h2>
</div>
<div style={{ flex: "none", background: "yellow", height: "40px" }}>
c
</div>
</div>
);
}
css reset:
body > #root > div {
height: 100vh;
background: black;
}
body {
margin: 0;
padding: 0;
}
example:
https://codesandbox.io/s/throbbing-feather-cmxiq
The width property does not include padding, so when your middle element includes a 30px padding on left and right sides AND is also set to 100% width, it causes an x-overflow. If you want the middle element's entire bounding box to be 100% width, you can do the following styles:
<div
style={{
padding: "0 30px",
margin: "0 auto",
background: "red",
maxWidth: "1240px",
width: "calc(100% - 60px)"
}}
>
Related
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'm React Beginner, i have two questions, first question: here i'm using 'allotment' to split two images (resize), you can change the size of images by pulling from middle of those two images
my problem here is, when i'm pulling to left or right to see whole picture, it does not show whole picture it goes over the bottom of page, any idea why?
Second question: below the images I have div which shows with height: 93%`
my question is why height:93 shows the div and height: 100% won't ? shouldn't height:100% take the rest of space left?
try it here: https://codesandbox.io/s/ecstatic-star-1wxx12?file=/src/App.js
import React from "react";
import { Allotment } from "allotment";
import "./styles.css";
import "allotment/dist/style.css";
export default function App() {
return (
<div className="App">
<div style={{ background: "blue", minHeight: "42px" }}>Monitor</div>
<div style={{ display: "flex", height: "100%", background: "darkblue" }}>
<div
style={{
border: "1px solid orange",
width: "100px",
height: "100%",
background: "gray"
}}
>
side content
</div>
<div style={{ width: "100%", height: "100%" }}>
<div
style={{
width: "100%",
height: "100%",
background: "red",
border: "3px solid yellow"
}}
>
<Allotment>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "93%",
flexDirection: "column"
}}
>
<div style={{ flex: "1" }}>
<img
style={{ width: "100%", height: "auto" }}
src={require("./the-mandalorian.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
<Allotment.Pane>
<div style={{ height: "40px", background: "brown" }}></div>
<div
style={{
display: "flex",
height: "93%",
flexDirection: "column"
}}
>
<div style={{ flex: "1" }}>
<img
style={{ width: "100%", height: "auto" }}
src={require("./nature.jpg")}
alt="cat"
/>
</div>
<div style={{ height: "20px", background: "brown" }}></div>
</div>
</Allotment.Pane>
</Allotment>
</div>{" "}
</div>
</div>
</div>
);
}
English is not my mother language so there could be mistakes.
object-fit can help you with that
(Please remove all the styles you have given your images and apply these)
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Video showing the solution a-work
"my question is why height:93% shows the div and height: 100% won't?
shouldn't height:100% take the rest of space left?"
If only width or height are defined without the other, the image's aspect ratio will be preserved and in your case, will result in an unwanted rendering outcome.
since your design have horizontal 2 panes, this leaves very little space for the image to span across the horizontal area, meaning the aspect-ratio of the viewable area is much higher than wide.
You almost always want to maintain the original aspect-ratio, especially for pictures.
Relevant links:
https://stackoverflow.com/a/52682038/104380
https://css-tricks.com/almanac/properties/o/object-fit/
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
I have to build a CSS grid system. Here is some of my initial code:
#carousel-data{
display: grid;
grid-template-columns: 3% 40% 54% 3%;
grid-template-rows: 10% 10% 60% 20%;
align-content: center;
height: 72vh;
margin-top: 8.5vh;
}
.carousel-text-title{
grid-column-start:3;
grid-row:2/3;
justify-self:start;
font-size:2.5em;
margin-left:30px;
font-weight:bold;
color:white;
}
.carousel-text-content{
grid-column-start: 3;
grid-row: 3/4;
justify-self: start;
margin-top:50px;
margin-left:30px;
font-size:2rem;
color: white;
}
The first part is the container and the other two are some element that are placed in the said container.
This works just fine. But then I found out I had to make the container responsive, that is to modify it's height based on the content displayed. So i went ahead and changed the height property to min-height thinking this would do the trick. But when I ran the code, everything was messed up. Some rows were missing and elements that had their size specified with % or had set only a max height/width weren't showing.
I can't figure out what am I doing wrong. Can you help me out please? Thanks in advance!
Edit:
Here is the HTML fragment(can't put it up on codepen because it's a React App,it would be irrelevant, I can link the github repository if that would be helpful) :
<div className="carrousel">
<div className="grid-container">
<PageIndicator size={this.props.data.length} activeIndice={this.state.currentIndice}
style={{gridColumnStart:'second',justifySelf:'center',marginTop:'30px'}}
/>
</div>
<div id="carousel-data" style={this.state.slideBackgroundStyle} className={this.state.style}>
<Arrow style={{ gridColumnStart: '1', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='left' onClick={this.changeSlide} />
<div className="carousel-image" style={{gridColumnStart:'2/3',gridRow:'2/4' ,justifySelf:'center'}}>
<img src={this.props.data[this.state.currentIndice].picture}
style={this.props.data[this.state.currentIndice].style ?
{ ...this.props.data[this.state.currentIndice].style, display: "inline-block", maxWidth: '95%', maxHeight: '100%' } : { display: "inline-block", maxWidth: '95%', maxHeight: '100%' }} />
</div>
<div className="carousel-text-title">
{this.props.data[this.state.currentIndice].title}
</div>
<div className="carousel-text-content" >
{this.props.data[this.state.currentIndice].text}
</div>
<Arrow style={{ gridColumnStart: '4', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='right' onClick={this.changeSlide} />
</div>
</div>
I am rendering a simple view. It consists of an image on the right and some text on the left. This is how it looks like:
return (
<View style={styles.companyContainerStyle}>
<View>
<Text>{this.props.companyNameAr}</Text>
<Text>{this.props.descriptionAr}</Text>
</View>
<View style={styles.imageContainerStyle}>
<Image
style={styles.imageStyle}
source={{ uri: this.props.logo }}
resizeMode='contain'
resizeMethod='auto'
/>
</View>
</View>
);
The following is the styles I applied to make the text and image aligned next to each other:
const styles = {
companyContainerStyle: {
flex: 1,
flexDirection: 'row',
padding: 10
},
imageContainerStyle: {
borderRadius: 5,
borderWidth: 2,
borderColor: '#2279b4',
padding: 1,
},
imageStyle: {
flex: 1,
height: 100,
width: 100,
}
}
The very weird part is that it looks like this on the emulator:
I think the length of the text is pushing the image to the very right out of the screen. I thought that the number of lines would adjust accordingly to fit everything in the screen. However its not the case. How do I make everything look neat given that the length of the text is unknown (it is being rendered from a database)??
#container {
display: flex;
justify-content: space-around;
width: 70%;
height: 400px;;
border: 2px solid grey;
padding: 5px;
}
#top_content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#para {
width: 60%;
text-align: justify;
margin: 0px;
}
img {
height: 20%;
width: 20%;
}
<div id="container">
<div id="top_content">
<p id="para">adfasdfadf sadfdaafafdasdfadfadfadfdfad dasadfadfadfadfadgvfa sasadasdaf asdfdfdadfadf</p>
<img src="http://lorempixel.com/400/200" alt="myimg">
</div>
</div>
Something like this can make sure that your text will not push your img outside
Add flex: 1 to imageContainerStyle and also add flex: 1 to View that is container of the two Text components.
Reason for this is that if the Text component does not have container with flex: 1 on it the text will try to take all possible space. The container will restrict that