I am trying to divide a practice website into three sections of a column using flexbox. However, the middle section overflows out of the flexbox row, and the footer section is now hidden behind it.
https://jsbin.com/rerulepawu/edit?html,output
What causes this? I experimented with flex-grow and flex-shrink but it did not help.
Any advice would be appreciated. Thanks.
text in flexboxes usually overlap within the flex container to fix this you can set
.row {
flex: 1;
display: flex;
overflow:auto;
min-height: min-content;
}
and as a hack I set a non flex span inside a flex div, and set it's display to block
btw everything goes to crap when you delete it because Justify content dictates position within a flew box, if your whole site is one big flex box.
this is the full CSS that works for me displaying footer
body {
background-color: rgb(64, 160, 223);
font-family: 'Futura', sans-serif;
color: white;
}
.column {
display: flex;
height: 93%;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
overflow:auto;
}
.block {
margin: auto;
}
.section_block {
margin: 20px;
height: 100px;
}
.section_left {
background-color: yellow;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_right {
background-color: red;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_title {
font-weight: bold;
}
.section_description {
text-align: center;
vertical-align: middle;
}
.section_photo {
margin: 0
}
.content {
border-radius: 15px;
background-color: white;
width: 80%;
color: black;
display: flex;
flex-direction: column;
}
/* why does everything go to shit when i delete this */
#contact {overflow:auto;
flex: 0;
justify-content: flex-end;}
Related
The span text inside the button is overflow from trapezoid button. I can't move to inside. There is a span tag in button tag. There are text and slider in span but slider is hidden.
I tryed like this code in my css code for soutions but did not working. Maybe I tryed wrong:
`
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
`
What can i do this overflow:
Overflow image
this my css code:
.product-view {
$self: &;
display: flex;
flex-direction: column;
&__container {
display: flex;
flex-direction: column;
#include make-container();
}
&__seperator{
border-radius:1em ;
padding:0.2em;
width: 100%;
background-color: getColor(primary);
}
&__tabs-container {
margin-top:2.5em ;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
&:deep() {
.v-slide-group__content {
height: 5em;
justify-content: center;
}
.v-slide-group__container{
height: 5em;
}
.v-slide-group{
height: 3.05em;
}
.v-btn--size-default{
width: 9em;
color:getScaledColor(secondary,95);
border-bottom:3.5em solid;
border-left:1.35em solid transparent;
border-right: 1.35em solid transparent;
}
.v-slide-group-item--active{
color: getColor(primary);
height: 3em;
width: 9em;
border-bottom:3.5em solid;
border-left:1.40em solid transparent;
border-right: 1.40em solid transparent;
.v-btn__content{
width: 5px;
color:getColor(on-primary);
font-size: 0.8rem;
font-weight: bold;
justify-content: center;
display: flex;
transform: translate(2px,25px);
text-align: center;
.v-tab__slider{
visibility: hidden;
}
}
}
.v-btn__content{
width: 15rem;
display: flex;
color:getColor(secondary);
font-size: 0.9rem;
font-family: bold;
justify-content: center;
text-align: center;
font-weight: bold;
transform: translate(2px,25px);
.v-tab__slider{
visibility: hidden;
}
}
}
}
}
I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.
The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.
I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.
I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.
I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.
I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.
// navbar css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
margin-top: 75px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: rgb(16, 85, 211);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
}
// review-list css
button, .sort-by {
z-index: -1;
}
By just seeing your CSS, the easiest would be:
add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.
Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)
I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}
Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.
I have a Flexbox container with the following SCSS:
.picker {
height: 75px;
width: 100%;
display: flex;
flex-flow: column wrap;
}
My flex items have the following SCSS:
.pickeritem {
height: 25px;
width: 130px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
The problem I'm having is that the container is wrapping the items to the center of the div rather than next to the other items like so:
How do I make items 3 to 8 wrap next to each other leaving all of the white space to the right of the div?
Can this be achieved without using any sort of row and column methodology?
Try using the align-content property. I also made some other minor changes and added color and border for better visualization.
.picker {
height: 75px;
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
border: 1px solid black;
}
.pickeritem {
height: 25px;
width: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
background-color: #fbbdbd;
}
<div class='picker'>
<div class='pickeritem'>1</div>
<div class='pickeritem'>2</div>
<div class='pickeritem'>3</div>
<div class='pickeritem'>4</div>
<div class='pickeritem'>5</div>
<div class='pickeritem'>6</div>
<div class='pickeritem'>7</div>
<div class='pickeritem'>8</div>
<div class='pickeritem'>9</div>
<div>
You can use
.picker {
height: 75px;
width: 100%;
display: flex;
flex-direction: row;
justify-content:flex-start;
}
.pickeritem {
height: 25px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
I'm trying to create some sort of "slide menu" where all the items are shown, and the current item is standing out.
The issue I have right now is that when an item is selected, it does not scroll to the center of the container.
To solve that issue, I added a wrapper element between the items and the container and sets the width to be extremely large, then with JavaScript scroll to the current item.
Is there a way to achieve the same result without doing this workaround?
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
overflow: hidden;
width: 400px;
height: 60px;
background-color: darkcyan;
padding: 10px;
margin-bottom: 10px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.wrapper.hard {
width: 10000000px;
}
.item_wrapper {
flex-shrink: 0;
height: 100%;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.box, .box2 {
height: 80%;
width: 70px;
background-color: cyan;
transition: all 0.2s;
}
.box.current, .box2.current {
height: 100%;
width: 80px;
transition: all 0.2s;
}
https://jsfiddle.net/Dynacord/sz3daL46/