This question already has answers here:
How do I disable the resizable property of a textarea?
(20 answers)
Closed 8 years ago.
How to disable the grabber in the <textarea>?
I mean that triangle thing which appears in the right-bottom corner of the <textarea>.
Just use resize: none
textarea {
resize: none;
}
You can also decide to resize your textareas only horizontal or vertical, this way:
textarea { resize: vertical; }
textarea { resize: horizontal; }
Finally,
resize: both enables the resize grabber.
<textarea style="resize:none" name="name" cols="num" rows="num"></textarea>
Just an example
example of textarea for disable the resize option
<textarea CLASS="foo"></textarea>
<style>
textarea.foo
{
resize:none;
}
</style>
Related
This question already has answers here:
HTML5 textarea placeholder not appearing
(8 answers)
Closed 2 years ago.
I have two issues that are occurring, the place holder will not appear and whenever I click on my textarea, it starts typing from where I clicked instead of the top left?
textarea {
outline: none;
resize: none;
text-align: start;
border: 1px solid black;
width: 100%;
overflow: hidden;
}
<textarea cols="70" rows="4" placeholder="Adding a rich description will help with the search result">
</textarea>
A placeholder will only appear if there is no content in the textarea.
You have set default content of "a bunch of spaces and a new line".
Remove the content between > and <.
When exceeding the length of the input, the md-chips creates a new line. I'd like the chips to continue always in one single line and the input to overflow horizontally just as a normal text input. How to achieve this? This answer is not working for me.
Image of the undesired behavior:
If you want to overflow chips with pure css, you can do the following: (PLUNKER)
HTML
<md-chips class="chips-overflow" placeholder="Enter an animal..."></md-chips>
CSS
.chips-overflow .md-chips {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
.chips-overflow .md-chips md-chip,
.chips-overflow .md-chips .md-chip-input-container {
display: inline-block;
float: none;
}
** This will work perfectly with angularjs-material version >= 1.1.0, and it works but will have problems with placeholder with angularjs-material version >= 0.0.9
This question already has answers here:
html/CSS Ellipsis
(2 answers)
Applying an ellipsis to multiline text [duplicate]
(23 answers)
Closed 6 years ago.
How can I show three dots(...) in a text like this?
Add all these.
To make in single line.
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; /* some width */
}
To do in multi line which actually you asked.
#content {
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
working fiddle:
https://jsfiddle.net/mishrarajesh/676jc7sa/
Please note that this multiline code is supported only in web-kit browsers for now.
textareas are expandable (bottom right corner there is a hook).
How do I make a textarea solid/un-expandable?
Preferably through HTML.
You can use this in your CSS:-
textarea { resize: none; }
textarea { resize: none; }
Is good and does work.
I have a textarea that needs to be able to be sized using the Rows attribute. I also want to be able to adjust the line-height of the text within the textarea. However, this causes a scrollbar in IE9 and IE10. Is there a way around this that doesn't involve javascript?
The problem is illustrated in this JSFiddle: http://jsfiddle.net/JYkAX/6/
Here is the html:
<textarea rows="3" class="textbox">No line-height
2
3</textarea>
<div class="separator"></div>
<textarea rows="3" class="textbox2">Lineheight = 20px
2
3</textarea>
And here is the css:
.textbox
{
overflow: auto;
}
.textbox2
{
overflow: auto;
line-height: 20px;
}
.separator
{
display: block;
height: 10px;
}
your css is fine but to make this work add Jquery:
$(document).ready(function() {
var textArea = $('textarea'),
lineHeight = parseFloat(textArea.css('lineHeight'));
textArea.height(lineHeight * textArea.attr('rows'))
});
This will define line-height and its auto height.
I know you mentioned no JS but jquery was my only solution when I had to deal with something similar to this
Zeke
Create an additional css file for ie and set line-height to e.g. 13px;
use this line-height: 15px\9; in css
It is a css IE9 hack for modern browsers. it will work. i check it on IE9. You check it on IE10. As i do not have IE10.
Its a good question. I iike it as replied correctly :)