Disable resizing of fixed flex

Disable resizing of fixed flex - javascript

I'm using this html below to display a flex view on my website. But changing the text (length of the text) from a div will lead to the crazy-looking autoresizing.
How can I avoid this resizing in relation to this special div element below? How to keep the same layout when the click button is clicked?
Edit: I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

.wrapper{
width:100%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
}
.wrapper > div{
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="wrapper">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Here's the solution:
document.addEventListener("click", function(e){
if(e.target.id == "button")
document.getElementById('text').innerHTML+='.';
});
#navigation {
position: fixed;
width: 100%;
height: 30%;
left: 0%;
top: 0%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
flex-basis: 1 1 100%;
}
#navigation > div {
flex-direction: column;
overflow: hidden;
width: 100%;
}
#button {
position: relative;
}
<div id="navigation">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<button id="button">click</button>
Edit: To lock the tekst as well. I would do it with align it left and than adding a padding to it:
#navigation > div > div:nth-child(2) {
padding-left: 10%;
text-align: left;
}

Add flex: 1 0 33%; to the elements you don't want to resize. This is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Here's an example of using max-width with your code. The first block will never be wider than 150px and text which which will overflow will be hidden.
.wrapper{
width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}
.wrapper > div{
flex: 1;
text-overflow:ellipsis;
overflow:hidden;
}
<div class="wrapper">
<div style="max-width: 150px">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

Related

How to position element's in specific way?

I have some html div's and simple css style, something like this:
.wrap{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>
I would like to change position of this element on mobile device to something like this:
enter image description here
How can I do this? I was thinking first of all about flex-wrap and order?

You can do it like below:
.wrap {
display: flex;
flex-direction: row;
flex-wrap:wrap; /* enable the wrap*/
justify-content:center; /* center everything */
}
/* create a hidden element taking full width
used to seperate our elements
*/
.wrap:before {
content:"";
flex-basis:100%;
order:1
}
/* put all even elements after the seperation to have a new row*/
.child:nth-child(even) {
order:2;
}
.child {
width: 45px;
height: 45px;
margin:5px;
border-radius: 50%;
background-color: lightBlue;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>

remove display: flex from .wrap and give .child display: inline-flex
CSS will be like that_
.wrap{
text-align: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 20px;
}

Implementing CSS Border radius with CSS and JQUERY

I want to select the parts specified with jquery and apply "border radius".
But I couldn't achieve this with the Jquery selector.
Or how can I do that with CSS?
I don't want to solve this problem by adding "CLASS" to HTML Codes Manually. I want to detect those parts with a small code and take action automatically.
Desired result:
My Code: https://jsfiddle.net/gL3dwyu4/
body{
margin: 0;
padding: 15px 0px;
font-family: sans-serif;
font-size: 15px;
}
#chat-messages-list .message-row{
display: flex;
word-wrap: break-word;
margin-bottom: 2px;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
#chat-messages-list .message-row:hover .message-time{
opacity: 1;
}
#chat-messages-list .message-row .chat-avatar{
display: block;
border-radius: 50%;
width: 28px;
height: 28px;
flex-direction: column;
background-repeat: no-repeat;
background-position: center center;
background-color: #eff0f1;
background-size: cover;
}
#chat-messages-list .message-row .message-container{
position: relative;
padding: 6px 12px;
box-sizing: border-box;
word-break: break-word;
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}
#chat-messages-list .message-row .message-time{
display: flex;
align-items: center;
margin: 0 10px;
font-size: 12px;
color: var(--black-400);
text-align: left;
opacity: 0;
transition: opacity 275ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#chat-messages-list .message-row.arrow {
margin-top: 10px;
}
#chat-messages-list .message-row:not(.arrow) .message-sender,
#chat-messages-list .message-row.me .message-sender,
#chat-messages-list .message-row:not(.arrow) .chat-username,
#chat-messages-list .message-row.me .chat-username {
display: none;
}
#chat-messages-list .message-row.me{
flex-direction: row-reverse;
}
#chat-messages-list .message-row.me .message-container {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
background-color: #f2720c;
color: #fff;
}
#chat-messages-list .message-row.me.arrow .message-container {
border-top-right-radius: 1.25rem;
}
#chat-messages-list .message-row.you{
justify-content: flex-start;
}
#chat-messages-list .message-row.you .message-sender{
cursor: pointer;
}
#chat-messages-list .message-row.you .message-container {
background-color: #eff0f1;
color: #0c0d0e;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: 38px;
}
#chat-messages-list .message-row.you.arrow .message-container {
border-top-left-radius: 1.25rem;
margin-left: 10px;
}
#chat-messages-list .message-row.you.arrow .message-container .chat-username {
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
font-weight: 600;
color: #0c0d0e;
}
#chat-messages-list .message-row.you .message-time{
text-align: right;
}
<div id="chat-messages-list">
<div class="message-row me arrow" data-messageid="1" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">Hello!</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row me" data-messageid="2" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">How Are you ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="3" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">Hello :)</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="4" data-senderid="1015">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div></div>
<div class="message-container">
<div class="chat-username">alex</div>
<div class="chat-message">Hello!</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="5" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">What are you doing ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you" data-messageid="6" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">Are you there ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you" data-messageid="7" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">What is your name ?</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row me arrow" data-messageid="8" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">Can you help me ?</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="9" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">Yes</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="10" data-senderid="1015">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div></div>
<div class="message-container">
<div class="chat-username">alex</div>
<div class="chat-message">Ok:)</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="11" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">okay!</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you" data-messageid="12" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">OK!</div>
</div>
<div class="message-time">17:02</div>
</div>
<div class="message-row you" data-messageid="13" data-senderid="1012">
<div class="message-sender"><div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div></div>
<div class="message-container">
<div class="chat-username" >jackertools</div>
<div class="chat-message">Ok!</div>
</div>
</div>
</div>

