I have same HTML/CSS code working different in Chrome or Safari versus Firefox.
But Firefox also works sometimes.
For instance, if you resize the codepen window, inspect or make a change to the label of the input in Firefox, it behaves correct and then incorrect again.
Codepen Example
body {
overflow: hidden;
padding: 20px;
}
div, input {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
width: 100%;
padding: 40px 0px;
z-index: 10;
flex: 1 1 0%;
font-size: 16px;
}
.my-field {
display: flex;
flex-flow: column nowrap;
width: 100%;
font-size: 18px;
align-items: flex-start;
margin: 15px 0px;
}
.label-wrap {
display: flex;
align-items: center;
position: relative;
font-size: 0.85em;
margin-bottom: 5px;
width: 100%;
}
.label {
flex: 1;
}
.input-wrap {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
z-index: 10;
padding: 6px;
position: absolute;
left: 0px;
margin-left: 2px;
}
.my-input {
display: flex;
position: relative;
width: 100%;
border-radius: 5px;
}
input {
width: 100%;
height: 48px;
line-height: 38px;
padding-left: 40px;
padding-right: 44px;
font-size: 1em;
text-align: inherit;
font-family: inherit;
border: 1px solid rgb(204, 204, 204);
resize: none;
}
<form>
<div class="my-field">
<div class="label-wrap">
<div class="label">
<span>Change this labe</span>
</div>
</div>
<div class="input-wrap">
<div class="icon-wrap">
<svg viewBox="0 0 24 24" width="100%" height="100%">
<g>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
</g>
</svg>
</div>
<div class="my-input">
<input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text">
</div>
</div>
</div>
</form>
Inside Stack Overflow Chrome vs Firefox comparison
In Chrome:
In Firefox:
In Safari:
Any tip on how manage this in a safe way is welcome, thanks.
To make it work on every browser, you can remove
display: flex;
align-items: center;
justify-content: center;
on the icon-wrap div and add
top: 50%;
transform: translateY(-50%);
So you will vertically align the icon only with the absolute position.
This solution should work on Chrome, Safari & Firefox :)
body {
overflow: hidden;
padding: 20px;
}
div, input {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
width: 100%;
padding: 40px 0px;
z-index: 10;
flex: 1 1 0%;
font-size: 16px;
}
.my-field {
display: flex;
flex-flow: column nowrap;
width: 100%;
font-size: 18px;
align-items: flex-start;
margin: 15px 0px;
}
.label-wrap {
display: flex;
align-items: center;
position: relative;
font-size: 0.85em;
margin-bottom: 5px;
width: 100%;
}
.label {
flex: 1;
}
.input-wrap {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.icon-wrap {
/* Remove this */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
width: 40px;
height: 40px;
z-index: 10;
padding: 6px;
position: absolute;
left: 0px;
margin-left: 2px;
/* Add this */
top: 50%;
transform: translateY(-50%);
}
.my-input {
display: flex;
position: relative;
width: 100%;
border-radius: 5px;
}
input {
width: 100%;
height: 48px;
line-height: 38px;
padding-left: 40px;
padding-right: 44px;
font-size: 1em;
text-align: inherit;
font-family: inherit;
border: 1px solid rgb(204, 204, 204);
resize: none;
}
<form>
<div class="my-field">
<div class="label-wrap">
<div class="label">
<span>Change this labe</span>
</div>
</div>
<div class="input-wrap">
<div class="icon-wrap">
<svg viewBox="0 0 24 24" width="100%" height="100%">
<g>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
</g>
</svg>
</div>
<div class="my-input">
<input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text">
</div>
</div>
</div>
</form>
Related
I am using React and I am trying to have an overlay over each grid item in a grid. But, what all I try, the overlay seems to come below each grid item and not over the grid item. Even if I use the position: absolute it is not working !
Here's the code I am using for the grid (React):
<div className="home__itemSection">
<div className="item">
<div className="item__container">
<div className="container__imageDiv">
<img
src={""}
alt=""
/>
</div>
<div className="container__detailSection">
<p>{""}</p>
<h6>{""}</h6>
</div>
</div>
<div className="item__overlay">
<h1>{""}</h1>
<h1>{""}</h1>
</div>
</div>
</div>
css:
.home__itemSection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin: 30px 170px 0 170px;
transition: ease all 0.5s;
}
.item {
background-color: #f1f1f1;
height: 350px;
width: 212px;
margin: 0 3rem 1rem 3rem;
height: fit-content;
font-family: "Poppins", sans-serif;
display: flex;
align-items: flex-start;
}
.container__imageDiv {
height: 318px;
width: 212px;
}
.container__imageDiv > img {
height: 318px;
width: 212px;
}
.container__detailSection {
height: 44px;
width: 212px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px;
}
.container__detailSection > p {
color: black;
font-size: 13px;
font-weight: 300;
line-height: initial;
}
.container__detailSection > h6 {
padding-left: 1.8rem;
font-weight: 500;
font-size: 1rem;
}
.item__overlay {
height: 252px;
width: 212px;
background-color: black;
}
Any help is greatly appreciated !
Thank You !
Please add position: relative; on item(parent tag of overlay)
.item{
position: relative;
}
.item .item__overlay{
position: absolute;
left: 0;
top: 0;
}
An element with position absolute is relative to the next parent element with relative (or absolute) positioning.
Add position relative to home__itemSection. Also use height and with to cover all the container:
.home__itemSection {
...
position: relative;
}
.item__overlay {
...
position: absolute;
height: 100%;
width: 100%;
}
how can I do so that the button is not hidden when resizing the modal?
I'm having trouble solving this problem can someone help me?
I believe it must be simple to solve, I just couldn't find the solution yet
below is the JSX code (React) and CSS code
if you look at the image you will be better able to understand the problem
JSX (React) code below:
<Modal open={this.props.open} visible={this.props.visible}>
<div class={style.Container}>
<div class={style.Header}>
<div class={style.Title}>{data.subject}</div>
<div
class={style.Buttons2}
onClick={(event) => this.props.visible(false)}
>
<MdBackspace size="24px" color="#FFF" />
</div>
</div>
<form onSubmit={this.handleSubmit} class={style.Wrapper}>
<div class={style.Message}>
{ReactHtmlParser(this.state.message)}
</div>
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
</div>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</form>
</div>
</Modal>
CSS code below:
.Container {
width: 720px;
display: flex;
flex: 1 1 100%;
flex-direction: column;
background: #f9f9f9;
border-radius: 5px;
border: 2px solid #405c77;
resize: both;
overflow: auto;
}
.Header {
width: 100%;
display: flex;
justify-content: space-between;
background: #405c77;
padding: 20px;
flex-wrap: wrap;
}
.Title {
color: #fff;
font-weight: 700;
font-size: 16px;
}
.Wrapper {
/* flex: 1 1 100%; */
height: 100%;
display: grid;
/* grid-template-rows: 60% 30% 40px; */
grid-template-rows: minmax(5px, 1fr);
}
.Message {
/* height: 100%; */
margin: 10px;
padding: 10px;
display: grid;
border-radius: 5px;
overflow-y: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.111);
}
.Editor {
height: calc(30% - 40px);
/* height: 100%; */
margin: 10px;
}
textarea {
width: 100%;
height: 160px;
resize: none;
padding: 5px;
}
.Buttons2 {
cursor: pointer;
background-color: transparent;
outline: none;
border: none;
}
.SendButton {
display: flex;
justify-content: flex-end;
align-items: center;
height: 30px;
cursor: pointer;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
background: rgba(64, 92, 119, 0.8);
transition: all 0.1s ease-in-out;
color: #fff;
}
.SendButton:hover {
transition: all 0.1s ease-in-out;
background: rgba(64, 92, 119, 0.999);
}
.ButtonDisabled {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
height: 30px;
background: red;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
color: #fff;
}
.Controls {
/* height: 40px; */
/* height: 100%; */
display: flex;
flex: 1 1 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
.Controls input {
margin-top: 12px;
cursor: pointer;
padding: 12px;
border: none;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px;
outline: none;
}
Maybe try putting your button inside the Editor div?
<div class={style.Editor}>
<ReactQuill
value={this.state.content}
onChange={this.handleType}
/>
<div class={style.Controls}>
<input type="file" multiple onChange={this.fileSelected} />
{this.state.buttonState ? (
<button class={style.SendButton} type="submit">
Enviar
</button>
) : (
<button class={style.ButtonDisabled} disabled>
Enviar
</button>
)}
</div>
</div>
Its difficult without being able to inspect it properly
try this:
{
position:fixed;
top:0;
z-index:5;
}
i have a top_div which when set to relative position box shadow retains. and when i remove relative position box shadow disappears. could someone help me understanding this or where am i going wrong.
Below is the code,
<div class="top_div">
<div class="drawer">
<div class="menu">
<header>
<Svg>
<button></button>
</header>
<ul>
<li></li>
</ul></div></div></div>
.top_div {
z-index: 1;
display: flex;
position: relative;
width: 100%;
height: 48px;
padding: 0 12px 0 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
align-items: center;
}
.drawer {
display: flex;
flex-direction: column;
background-color: $white;
position: absolute;
width: 380px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 80%;
header {
height: 41px;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0px;
padding-top: 2px;
svg {
margin-left: 16px;
}
}
ul {
overflow-x: hidden;
}}}
.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>
EDIT: added in code snippit, Hope it helps
I trying to create a horizontal scroll div but when i add the content images all it does is squeeze all the images inside of it like so,
So its resizing the images to fit in but i would like them to be normal size and be able to scroll.
Now i tried to add overflow scroll but its not having that effect
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
Now i thought i knew enough on this to be able to do but obviously not! So any ideas will be appreciated.
Thanks
You can remove the flexbox rules. Then provide the image with some properties. Using white-space and overflow should work for you.
example:
.main-content {
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar {
width: 18%;
margin-right: 3%;
img {
width: 100%;
border: solid white 2px;
}
}
.profile-username {
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec {
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec {
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.prgile-third-sec img {
display: block;
width: 100%;
height: auto;
}
.profile-image-container {
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300"></div>
</div>
Flex have default wrap property, you can try on your code based on following stylesheet.
.className {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.class {
display: flex;
flex-wrap: nowrap;
}
This question already has answers here:
A grid layout with responsive squares
(5 answers)
Closed 5 years ago.
In process of learning flexbox, and confused about having perfect CSS circles that are responsive. How do I do that? As it stands, my current code has circle1, circle2, and circle3 at 100 width, and height. I don't want to hard-code their height but rather make it responsive. Is there a way to have a perfect circle in %? So it scales each time the browser is resized?
Or are media queries the only option to fix this?
Thank you for your help.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
font-weight: 100;
}
body {
display: flex;
margin: 0;
flex-direction: column;
}
main {
display: flex;
flex: 1 0 100%;
/*for content and sidebar */
flex-direction: row;
}
/* main */
#content {
flex: 1 0 80%;
/* for header/logo and description */
display: flex;
flex-direction: column;
}
#description img {
display: block;
}
#header {
flex: 1 0 5%;
padding: 10px;
/* for test */
display: flex;
justify-content: center;
}
#test {
display: flex;
flex-direction: row;
}
#header h1 {
text-align: center;
font-size: 5em;
padding: 0;
margin: 0;
font-family: 'Satisfy', cursive;
}
h1 {
font-family: 'Satisfy', cursive;
}
#description {
flex: 1 0 10%;
padding: 30px;
display: flex;
}
#description p {
padding-left: 20px;
font-size: 20px;
}
#description img {
width: 250px;
height: 250px;
border-radius: 50%;
border: 6px solid #db6525;
border: 6px solid #00B2AC;
}
#name {
font-size: 35px;
color: #db6525;
font-family: 'Satisfy', cursive;
}
#test img {
display: inline;
vertical-align: text-top;
width: 100px;
height: 100px;
/* for the following image and description */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
#sidebar {
flex: 1 0 20%;
/* background-color: green; */
text-align: center;
line-height: 90%;
/* for sidebar contents */
display: flex;
flex-direction: column;
}
#js {
flex: 1 0 33.33333%;
/* background-color: red; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#js h1 {
font-size: 50px;
}
#forms {
flex: 1 0 33.33333%;
/* background-color: gray; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#forms h1 {
font-size: 50px;
}
#sites {
flex: 1 0 33.33333%;
/* background-color: Chartreuse; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#sites h1 {
font-size: 50px;
}
.circles {
flex: 0 0 5%;
/* for circles within */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.circle1 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle1 h1{
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle2 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle2 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle3 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle3 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
<main>
<section id="content">
<article id="header">
<section id="test">
<h1>My Website</h1>
</section>
</article>
<article id="description">
<img src='images/profilePic.png' />
<p></p>
</article>
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Contact</h1>
</div>
</article>
</section>
<section id="sidebar">
<article id="js">
<h1>Javascript</h1>
<p>Mini JS Projects</p>
<p class="subtitle">Work in progress
</article>
<article id="forms">
<h1>Free Forms</h1>
<p>Feel free to download the forms</p>
</article>
<article id="sites">
<h1>Portfolio</h1>
<p>Combination of previous work and additional sites</p>
</article>
</section>
</main>
The question now is How to have a perfect responsive css square? Because when you have a square, you will easily have a circle with border-radius: 50%. Now you can found so many solution for it in SO. Here is a nice solution with flexbox item.
.flex-container {
padding: 0;
margin: 0;
display: flex;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
flex: 1 0 auto;
border-radius: 50%;
}
.flex-item:before {
content:'';
float:left;
padding-top:100%;
}
<div class="flex-container">
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
</div>
Updated answer
I reworked the flex containers to a minimal working example. The flex-items should all be set to
flex: 1 1 auto /* flex-grow flex-shrink flex-basis */
This allows the circle h1 flex-items to grow and shrink as necessary. It might be necessary to use js to obtain the height of a circle from its expanded width when you apply the example to your code.
Hope this helps.
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.circles {
/* for circles within */
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.circle1,
.circle2,
.circle3 {
display: flex;
flex: 1 1 auto;
width: 33vw;
height: 33vw;
}
.circle1 h1,
.circle2 h1,
.circle3 h1 {
flex: 1 1 auto;
width: 100%;
height: 100%;
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius: 50%;
text-align: center;
vertical-align: middle;
}
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Content</h1>
</div>
</article>