I have a textarea,where user will input some text,and also have a input range,where user can increase the font size of text,I want that the width of textarea still same,but height increase depend font size to show all text,and also I want textarea don't have a scroll and resize
I did that using div,and I want the same result using textarea
I did that using div https://jsfiddle.net/Meline222/fgpedL0z/1/
I want the same result but using textarea https://jsfiddle.net/Meline222/fgpedL0z/3/ bt when i use textarea all text can't see
I tried did but all text don't show textarea
this work for div
#inputText {
width: 150px;
height: auto;
border: 1px solid;
word-wrap: break-word;
overflow:hidden;
resize: none;
}
If you want only the height to be adjusted along font size, use em unit measure.
width: 150px;
height: 2em;
Documentation about the em unit says
em: 1em is the same as the font-size of the current element.
JSFiddle Demo: https://jsfiddle.net/craigiswayne/qkn8rdxp/20/
function adjustSize(i){
var o = document.getElementById('inputText');
o.setAttribute("style","height: auto;");
var val = i.value;
o.style.fontSize = val + 'px';
var fontSize = o.style.fontSize;
o.setAttribute("style","font-size: " + fontSize + "; height: " + o.scrollHeight + "px;");
}
#inputText {
width: 150px;
height: auto;
border: 1px solid;
word-wrap: break-word;
}
<textarea name="" id="inputText">kyb u uuhhhkjh kj</textarea>
<input id="input" type="range" min="12" max="72" oninput="adjustSize(this);">
So the solution I chose to set the height of the textarea to it's scrollHeight
scrollHeight is defined by MDN docs as
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
see also this post for an explanation of scrollHeight, clientHeight and offsetHeight
What is offsetHeight, clientHeight, scrollHeight?
Related
I have an application, that takes html as input, renders an image and saves it. It also requires the user to specify the width and height that the image should be. I want to automate the height and width part so the user wouldn't need to set it up manually
The Problem:
if the html is as simple as <p>text</p> the height is pretty easy to find by using clientHeight but the width will be the whole width of the viewport and most of it would be absolutely unneeded to show text, so the picture would be very narrow (height = 16px; width = 1080px) and that is not great.
The Question:
is there any way to find the width of an element that it actually uses? (for instance width required by <p>text</p> would be closer to 16px but not 1080px)
You are having this error because elements such as <p> and <div> will extend the entire width of the parent by default. You should use width: fit-content to stop that.
div {
background-color: blue;
}
p {
background-color: red;
}
.width {
width: fit-content;
}
<div>This is a DIV with width: auto</div>
<p>This is a P with width: auto</p>
<div class="width">This is a DIV with width: fit-content</div>
<p class="width">This is a P with width: fit-content</p>
clientHeight will return the height for the entire window. You should focus on just the parent of the elements you want to render to get a better reading. Use offsetWidth and offsetHeight to get the full width of the parent.
var div = document.getElementById('div');
div.innerHTML = 'Width: ' + div.offsetWidth + '<br>Height: ' + div.offsetHeight;
.square {
width: 100px;
height: 100px;
background-color: blue;
}
<div id="div" class="square"></div>
I'm trying to make an textarea autogrow with Javascript. The logic is fairly simple, and here is my working code :
$("#message-box").on('keydown', function() {
var scroll_height = $("#message-box").get(0).scrollHeight;
$("#message-box").css('height', scroll_height + 'px');
});
#message-box {
border: 1px solid #cccccc;
width: 400px;
min-height: 100px;
padding: 5px;
overflow: hidden;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>
Everything works great, but when I remove the box-sizing: border-box; property, I see strange things. With each keydown event the textarea autogrows.
What is the relation between textarea autogrowing and the box-sizing property ?
EDIT
See the demos here :
With the box-sizing property : http://52.90.45.189/aks/textarea-autogrow.html
Without the box-sizing property : http://52.90.45.189/aks/textarea-autogrow-no-border-box.html
I can understand that scrollHeight increases by 10px when box-sizing is removed. But why does the browser add an extra 10px each time when a key is pressed ?
This is happening because scrollHeight taking padding: 5px; as a content which is increasing scroll height of textarea
The Element.scrollHeight read-only property is a measurement of the
height of an element's content, including content not visible on the
screen due to overflow.
The scrollHeight value is equal to the minimum height the element
would require in order to fit all the content in the viewpoint without
using a vertical scrollbar. It includes the element's padding, but not
its border or margin.
MDN
With border-box textarea's height is 100px excluding padding so scrollheight is 100px.
With content-box textarea's height is 100px + 10px as per default behavior of content-box so scrollheight is 110px, with each keydown textarea increases it's height by 10px and updated scrollheight as well.
See snippet Below
$("#message-box").on('keydown', function() {
console.log("height of teaxtare on keydown is " + $("#message-box").height() + "px");
var scroll_height = $("#message-box").get(0).scrollHeight;
console.log("Scroll Height of textarea is " + scroll_height + "px");
$("#message-box").css('height', scroll_height + 'px');
console.log("After setting scroll_height as a height of teaxtare, teaxtare's height is " + $("#message-box").height() + "px");
});
#message-box {
border: 1px solid #cccccc;
width: 400px;
min-height: 100px;
padding: 5px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<textarea id="message-box"></textarea>
EDIT
Let say
S = 110px (scrollheight + padding:5px;)
H = Height of textarea.
Now you presses key,
Key Event 1,
S = 110px so
H = 110px,
____
Key Event 2,
S = 120 // 110px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px)
H = 120px,
____
Key Event 3,
S = 130 // 120px (which is increased height of textarea by this function ($("#message-box").css('height', scroll_height + 'px');)) + Padding (Which is 10px)
H = 130px,
And So On
This formation is sort of loop.
In your JQuery, you can Use:
this.style.height = "1px";
this.style.height = (this.scrollHeight) + "px";
Please try the following:
$("#message-box").on('keydown', function() {
this.style.height = "1px";
this.style.height = (this.scrollHeight) + "px";
});
#message-box {
border: 1px solid #cccccc;
width: 400px;
min-height: 100px;
padding: 5px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>
In first loop iteration the CSS height was 100px but scrollHeight was 110px. These two are different things. Again in the 2nd loop iteration, scrollHeight was 120px and the CSS height before the last line of the function was 110px. After the last line the CSS height changed to 120px.
this.style.height = (this.scrollHeight) + "px";
scrollHeight is real height of the element. CSS height is the real height with border-box and not with content-box.
I need to size a vertical range control based on the available height in the browser. I just about have it, except I think there is some type of a padding/border/margin issue that I can't get around. Although it sizes itself according to the height of the browser, my range control always goes off the bottom of the page by a few pixels.
This is how I'm getting the height:
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
then using it to set the slider height:
document.getElementById("slider").setAttribute('style', "height :" + height + "px");
I know that clientHeight returns the height INCLUDING padding, so I've been thinking that I just need to get the top padding and subtract it.
Problem is that when I get the padding as shown here, it is zero (alert writes out 0px):
alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
Meanwhile, the CSS for the slider looks like this, so I don't think its own padding/border/margins are responsible:
.sliderStyle {
height: 860px;
width: 2%;
-webkit-appearance: slider-vertical;
padding-top: 0px;
margin: 0px;
border: 0px;
}
The only thing in the body of the HTML is the range control:
<input id="slider" class="sliderStyle" oninput='' onchange='' type="range" min="0" max="1000" step="1" value="0">
Here is the file in its entirety:
<!DOCTYPE html>
<html>
<head>
<title>Size Control to Browser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen">
.sliderStyle {
height: 860px;
width: 2%;
-webkit-appearance: slider-vertical;
padding-top: 0px;
margin: 0px;
border: 0px;
}
</style>
<script type="text/javascript">
function start() {
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
alert('clientHeight: ' + height);
alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top'));
document.getElementById("slider").setAttribute('style', "height :" + height + "px");
}
</script>
</head>
<body onload='start()'>
<input id="slider" class="sliderStyle" type="range" min="0" max="1000" step="1" value="0">
</body>
</html>
clientHeight alert confirms that height is changing for different browser sizes
top pad and top margin alerts both return 0px
To answer your question: use the below JavaScript as your height variable, instead of using clientHeight or innerHeight (and set the body to be 100vh). (See the jsfiddle):
JS:
var style = window.getComputedStyle(document.body, null),
height = style.getPropertyValue("height");
console.log(height);
CSS:
body {
padding: 20px;
height: 100vh;
}
div {
height: 30px;
}
HTML:
<div></div>
What the code does is gets the height of contents of the body, which in essence is the height of the body without any padding.
The only reason I put a random div element in there with a set height of 30px is to show that console.log(height) will output exactly 30px, which is the height of all the contents in the body (in this case, the div is the only thing in the body), not including the padding of the body (which, according to the example CSS I used above, is 20px). You can obviously just remove this div, as it is just here for example purposes.
The JavaScript is taken from this answer to "Get the height of an element minus padding, margin, border widths", which also shows a legacy cross-browser implementation.
you can see for example in wikipedia here:
http://en.wikipedia.org/wiki/United_States
The second pargraph starting with "At 3.79 million square miles".
If you check the width of this pharagraph it will give you the full width including the width of the floating right element '.infobox'
http://imageshack.us/photo/my-images/38/54351130.jpg/
But I need to get the Exact width of the pharagraph displayed to the user (which is the pharagraph width - the infobox etc').
However assuming I have no idea that there is a floating element and I want javascript to calculate the exact displayed width of the contect.
Thank you.
Edit:
Here is an example to the problem:
http://jsfiddle.net/guy_l/sj3Zp/2/
Scrolling through the DOM I get the same results however the calculated witdh is different.
Here is your scenario with a jQuery solution which works fine:
<script>
// with all margins and paddings
var w1 = $('.c_2').outerWidth(true);
var w2 = $('.c_3').width();
alert ('Calculated width: ' + w2 + ' - ' + w1 + ' = ' + ( w2-w1) );
</script>
<style>
.c_1 {
border: 1px solid red;
}
.c_2 {
float: right;
width: 22em;
height: 200px;
margin: 0px 20px;
padding: 0px 20px;
border: 1p solid orange;
}
.c_3 {
border: 1px solid blue;
}
</style>
<div class="c_1">
<div class="c_2">
Infopanel
</div>
<p>
Some paragraph
</p>
<p class="c_3">
The interesting paragraph
</p>
</div>
This is my HTML code
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
This is my CSS
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
Now i want to make few div inside mainContent of fixed size lets say 150px however if the mainContent width became, lets say 650px then i'll be having 4 div in a row then again 4 in a row. So 4 div means it will be of 600px, hence i'll be having an extra 50px of space.
Now finally what exactly i want to do is to detect this empty space and making the mainContent max-width to 600px`. Any trick which can do this. Javascript or something.
Here is the solution using jquery:
$(function(){
var outerdiv = $('.mainContent');
var innerdivs = $('.mainContent > div');
var sum =0;
innerdivs.each(function(index){
sum += $(this).width(); //calculate and add the widths of every div
});
//outerdiv.width(sum); //set new width for .maincontent
outerdiv.css("max-width", sum); //you can also set max-width like this.
});
You can check out the jsfiddle for this here: http://jsfiddle.net/jqYK6/
Regards,
Saurabh
https://stackoverflow.com/a/10011466/1182021
Here is the link for the answer... after waiting for long i come up to this.