I have code below. I have 2 questions:
Why right border of textarea is hidden? How to show it not use padding for div child1?
I don't set height for div child1. Why child1 is higher than textarea? How to fit it with textarea?
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>
<div id='child1' style='background-color:red;margin:10px;overflow:hidden;'>
<textarea style='width:-webkit-fill-available;height:100px;resize:none;border:2px solid black;overflow:hidden'></textarea>
</div>
</div>
</body>
</html>
thats the solution!!
your Problem was, that the Red div was as big as the text-area,
but the border doesn't count to the width, or height of an element.
so width:100%actually results into """width:100% + 2px of the left Border and + 2px on the right Border""".
but width:-webkit-fill-available counts the boreder in, with the non-advantage, (at least i think it is), that it does not work in every Browser
I have added the below CSS to textarea in your snippet to solve the two issues you have mentioned
Solution 1: To fix the border issue
box-sizing: border-box;
Solution 2 : Float to fix the height issue
float: left;
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#child1 {
width: 80%;
}
textarea {
box-sizing: border-box; /* Solution 1: To fix the border issue */
float: left; /* Solution 2 : Float to fix the height issue */
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
<div id="clear" style="clear:both;"></div>
</div>
</div>
You have to give box-sizing:border-box
* {
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
Removing overflow: hidden from your div will display textarea border.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
Textarea has display: inline-block; styling by default so just change it to display: block;
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
textarea{
display:block;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
These are the answers to your questions:
You should use the CSS calc function to reduce the textarea's 100%-width by 4px (which is the sum of the 2px border on the left and right sides);
You should apply float to left for textarea to reduce #child1's height.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#parent {
width: 100%;
height: 100%;
background-color: blue;
position: absolute;
}
#child1 {
background-color: red;
margin: 10px;
overflow: hidden;
}
textarea {
width: calc(100% - 4px);
height: 100px;
resize: none;
border: 2px solid black;
float: left;
}
<div id='parent'>
<div id='child1'>
<textarea></textarea>
</div>
</div>
It is because of the overflow element in DIV tag. you have given overflow: hidden; With the hidden value, the overflow is clipped, The overflow property only works for block elements with a specified height.
function within(){
document.getElementById("child1").style.height = document.getElementById("textarea").offsetHeight + "px";
console.log(document.getElementById("textarea").offsetHeight + "px it die höhe vom Text!")
}
function without(){
document.getElementById("child1").style.height = "unset";
}
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
button {
position:relative;}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea id="textarea" style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
<button onclick="within()">mit Höhe</button>
<button onclick="without()">ohne Höhe</button>
Related
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
I've got the following code:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
I thought, when I give a hardcoded height to my wrapper div (in the example 25px) and then height: 100%; to his child-elements, they would flex correctly and have the same height.
But in my snippet, my input is higher than my div.
If I remove the height from the wrapper div and give the input a height 23px and to the child-div 25px, it works. But I would like to set it a little bit dynamically.
It should look like this:
How can I do this?
Thanks and cheers.
The problem is default padding of input element so you can just add box-sizing: border-box and keep padding inside height of element.
.wrapper {
display: flex;
height: 25px;
}
.wrapper * {
box-sizing: border-box;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
The input element has default styling from the browser:
Make the following adjustments:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
box-sizing: border-box; /* NEW; padding and border now absorbed into height:100% */
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
box-sizing: border-box; /* NEW */
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
I would like to split my div tag up in two. But I am not quite sure how to do it. It looks like this now:
And I would like that there is a header in the div tag with a color for a headline. It should look like this:
But how can I split up like that?
Best Regards Julie
HTML and CSS:
#container {
width: 100%;
}
body {
background-color:rgb(48,48,48);
}
.topbar {
width: 100%;
height: 50px;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.latestnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.hotnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.coldnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.numberheader {
height 100px;
background-color: red;
position: absolute;
top: 80px;
left: 30px;
right: 0;
width: 100px;
height: 50px;
}
.content {
float: left;
height:50px;
width:700px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div id="container">
<div class="topbar">
<p>Topbar</p>
</div>
<div class="latestnumbers" id="show">
<div class="numberheader">
<p>Tal</p>
</div>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="hotnumbers">
<p>test</p>
</div>
<div class="coldnumbers">
<p>test</p>
</div>
</div>
</body>
</html>
EDITED:
I have just tried to position the div tag now, and it is position in the middle now. But the code for the position is pretty messy, isn't it?
Try this, I think this was what you meant right?
https://jsfiddle.net/54d4tbtc/
It didn't look that good because of the width's
.content {
float: left;
height: 50px;
width: 300px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
I would make two divs, and wrap one inside the other like this:
<div class="topbar"></div>
<div class="outer">
<div class="inner">
<p>words</p>
</div>
</div>
when combined with this type of CSS:
.inner{
width:100%;
height: 150px;
background-color: #FFECB3;
word-wrap: break-word;
text-align: center;
}
.inner p{
padding-top: 10px;
}
it should work fine. Not sure what .talraekkeheader does in your CSS, but if it was planned for this .inner div then you may not need it after doing this.
NB. I added the word-wrap styling to .inner to avoid the overflow of text that you put in the div. I added padding to the paragraph text within the element for aesthetics mainly, as you don't want text to close to the top of the div.
Best way to demonstrate what I want is to show it:
I want the left and right div to expand to the left and right edge of the container div automatically.
It can be done with Javascript and with flex but I'm wondering is there is another way that supports IE9+ (flex is IE11+)
I created this live demo (click "Run with JS") with a dynamically changing center div (since the "real life" problem doesn't have a static size)
Using a display: table-cell would make it easy for you.
Demo: http://jsfiddle.net/abhitalks/VytTX/1/
HTML:
<div class="outer">
<div id="left" class="inner"></div>
<div id="center" class="inner">...</div>
<div id="right" class="inner"></div>
</div>
CSS:
body { width: 100%; }
div.outer {
width: 90%;
border: 1px solid gray;
background-color: rgb(12, 34, 43);
text-align: center;
display: table;
border-spacing: 10px;
}
div.inner {
border: 1px solid gray;
height: 200px;
display: table-cell;
min-width: 20px; width: 20px;
padding: 4px;
background-color: rgb(212, 234, 143);
}
You could achieve that like this :
An example: http://codepen.io/srekoble/pen/rugxh (change the variable of the center width $width)
It's a sass file for a variable usage:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.outer {
width: 100%;
border: 1px solid gray;
background-color: rgb(12,34,43);
text-align: center;
margin: 0 auto;
font-size: 0;
}
div.inner {
border: 1px solid gray;
height: 200px;
display:inline-block;
min-width: 20px;
}
$width: 50%;
#center {
width: $width;
background: red;
}
#left,
#right {
width: ( 100% - $width ) / 2;
background: yellow;
}
<style>
body
{
background: #0B222A;
}
.outer
{
width: 400px;
height: 300px;
background: #D3EA8F;
margin: auto;
}
.inner
{
width: 60%;
height: 300px;
background: #D3EA8F;
border-left: solid 10px #0B222A;
border-right: solid 10px #0B222A;
margin: auto;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
I have no idea why the #mainControldiv div is not being enclosed by it's wrapper div. Here is the html and css following it:
css:
*
{
padding: 0px;
margin: 0px;
}
div
{
border: 1px solid;
}
#mainWrapperdiv
{
width: 1000px;
margin: 0px auto 0px auto;
}
#maindiv
{
width: 850px;
height: 500px;
margin: 50px auto 0px auto;
border: 5px solid;
}
#mainControldiv
{
width: 850px;
height: 150px;
margin: 470px auto 0px auto;
border: 5px solid;
float: right;
}
#moveablediv
{
width: 50px;
height: 50px;
background: lightgreen;
position: relative;
left: 400px;
top: 200px;
}
#centerPointdiv
{
width: 5px;
height: 5px;
background: black;
position: relative;
left: 22px;
top: 22px;
}
It should be pretty straight forward, yet i can't figure out why the mainControldiv does not show up within the border of the mainWrapperdiv, it's direct parent. And can you also tell the logic, or the inner reason why it's not working as I'm expecting, thanks in advance.
You cannot end divs like that, even if a div has no content, it must have a closing tag:
<div></div>
So change you structure to be as follows:
<body>
<div id = "mainWrapperdiv">
<div id = "maindiv">
<div id = "moveablediv" >
<div id = "centerPointdiv"></div>
</div>
</div>
<div id = "mainControldiv"></div>
</div>
</body>