I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks
There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>
Related
please help me to scroll text in a html input text field using css or jquery on android device.
I already tried with overflow: auto; and using iscroll.
If you want scrolling textboxes than you are doing it in a wrong way, if you want scroll, use textarea instead of input type=text, even if it's possible, don't do it, it's just wrong approach.
As far as the area is concerned, if you want to have input type text looks for your textarea you can use
textarea {
height: 30px;
resize: none;
}
Demo
I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.
You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}
Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.
I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>
So, this is a design decision that many of you may find odd. I would like to hide the caret from appearing in a textbox on a webpage but I want the textbox to remain active.
I was surprised to find that CSS does not actually offer any functionality for custom carets, admittedly it's nothing I've ever had the need for in the past but I thought that surely I wouldn't be the first to want to do this.
The best way for me to explain what I have done is by my showing you the website. www.hududandescape.com
As you can see, I have created my own custom caret which just blinks at the end of the text box that has been styled to blend in with the background. The textbox always keeps focus so there is no risk of users not being able to type in it.
My issue is that the caret that comes with the text box is still blinking. I have fixed this in Chrome and Safari by putting a small black box over the top of the very end of the box, thus covering up the caret. This solution is not ideal however and it does not work in Firefox or IE.
Your solutions, no matter how creative, are highly welcomed :)
Andy
I'm not sure, but try something like this. Idea is simple, i think you'll understand reading the code
<style>
input#top {
width:0px;
border: none;
}
#show-input{
border:1px solid #000;
width: 100px;
height: 25px;
}
</style>
<input id='top' /> <!-- 'hidden' -->
<div id='show-input' ></div> <!-- show input -->
<script>$(function(){
$("#show-input" ).click(function(){
$("#top").focus();
});
$("#top").keyup(
function(){
$("#show-input").html($(this).val())
})
})
</script>
I have a <div> block that contains an unknown amount of text.
The css for the block is:
.synopsis { width:600px; height:32px; line-height:16px; overflow:hidden; }
In essence the block allows for two lines of text, once the text reaches the block's limits, the rest is hidden from view.
What is the cleanest method to find out what text has been hidden from view? Any jQuery/Javascript functionality that does this?
You can remove the height from the css, or if you want to do this with jQuery you can use in something like this:
$('.synopsis').css('height','auto');
If i've understood you correctly, then a simple way to find the text that's overflowed would be to add a visible background colour and comment out the overflow:hidden on your synopsis class, something along the lines of:
.synopsis {
background: #FF0000;
height: 32px;
line-height: 16px;
/*overflow: hidden;*/
width: 600px;
}
Here a JSFiddle with what I mean: http://jsfiddle.net/UeaBA/4/
I dont think there is any easy way to obtain that in any script. The only way I can think as of now is to get the height and width of each character present in that div. You have to do certain calculations on these metrics to derive which characters fall in the visible area. This would be the most complex to do.
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript