I want to form something like this using CSS and typescript/JavaScript:
Can someone please help me understand how to do this?
I tried using a flex container and this is what I have got this:
I am new to front end development. Can someone please tell me what I am missing here?
.green-area {
display: flex;
flex-grow: 1;
margin-right: #space-sm;
position: relative;
}
.black-area {
display: flex;
flex-grow: 1;
position: absolute;
background: #000000;
height: 20px;
width: 5%;
}
.height {
height: #space-sm;
}
<div styleName="green-area">
<div style={{ flexGrow: 10, }}>
<div styleName={`height`}>
<div styleName="black-area">
<div style={{ flexGrow: 10, }}>
<div styleName={`height`} />
</div>
</div>
</div>
</div>
</div>
Just like isherwood mentioned, this is an HTML/CSS issue.
You've added the class using styleName which is incorrect. It should be className
You've missed the positioning for the black-area
I created this CodeSandbox with the answer. You can change the inline style to control the positioning of the black-area
Related
I need to make a table which will contain up to 4 divs.
But the divs in that table always should use maximum of avaliable space.
And one one row should contain not more then 2 divs
For instance if table contains 2 divs it should look like this
If table has 3 divs then like this:
And if contains 4 then it should look like that
To achieve it i wrote this code:
<div
style={{
height: '58vh', border: '1px solid #d9d9d9',
borderRadius: '0px 0px 2px 2px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
<div style={{background:'red', flex: 'auto', margin: '5px'}}
<div style={{background:'green', flex: 'auto', margin: '5px'}}
<div style={{background:'blue', flex: 'auto', margin: '5px'}}
<div style={{background:'pink', flex: 'auto', margin: '5px'}}
</div>
But i missing something here.
For 1 div and for 2 divs it works as planned.
But for more..
This is my result for 3 divs
And for 4 divs
Can anyone advice me please what should i change in this code?
PS. Please don't judge my unevenly drawn squeres :)
.container {
display: flex;
flex-wrap: wrap;
}
.inner {
flex-basis: 50%;
flex-grow: 1;
}
.inner:nth-of-type(1) {
background: red;
}
.inner:nth-of-type(2) {
background: gold;
}
.inner:nth-of-type(3) {
background: green;
}
.inner:nth-of-type(4) {
background: blue;
}
<div class="container">
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
</div>
I used the following steps to achieve your result.
Make the container which contains the inner boxes as flex.
Give the container flex-wrap: wrap so that the inner boxes which do not have place on the same line, shift to the next line.
Give flex-basis: 50% to the inner boxes so that they take up 50% of the available space.
Give the inner boxes flex-grow: 1 so that if the last box has any space left, it will take up all of it.
References:
Flexbox
flex-wrap
flex-basis
flex-grow
(Extra) flex-shrink
PS: Try commenting the fourth inner box so that the third box will take up the whole horizontal space.
What you mean about use Grid for this?
example:
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
here it's guide for Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
I'm using material ui
I have a floating action button and I want to show it a specific place that would not change with scroll,
and also I want to know if it is a fine problem
here is the code
const floatingMenuButtonStyle = {
backgroundColor: '#DEEAF6',
color: '#8A3473',
alignSelf: 'flex-end',
position: 'fixed',
bottom: '8%',
right: '9%'
here is floating action button
<Fab
style={floatingMenuButtonStyle}
aria-label="add"
children={<AddIcon fontSize='default' />}></Fab>
}
The html and css does it well like this.
All you need to do is to simply parent it in a <div> element with position:fixed and then next your icon as a child with position:absolute and it gets positioned at the bottom right as you wanted.
just like this sample green box
<div style="
position: fixed;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;">
<div style="
width:130px;
height:130px;
position: absolute;
background-color:green;">
</div>
</div>
I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.
my css code is as follows:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
opacity: 0.25;
}
.container-background-img {
width: 100%;
position: relative;
}
.container .content {
position: relative;
z-index: 1;
}
.app-outer {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0rem 1rem;
}
#media only screen and (max-width: 1170px) {
.container-background-img {
height: 656px;
object-fit: cover;
}
}
#media only screen and (max-width: 768px) {
.container-background-img {
height: 653px;
object-fit: cover;
}
}
/* CODE ADDED */
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#content {
position: absolute;
top: 20%;
}
my jsx code is as follows:
import React from "react";
import "./styles.css";
export default function App() {
return (
<>
<div className="container">
<div className="container-background">
<img
id="rob"
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div id="content" className="content">
I am the CTA
</div>
<div id="navbar">
<div
style={{
backgroundColor: "white",
height: 100,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
I am the navbar
</div>
</div>
</div>
<div>I am beneath the cta</div>
</>
);
}
the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868
Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable
As you mentioned, the issue is not really clear to see from your sandbox code.
I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.
Make sure to add other background css attributes too such as
background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;
Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);
Hopefully, this works for you!
I'm having difficulty aligning some images inside of bootstrap 4 columns. I have tried using the CSS property text-align: center, and this will center the image horizontal. My columns take up a large amount of the view port though, so I also need the images to be centered vertical.
Here is what my react component is returning. class="img13" is what i am attempting to center.
<div id="border">
<div class="container">
<div class="row tower">
<div class="col-sm-3 towers" id="tower1">
<div class="tower-icon"><img class="img13" src={character}></img></div>
</div>
</div>
</div>
</div>
Here is the CSS that I currently have. It hard codes an image to be centered in one column, but if i change the display size for the site, or use a different image, it is no longer centered.
.row{
display: flex;}
.towers {
color: white;
height: 100%;
position: relative;
}
.tower-icon{
margin-top: 52%;
margin-bottom: 48%;
}
.img13{
height: auto;
width: 100%;
}
Start Menu here is an attached picture of what the component looks like. The background is the column, and the 'start' picture is the class="img13"
You can take advantage of flexbox and auto center align everything within the .tower-icon div like so:
.tower-icon {
display: flex;
align-items: center;
justify-content: center;
}
Just please note that the logo will horizontally and vertically center within the constraints of the column with the .col-sm-3 class.
Test link:
https://jsbin.com/sekosibizo/edit?css,output
Set the div containing the image to be the height of the viewport, then set its display property to flex. Then give the image a margin: auto.
.tower-icon {
height: 100vh;
display: flex;
}
.img13 {
margin: auto;
height: auto;
width: 100%;
}
I have a container div with fixed height. Inside two divs, the top height: 50px and the other one must fill the empty space but allowing internal scroll.
Now I have two options:
#up{
height: 50px;
}
#down{
position: absolute;
top: 50px;
bottom: 0;
}
or:
#up{
height: 50px;
}
#down{
height: calc(100% - 50px);
}
If I have many of these cases inside my window, which one is the best to use performance wise?
This Fiddle
ps. I don't care about old browser support.
I would always work with calc option. Both could look the same but they are not.
When you use position:absolute You are taking the container #down out of the html flow.
This means that if anytime you are going to add more stuff to your project, You will have many problems positioning them.
As an example, if you want to add another container below #down (a footer maybe), in your first option it will be placed overlapping #down container right below your header. In the second option it will be placed where you want it.
One way to fill the space would be to use flexbox.
.container {
display: flex;
flex-direction: column;
height: 200px;
}
#up {
background: yellow;
flex: 0 0 50px;
}
#down {
background: orange;
flex: 1 1 auto;
}
<div class="container">
<div id="up">
up
</div>
<div id="down">
down
</div>
</div>