We Keep Coding

Is there a way to verticaly occupy all the space of the flexbox container?

I want the search button to occupy all the space vertically
I have tried setting the height to 100% of the parent container but not working, I have tried setting the flex-basis to 100%/0/auto (not working). Look at my Code below and see the picture of the btn beside the input.
I want that btn to gain the height equal to the height of the input
See the Problem here
My Html:
<div className="search_subContainer">
<input
className="searchCity"
type="text"
value={value}
placeholder="Search city..."
onFocus={() => {
setFocus(!focus);
}}
onBlur={() => {
setFocus(!focus);
}}
onChange={handleChange}
/>
<button className="search_btn">
<IoSearch />
</button>
</div>
My Css:
.header .search_subContainer {
display: flex;
align-items: center;
align-content: stretch;
height: 100%;
border: 2px solid brown;
border-radius: 5px;
}
.header .searchCity {
width: 17em;
height: 100%;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header .searchCity:focus {
background-color: rgba(255, 255, 255, 0.719);
}
.search_btn {
width: 3em;
flex: 1;
height: 100%;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.search_btn:hover {
background-color: cadetblue;
}

The culprit is caused by align-items: center. Adding that to a flex container with a direction of row aligns the flex children to the center vertically.
To fix this, remove that line and the search button should align with the input element.
Fix
.search_subContainer {
display: flex;
border: 2px solid brown;
border-radius: 5px;
}
Doing this also means no need to add a height and flex: 1 to the input container, input element, and button itself.
So
.search_btn {
width: 3em;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.searchCity {
width: 17em;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

Just remove align-items: center; for container and container become stretch. Then you can align the icon inside the button using flex. It's the simplest and correct way, IMHO.

There Your go:
please avoid explicit height and width
simple:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.header{
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 2px solid black;
}
.search-bar {
padding: 10px;
border: 1px solid lightgray;
margin-left: -5px;
}
.search-bar::placeholder {
color: black;
}
.submit-btn {
background-color: blue;
color: white;
padding: 11px;
font-size: 12px;
border-style: none;
margin-left: -5px;
}
<div class="header">
<div>
<a href='/'>tanjiro</a>
</div>
<div>
<input type="search" placeholder="Awesome" class="search-bar">
<button type="button" class="submit-btn">Search</button>
</div>
</div>

How can I show several different divs in the same popup?

The screen i'm trying to make;
The screen I can do;
As can be seen from the pictures; The divs in the 2nd picture are separate from each other. I'm trying to do as in the 1st picture, but I couldn't. I want to show the incoming data in the same popup.
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
position: absolute;
right: 340px;
.installmentinfo {
background-color: white;
width: 280px;
height: auto;
border: var(--border);
border-radius: 0.5em;
padding: 0.5em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}

Try this CSS
.installmentinfo__container{
border: 1px solid #d1d1d1;
border-radius: 10px;
width: 320px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
.installmentinfo {
background-color: white;
width: 280px;
height: auto;
border: var(--border);
border-radius: 0.5em;
padding: 0.5em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots

I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

Ajust div width to fit text after line-break

I would like to resize a div width to make it always fit the text inside even when there is a line-break.
Is there a way to modify the width to make it fit the text after a line break using javascript?
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
display: flex;
align-items: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 20px;
}
#secondDiv{
border: 10px solid skyblue;
display: flex;
align-items: center;
margin: auto 20px;
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
width: 200px;
margin: auto 20px;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>
Edits:
The problem is because there is some blank space at the end of the #secondDiv the space between #firstDiv and #secondDiv appears not the same than between #secondDiv and #thirDiv when there is no borders.

If you instruct that element to use all of the remaining space (width:100%) the text will fill whatever space it can.
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
display: flex;
align-items: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 20px;
}
#secondDiv{
border: 10px solid skyblue;
display: flex;
align-items: center;
margin: auto 20px;
width:100%; /* Instruct element to take 100% of the remaining space */
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
width: 200px;
margin: auto 20px;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>

I have just changed some css code to make this three div be inline and deleted display:flex
body{
width: 600px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
text-align: center;
justify-content: space-between;
}
#firstDiv{
border: 10px solid brown;
width: 130px;
margin: auto 5px;
display:inline-block;
}
#secondDiv{
border: 10px solid skyblue;
text-align: center;
margin: auto 5px;
width:auto;
display:inline-block;
}
#icon{
height: 24px;
width: 24px;
background-color: yellow;
margin-right: 10px;
}
#thirdDiv{
border: 5px solid yellowgreen;
margin: auto 5px;
display:inline-block;
width:auto;
text-align: center;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">
<span id="icon"></span>
<span id="legend">I want the #secondDiv width to fit this text</span>
</div>
<div id="thirdDiv">THIRD</div>
</div>

Set textarea element height based on window size

I am trying to set the height of a textarea element based on the window size using css. The problem is, that if I set it using height it will be good enough viewed on one monitor, but on another it will not be. Example:
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 900px;
}
Can this be accomplished using just CSS or is it a job for JS?
EDIT:
My goal is to have 2 textarea elements next to each other with small distance between them and a small distance from the bottom/top (ergo the margin). Both elements should hopefully have almost the height of the window size, which did not result after using height: 100%;.
A link to a
jsfiddle, where height: 100%; did not do the trick.
/* Commented out because of background img
body {
background-image: url(./images/background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
.btn-group button {
background: #DF6C6C;
border-color: transparent;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
outline: 0px !important;
-webkit-appearance: none;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #E58B8B;
}
/* Align buttons */
.wrapper {
text-align: center;
}
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
outline: 0px !important;
-webkit-appearance: none;
height: 100%;
}
<body>
<div class="wrapper">
<div class="btn-group">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
<button>Button5</button>
<button>Button6</button>
</div>
</div>
<textarea></textarea>
</body>

