I have the following in my HTML page:
and its a div containing a label "Name" and a textarea below it with a height of 30vh.
I'm having issues where I want to keep the height of the textarea from resizing itself whenever i adjust the height of the browser. Right now it is resizing when i resize the browser window height wise:
I've read up about "min-height" so I set the min-height to 30vh as well hoping that it would prevent the textarea from resizing height wise but its not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#output2 {
height: 90vh;
width: 25%;
border: 1px solid black;
}
#name_field {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
#name_box {
height: 30vh;
min-height: 30vh; /*defined min-height here*/
width: 95%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "output2">
<div id = "name_field">
Name
<textarea id = "name_box" disabled></textarea>
</div>
</div>
</body>
</html>
Would appreciate some help on this.
Instead of setting value of min-height property in "relative unit"(in this case vh),set the value of min-height property in "absolute unit" such as px ,mm etc.
In this way ,you can solve this problem .Hope you understand!
Here is a correction(just focus #name_box selector in css):
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#output2 {
height: 90vh;
width: 25%;
border: 1px solid black;
}
#name_field {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
#name_box {
height: 30vh;
min-height: 50px; /*Line to focus*/
width: 95%;
}
textarea {
resize: none;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "output2">
<div id = "name_field">
Name
<textarea id = "name_box" disabled></textarea>
</div>
</div>
</body>
</html>
Related
I want to insert divs as event entries in a "div_outside". The event entry should take 100% of the width if there is no other entry next to it. If there is another entry next to it, they should both be the same size next to each other.
My current code looks like this, but doesnt work:
test.css:
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
float: left;
background-color: green;
}
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="column_div" id="column_div"></div>
<script src="test.js" defer></script>
</body>
</html>
test.js:
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
How i can do that with html and css?
If I understand you correctly, the display: flex CSS attribute is what you're looking for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.div_outside {
border: 2px solid black;
display: flex;
}
.div_outside > div {
border: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
background: blue;
height: 300px;
width: 100%;
}
</style>
</head>
<body>
<div class="div_outside">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</body>
</html>
you didn't actually explain clearly what exactly you want but I think what you mean is that you want divs to be in a row with equal space. and if there is only one div, it should take 100% width. is that it? check the code and let me know if this is what you want or not.
for that, you need to make the parent display: flex: with flex-direction: row: and you don't need to use float.
column_div = document.getElementById("column_div")
new_event1 = document.createElement("div")
new_event1.classList.add("new_event1");
column_div.appendChild(new_event1)
new_event2 = document.createElement("div")
new_event2.classList.add("new_event2");
column_div.appendChild(new_event2)
// new_event3 = document.createElement("div")
// new_event3.classList.add("new_event3");
// column_div.appendChild(new_event3)
.column_div{
position: relative;
width: 200px;
height: 800px;
margin-top: 20px;
margin-left: 20px;
border: solid black;
display: flex;
flex-direction: row;
}
.new_event1{
position: relative;
width: 100%;
height: 30px;
background-color: red;
}
.new_event2{
position: relative;
width: 100%;
height: 30px;
background-color: green;
}
/*
.new_event3{
position: relative;
width: 100%;
height: 30px;
background-color: yellow;
} */
<body>
<div class="column_div" id="column_div"></div>
</body>
This is my HTML with styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I wanted a circle that was slightly cut on both left & right sides(mobile) and up & down (for desktop) so i thought this was the best way but what I observe is that the page also ends up with extra width on mobile and extra height on desktop, I don't want this to happen.
Is there any way deal with this so the circles remain cut and removing the scrolling?
Use heigth: 100% and width: 100% and overflow: hidden on your html tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html {
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
body {
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
}
#media (orientation:landscape){
body{
height:70vw;
width:70vw;
}
}
</style>
<body></body>
</html>
I want that these images should cover the div (card) and overflow towards the right side, but I am not getting why these images are getting adjusted even if I had given images their width and height.
please help me in this matter.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
position: relative;
width: 90%;
height: 700px;
background-color: red;
display:flex;
}
.card img {
width: 90%;
height: 700px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styler.css">
<title>Document</title>
</head>
<body>
<div class="card">
<img class="slider" src="https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=625&q=80" alt="">
<img class="slider" src="https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=625&q=80" alt="">
<img class="slider" src="https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=625&q=80" alt=""> v>
</div>
</body>
<script>
</script>
</html>
Try with this CSS...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card {
position: relative;
width: 90%;
height: 700px;
background-color: red;
display: flex;
overflow-x: auto;
overflow-y: hidden;
}
.card img {
min-width: 90%;
height: 700px;
}
If you want your images to cover the entire width of the parent div container, simply add the following to your .card img{} class:
.card img {
position: absolute;
width: 90%;
height: 700px;
}
This way, they are not positioned and sized according to page flow but to parent div instead.
So I want to achieve the following which i drew:
and the green div is the outer div and inside the div, there is a div which i plan to use for a map. Now the problem I'm facing now is how to I place the div at the bottom of the outer div? I want it to be somehow locked in that position so when I resize the browser, it would stay at its current position and the map div won't move around.
I tried using "margin-top: 59vh" but when i adjust the height of my browser it overflows and becomes weird:
Would appreciate some help on this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
}
#map_div {
border: 1px solid blue;
height: 300px;
margin-top: 59vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
Remove margin-top: 59vh from #map_div and add display: flex, flex-direction: column, and justify-content: flex-end to #outer
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#outer {
border: 1px solid black;
height: 90vh;
width: 35%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#map_div {
border: 1px solid blue;
height: 300px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<div id = "map_div"></div>
</div>
</body>
</html>
So I'm trying to get the following layout which consists of three elements, an outer shell (div), a text box and a circle element:
But the problem I'm having is that I want the outer shell div width to scale based on the width of the textbox, meaning if the width of the textbox is smaller, then it would scale down as well.
Right now, i have the following in HTML:
Two issues is that, the circle i defined in CSS is not showing up which i wanted to get like the above, second is that the outer shell is not following the width of the textbox.
html, body {
height: 100%;
}
.main {
border: 1px solid black;
height: 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.outer_shell {
border: 1px solid black;
border-radius: 40px;
}
.circle {
width: 20%;
height: 20%;
background: blue;
}
#text_in {
width: 50%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main">
<div class = "outer_shell">
<div class = "circle"></div>
<input type = "text" id = "text_in">
</div>
</div>
</body>
</html>
First of all, love your drawing.
You should use
width: fit-content
for your outer_shell
I did some experimentation with the provided code and I found that the HTML appeared okay. The error was found in the CSS file. The following code snippet should work:
html, body {
height: 100%;
}
.main {
border: 1px solid black;
height: 50%;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.outer_shell {
border: 1px solid black;
border-radius: 40px;
display: inline-flex;
width: fit-content;
}
.circle {
width: 20px;
background: blue;
border-radius: 50%;
padding: 1px;
}
#text_in {
width: 200px;
height: 100%;
margin-left: 5px;
margin-right: 10px;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main">
<div class = "outer_shell">
<div class = "circle"></div>
<input type = "text" id = "text_in">
</div>
</div>
</body>
</html>