Apply the radius to all then using a pseudo element you hide the non needed one.
Here is the relevant code:
#chat-messages-list .message-row.me .message-container {
border-bottom-right-radius: 1.25rem;
}
#chat-messages-list .message-row.me:not(.arrow) .message-container::before {
content: "";
position: absolute;
z-index:-1;
bottom: calc(100% + 2px);
right: 0;
width: 1rem;
height: 1rem;
background: inherit; /* put a random color here to see the trick */
}
Same logic for the you elements
Full code
body {
margin: 0;
padding: 15px 0px;
font-family: sans-serif;
font-size: 15px;
}
#chat-messages-list .message-row {
display: flex;
word-wrap: break-word;
margin-bottom: 2px;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
#chat-messages-list .message-row:hover .message-time {
opacity: 1;
}
#chat-messages-list .message-row .chat-avatar {
display: block;
border-radius: 50%;
width: 28px;
height: 28px;
flex-direction: column;
background-repeat: no-repeat;
background-position: center center;
background-color: #eff0f1;
background-size: cover;
}
#chat-messages-list .message-row .message-container {
position: relative;
padding: 6px 12px;
box-sizing: border-box;
word-break: break-word;
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
}
#chat-messages-list .message-row .message-time {
display: flex;
align-items: center;
margin: 0 10px;
font-size: 12px;
color: var(--black-400);
text-align: left;
opacity: 0;
transition: opacity 275ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#chat-messages-list .message-row.arrow {
margin-top: 10px;
}
#chat-messages-list .message-row:not(.arrow) .message-sender,
#chat-messages-list .message-row.me .message-sender,
#chat-messages-list .message-row:not(.arrow) .chat-username,
#chat-messages-list .message-row.me .chat-username {
display: none;
}
#chat-messages-list .message-row.me {
flex-direction: row-reverse;
}
#chat-messages-list .message-row.me .message-container {
border-bottom-right-radius: 1.25rem;
border-top-right-radius: 0;
background-color: #f2720c;
color: #fff;
}
#chat-messages-list .message-row.me:not(.arrow) .message-container::before {
content: "";
position: absolute;
z-index:-1;
bottom: calc(100% + 2px);
right: 0;
width: 1rem;
height: 1rem;
background: inherit;
}
#chat-messages-list .message-row.me.arrow .message-container {
border-top-right-radius: 1.25rem;
}
#chat-messages-list .message-row.you {
justify-content: flex-start;
}
#chat-messages-list .message-row.you .message-sender {
cursor: pointer;
}
#chat-messages-list .message-row.you .message-container {
background-color: #eff0f1;
color: #0c0d0e;
border-bottom-left-radius: 1.25rem;
border-top-left-radius: 0;
margin-left: 38px;
}
#chat-messages-list .message-row.you:not(.arrow) .message-container::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
z-index:-1;
left: 0;
width: 1rem;
height: 1rem;
background: inherit;
}
#chat-messages-list .message-row.you.arrow .message-container {
border-top-left-radius: 1.25rem;
margin-left: 10px;
}
#chat-messages-list .message-row.you.arrow .message-container .chat-username {
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
font-weight: 600;
color: #0c0d0e;
}
#chat-messages-list .message-row.you .message-time {
text-align: right;
}
.you .message-container {
border-bottom-left-radius:10px;
}
<div id="chat-messages-list">
<div class="message-row me arrow" data-messageid="1" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)">
<div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">Hello!</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row me" data-messageid="2" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)">
<div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">How Are you ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="3" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">Hello :)</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="4" data-senderid="1015">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">alex</div>
<div class="chat-message">Hello!</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you arrow" data-messageid="5" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">What are you doing ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you" data-messageid="6" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">Are you there ?</div>
</div>
<div class="message-time">17:00</div>
</div>
<div class="message-row you" data-messageid="7" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">What is your name ?</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row me arrow" data-messageid="8" data-senderid="1001">
<div class="message-sender" onclick="_chatUserDetails(1001)">
<div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">seyit55</div>
<div class="chat-message">Can you help me ?</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="9" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">Yes</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="10" data-senderid="1015">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.mantruckandbus.com/fileadmin/media/bilder/02_19/219_05_busbusiness_interviewHeader_1485x1254.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">alex</div>
<div class="chat-message">Ok:)</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you arrow" data-messageid="11" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">okay!</div>
</div>
<div class="message-time">17:01</div>
</div>
<div class="message-row you" data-messageid="12" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">OK!</div>
</div>
<div class="message-time">17:02</div>
</div>
<div class="message-row you" data-messageid="13" data-senderid="1012">
<div class="message-sender">
<div class="chat-avatar" style="background-image: url(https://www.romania-insider.com/sites/default/files/featured_images/teenager-laptop-sxchu.jpg);"></div>
</div>
<div class="message-container">
<div class="chat-username">jackertools</div>
<div class="chat-message">Ok!</div>
</div>
</div>
</div>