Perhaps something to start with, I used a wrapper with green border so you can see what is going on.
You probably (my assumption) do not want 100% height but "remaining of 100% height" there are other answers for that on here for example https://stackoverflow.com/a/11226029/125981
.btn-group button {
background: #DF6C6C;
border-color: transparent;
color: white;
padding: 10px 24px;
cursor: pointer;
float: left;
outline: 0px !important;
-webkit-appearance: none;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #E58B8B;
}
/* Align buttons */
.wrapper {
text-align: center;
}
.txtcontainer {
border: solid lime 1px;
text-align: center;
height: 140px;
padding-top: 5%;
padding-bottom: 5%;
}
.spacer {
width: 5%;
}
.myfunones{
resize: none;
border-radius: 8px;
outline: 0px !important;
-webkit-appearance: none;
height: 100%;
width: 45%;
}
<body>
<div class="wrapper">
<div class="btn-group">
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
<button>Button5</button>
<button>Button6</button>
</div>
</div>
<div class='txtcontainer'>
<textarea class='myfunones'>text</textarea><span class='spacer'> </span><textarea class='myfunones'>text2</textarea>
</div>
</body>

Looking for something like this ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-areas: ". .";
grid-template-rows: 100% 100%;
grid-gap: 10px;
background-color: #09ff00;
padding: 10px 0;
}
.left,
.right {
resize: none;
border-radius: 8px;
}
<div class="container">
<textarea class="left"></textarea>
<textarea class="right"></textarea>
</div>

Instead of a fixed width of 900px, set it to 100%, so the height becomes 100% of its parent/container.
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100%;
}
If you want to set the height of the browser window itself (viewport height), then use 100vh:
textarea {
resize: none;
margin: 5px 10px 5px 10px;
border-radius: 8px;
height: 100vh;
}
Example:
I removed all the styling so that the textarea is covering the parents' height and width exactly.
.container {
height: 200px;
background: steelblue;
}
textarea {
resize: none;
height: 100%;
width: 100%;
margin: 0;
border: none;
overflow: auto;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 0;
background: rgba(255, 255, 255, 0.5);
}
textarea:focus,
textarea:active {
outline: none;
}
<h1>Text field</h1>
<div class="container">
<textarea></textarea>
</div>
Update with 2 textareas as requested:
This time I used flex to distribute the space and space between the two textareas. I applied the margin on the container so that it is easily adjusted without making the textareas bigger or smaller.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
height: 200px;
background: steelblue;
margin: 20px;
}
textarea {
flex: 0 1 48%;
height: 100%;
margin: 0;
border: none;
overflow: auto;
resize: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 0;
background: rgba(255, 255, 255, 0.5);
}
textarea:focus,
textarea:active {
outline: none;
}
<h1>Text field</h1>
<div class="container">
<textarea></textarea>
<textarea></textarea>
</div>