Hello I am making a cards type of component in React, I have a problem with styling this particular part as the flexbox items is overlapping the wrapper.
The JSX
const OtherProjects = () => {
return (
<div className='opWrapper'>
<div className="containerWrapper">
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
</div>
</div>
)
The CSS
.opWrapper{
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #232A4E;
}
.containerWrapper{
display: flex;
gap: 1em;
height: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 5em;
}
.item{
width: 20em;
height: 20em;
border-radius: 10px;
border: 2px black solid;
background-color: #CCF6F6;
}
It shows it like this when viewed on this dimension and other dimensions, I am not sure why the items are overlapping and now its showing the white thing
Usual browser view:
Just remove height: 100vh; from your .opWrapper selector:
.opWrapper{
width: 100%;
margin: 0 auto;
background-color: #232A4E;
}
The reason is that your are setting height to be the height of the view port.
You can find a working example here: https://codesandbox.io/s/thirsty-wind-1ci7ei?file=/src/styles.css
Related
I have a component with a router-view inside it that can display a flexbox. I've tried several different solutions to flex-boxes not scrolling properly and they all either result in no scrolling, or scrolling, but it doesn't quite reach the bottom (the last element in the v-for ends up getting cut off.)
Here is the template and relevant styles for the router view
<template>
<div class="modal" ref="modal">
<div class="modalcontent" ref="content">
<p class="goback" #click="closeAnimation" ref="goback">←</p>
<div class="title">
<h1>Questions & Answers</h1>
</div>
<div class="routerview">
<router-view :posts="posts" v-slot="{ Component }">
<transition name="slide-in" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</div>
</template>
<style>
.routerview {
position: relative;
width: 80%;
margin: auto;
overflow-y: scroll;
left: 0;
right: 0;
outline: 10px red;
}
</style>
and for the flexbox:
<template>
<div class="container">
<div class="flex-container" ref="flexcontainer">
<div class="question" v-for="post in posts" :key="post._id" #click="this.$router.push(`/forum/question/${post._id}`)">
<h1 class="qTitle">{{ post.title }}</h1>
<p class="qReplyAmt">{{ post.replies.length }} repl<span v-if="!plural(post.replies.length)">y</span><span v-else>ies</span></p>
</div>
</div>
<p>You've reached the end</p>
</div>
</template>
<style scoped>
.question {
width: 98%;
height: fit-content;
min-height: 0;
background-color: whitesmoke;
border-radius: 10px;
padding: 10px 10px 2px 15px;
cursor: pointer;
transition: all 200ms ease-out;
}
.question:hover {
background-color: rgb(255, 107, 107);
color: white;
}
.qTitle {
display: block;
}
.qReplyAmt {
position: relative;
top: -5px;
}
.flex-container {
display: flex;
align-items: center;
flex-direction: column-reverse;
width: 100%;
gap: 15px;
flex: 1;
}
</style>
I've tried:
setting a height on .container, .routerview, .flex-container
setting overflow-y to auto & scroll on .container, .routerview, .flex-container
and a bunch of other answers i've found on how to fix flexboxes not scrolling
I fixed the issue. Here is the updated styles:
.flex-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column-reverse;
width: 100%;
gap: 15px;
flex: 1;
margin-top: auto;
margin-bottom: 125px;
}
.container {
overflow-y: scroll;
height: 100vh;
}
I added the .container styles to make it actually scroll and added margin-bottom: 125px; to fix the issue with the last item being cut off.
i have doing my portfolio but i'm not good with CSS.
I'm using the Flexbox to do the design desktop and mobile but it not working...
It is like this, as i want, using flex-direction: column,:
Code of the div parent:
display: flex;
justify-content:center;
align-items:center;
background-color:#C4C4C4;
min-height: 100vh;
flex-direction: column;
But when i put in responsive, it stay like this:
The elements outside of div parent..
The code is the same, only changes the background-color.
background-color: red;
width:800px;
height:650px;
margin: 30px;
It not stay corrects.
If i dont use the flex-direction: column, it stay like this:
Someone why?
Your main issue was missing max-width: 100%; in the children so the width:800px would not overflow the container parent, take a look at the snippet
section {
display: flex;
justify-content: center;
align-items: center;
background-color: #C4C4C4;
min-height: 100vh;
padding: 15px 30px;
box-sizing: border-box;
}
#media(max-width:800px) {
section {
flex-direction: column;
}
}
div {
max-width: 100%;
width: 800px;
height: 650px;
margin: 15px
}
div:first-of-type {
background-color: red;
}
div:last-of-type {
background-color: blue
}
<section>
<div>red</div>
<div>blue</div>
</section>
max-width not set the width of the children elements.
Make sure you set a width to all of your containers; it looks like you want the gray container to fill the viewport, and the blocks to be evenly distributed.
Here's a working example:
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
background-color: gray;
width: 100vw;
height: 100vh;
}
.block {
background-color: #C4C4C4;
min-height: 33vh;
width: 90vw;
}
<div class="container">
<div class="block" style="background-color: red">
A
</div>
<div class="block" style="background-color: blue">
B
</div>
</div>
I cannot get my list to be full height. My code is more complicated with nested components. But I can still get this to replicate using this code. Here is a plunk. http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
html, body {
min-height: 100%;
height: auto;
margin: 0;
}
app.component.css
.container {
height: 100%;
background: black;
color: white;
list.component.css
.row {
display: flex;
flex-direction: row;
}
.list {
width: 33%;
height: 100%;
flex-direction: column;
display: flex;
border-right: groove white 1px;
border-top: groove white 1px;
}
.item {
width: auto;
height: 100%;
flex-direction: column;
display: flex;
}
list.component.html
<div class="contents">
<button (click)="updateDocuments()">Update Document</button>
<div class="row">
<div class="list">
<div *ngFor="let document of documents; let i = index;">
{{i + 1}}. {{document}}
</div>
</div>
<div class="item">
this is an item
</div>
</div>
</div>
I got this to work by switching to height 100vh and also adding a overflow-y: scroll css attribute to the list and item classes.
http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
html, body {
min-height: 100vh;
height: auto;
margin: 0;
}
app.component.css
.container {
height: 100vh;
background: black;
color: white;
list.component.css
.row {
display: flex;
flex-direction: row;
}
.list {
width: 33%;
height: 100vh;
flex-direction: column;
display: flex;
border-right: groove white 1px;
border-top: groove white 1px;
overflow-y: scroll;
}
.item {
width: auto;
height: 100vh;
flex-direction: column;
display: flex;
overflow-y: scroll;
}
list.component.html
<div class="contents">
<button (click)="updateDocuments()">Update Document</button>
<div class="row">
<div class="list">
<div *ngFor="let document of documents; let i = index;">
{{i + 1}}. {{document}}
</div>
</div>
<div class="item">
this is an item
</div>
</div>
</div>
try to write this css
.container{
min-height:100vh;
}
Had the same issue, and found that the best solution was:
html, body {
min-height:100vh;
height: auto;
}
and for the container:
.container{
min-height: 100vh;
}
Use position: fixed if that's acceptable:
.container {
position:fixed;
background: black;
color: white;
height: 100%;
}
Hi everyone who faced this problem
Just go to global css file, it has the comment
/* You can add global styles to this file, and also import other style files */
written in it. Add
*{margin:0; padding:0}
that's it
Somewhere in the Internet:
The reason for this issue is concealed in the way a browser interprets
the host element, which doesn’t know it’s an HTML element at all and
so the browser sets the default display value (inline) for the host
element.
So probably it's enough just to redefine again "display" property for "host" tag (add in your component code) :
host: {
display: flex; /*or whatever is fit your needs*/
}
try in your style.css
html, body {
height: 100%;
margin: 0;
}
I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.
<div id="flex-container">
<div id="container1"></div>
<img src="#" alt="">
<div id="container2"></div>
</div>
#container1 and #container2 have their own height, and the img should use the remaining height inside #flex-container.
This snippet works on Firefox, but doesn't work in Chrome. (jsfiddle)
#flex-container{
height: 300px;
width: 500px;
display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 5px solid black;
}
#container1, #container2{
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
Chrome needs -webkit- prefixes for flexbox, but the issue doesn't seem to be this.
What can be happening? Is a browser bug or I'm forgetting something?
There are two problems you need to overcome:
Firefox solves them both on its own, but Chrome needs assistance.
Problem #1
The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.
Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
A complete explanation of this issue can be found here:
Why doesn't flex item shrink past content size?
Problem #2
Then you hit the second problem: keeping the aspect ratio. This is a common problem in flex containers. One option is to define a height for the image:
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
I am trying to make my site IE9 compatible but I am using flex boxes in lots of places so I need an alternate method for evenly spacing child elements.
My design is responsive so I need the same effect as flexbox where I can evenly space elements but I am not sure how to do it.
Here is a snippet to show how I am using flexbox in my layout.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.ele1, .ele2, .ele3{
flex: 0 0 auto;
}
.ele1{
height: 200px;
background-color: red;
}
.ele2{
height: 50px;
background-color: blue;
}
.ele3{
height: 100px;
background-color: green;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
How do I do this without flexbox?
You could use Masonry which is a pure JavaScript (it also supports jQuery), as there are no CSS equivalent, if you do/can not use flexbox.
Use margin-top and margin-bottom in percentages. The distribution is roughly dependant upon how tall each box is. I estimated that there's a total of 10% vertical space inside the container that comprises of padding and borders. That leaves 90% to distribute between the inside walls of the container and between themselves.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
/*display: flex;
flex-direction: column;
justify-content: space-around;*/
}
.ele1, .ele2, .ele3{
/*flex: 0 0 auto;*/
}
.ele1{
height: 200px;
background-color: red;
margin: 10% 0 15%;
}
.ele2{
height: 50px;
background-color: blue;
margin: 25% 0 15%;
}
.ele3{
height: 100px;
background-color: green;
margin: 25% 0 0;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
I discovered a flex box polyfil https://github.com/10up/flexibility