how to align icons inside the text box in react js?

I need to place mail icon and password icon inside the text box, how to align items properly
my js code is:
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<img src={Envelope} alt="username"/>
<input placeholder='username' />
<img src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
);

You can use the CSS positions to achieve this (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
return (
<div className="container">
<div className="login">
<img src={pacifyr} alt="logo"/>
<div className="position-relative">
<img className="position-absolute" src={Envelope} alt="username"/>
<input placeholder='username' />
</div>
<div className="position-relative">
<img className="position-absolute" src={Lock} alt="username"/>
<input placeholder='password' />
</div>
</div>
</div>
)
<style>
.position-relative{
position: relative;
}
.position-relative input{
padding: 10px 10px 10px 30px;
}
.position-absolute{
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
</style>

* {
box-sizing: border-box;
}
.row {
margin: 10px 0;
width: 100%;
max-width: 300px;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
border-radius: 6px;
}
.row .icon {
padding: 7px 10px;
border-right: 1px solid #e0e0e0;
}
.row .icon img {
width: 26px;
height: auto;
display: block;
}
.row input {
border: none;
outline: none;
padding-left: 20px;
}
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Email/Username">
</div>
<div class="row">
<div class="icon">
<img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
</div>
<input type="text" placeholder="Password">
</div>

You can use flexbox for layout
<div className="container">
<div className="login">
<div className="row">
<img alt="logo"/>
</div>
<div className="row">
<img className="icon" alt="username"/>
<input placeholder="username" className="field"/>
</div>
<div className="row">
<img className="icon" alt="password"/>
<input placeholder="password" className="field"/>
</div>
</div>
</div>
And flexbox style need to be like below
.login {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
margin: 10px;
display: flex;
flex-direction: row;
height: 30px;
justify-content: center;
}
.icon {
width: 50px;
}
.field {
flex: 1;
}

How can i move a small text on 2 lines, without using 1 div only

How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>

Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>

Get height of flexbox row

I have a flexbox container where the items on each row overflow, and go onto the next line. Each item is aligned to a baseline; hence, the rows can be of varying sizes depending on which items are on which row and how they align to their baseline.
The items are pictured below being centered at a baseline:
I was wondering if there was a way to dynamically get the row height? Or get the distance from each item's baseline to the top/bottom of the row?
I would like to do this so i can set a hover state around the items that allow the hover to stretch over the item and have the height go all the way to the top of each row, hence the hover for each items will look as follows:
my attempt:
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>

I was able to make the hover effect same height on all items by changing
.flex-container {
align-items: baseline
}
to
.flex-container {
align-items: strech
}
then I added the following lines to make items align vertically:
.flex-item {
display: flex;
align-items: center;
}
However, your original code is aligning these items "baseline" instead of "center".. I didn't figure out how to do that.
Hope this helps.
codepen: https://codepen.io/bottlecap/pen/pEgbNx

Try plugging this into codepen.
html
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
css
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
outline:1px solid red;
height:62vh;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 400px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
flex-direction:column;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}

Develop Reference

JavaScript is the programming language of the Web.

Disable resizing of fixed flex - javascript

Related

How to position element's in specific way?

Implementing CSS Border radius with CSS and JQUERY

how to align icons inside the text box in react js?

How can i move a small text on 2 lines, without using 1 div only

Get height of flexbox row

Categories

Resources