Menu
I have a <textarea> for comments. The comment box is not resizing when I resize my browser window, so on a small screen, the box is too large and overflows the page. How can I prevent this from happening?
I assume I need to add an @media screen query for when I resize my browser smaller or larger, but I'm not sure where I would add it.
function commentSubmit() {
if (form1.name.value == '' && form1.comments.value == '') { //exit if one of the field is blank
alert('Enter your message !');
return;
}
$('#imageload').show();
var name = form1.name.value;
var comments = form1.comments.value;
var xmlhttp = new XMLHttpRequest(); //http request instance
xmlhttp.onreadystatechange = function() { //display the content of insert.php once successfully loaded
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('comment_logs').innerHTML = xmlhttp.responseText; //the chatlogs from the db will be displayed inside the div section
$('#imageload').hide();
}
}
xmlhttp.open('GET', 'insert.php?name=' + name + '&comments=' + comments, true); //open and send http request
xmlhttp.send();
}
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#comment_logs').load('logs.php');
}, 2000);
});body {
background: #999;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#container {
background-color: #FFF;
width: 50%;
padding: 10px;
margin: 20px;
margin-left: auto;
margin-right: auto;
}
.page_content {
margin: 15px;
padding: 5px;
border-bottom: 1px solid #CCC;
}
.comment_input {
background: #CCC;
margin: 10px;
padding: 10px;
border: 1px solid #CCC;
}
.button {
padding: 5px 15px 5px 15px;
background: #567373;
color: #FFF;
border-radius: 3px;
}
.button:hover {
background: #4D9494;
}
a {
text-decoration: none;
}
.comment_logs {
margin: 5px;
padding: 5px;
border: 1px solid #CCC;
}
.comments_content {
margin: 10px;
padding: 5px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h1 {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #4040E6;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
}
h3 {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color: #75A3A3;
padding-bottom: 5px;
margin-bottom: 5px
}
h4 {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
text-decoration: none;
}<html>
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Comment Box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div class="page_content">
Page Content Here....
</div>
<div class="comment_input">
<form name="form1">
<input type="text" name="name" placeholder="Name..." />
<br>
<br>
<textarea name="comments" placeholder="Leave Comments Here..." style="width:635px; height:100px;"></textarea>
<br>
<br>
<a href="#" onClick="commentSubmit()" class="button">Post</a>
<br>
</form>
<div id "imageload" style="display:none;">
<img src="loading.gif" />
</div>
</div>
<div id="comment_logs">
Loading comments...<img src="loading.gif" />
</div>
</div>
</body>
</html>
921
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
You can achieve this by using a span and a textarea. You have to update the span with the text in textarea each time the text is changed. Then set the css width and height of the textarea to the span's clientWidth and clientHeight property.
The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%.
Try textarea {max-width:95%;} - it will always fit your display. Show activity on this post. I set the number of columns to slightly greater that the width of the div on a large screen and as the screen gets smaller it acts responsive to the screen size.
As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default. The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:
But, with the use of your browser and a couple of tweaks, you can fix pages where the text is too wide. Just to be clear, this isn’t a permanent solution. That would be great if you could change someone else’s site. However, the fix works until you refresh the page or go to another. What we’re going to do is make 2 CSS changes to the page.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).
The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default. The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:
Don't use static styles in your HTML code. Whenever possible strip it out to your CSS definitions. A textarea's width of 100% should be fine here.
/* CSS Document */
textarea {
width: 100%;
}
body {
background: #999;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#container {
background-color: #FFF;
width: 50%;
padding: 10px;
margin: 20px;
margin-left: auto;
margin-right: auto;
}
.page_content {
margin: 15px;
padding: 5px;
border-bottom: 1px solid #CCC;
}
.comment_input {
background: #CCC;
margin: 10px;
padding: 10px;
border: 1px solid #CCC;
}
.button {
padding: 5px 15px 5px 15px;
background: #567373;
color: #FFF;
border-radius: 3px;
}
.button:hover {
background: #4D9494;
}
a {
text-decoration: none;
}
.comment_logs {
margin: 5px;
padding: 5px;
border: 1px solid #CCC;
}
.comments_content {
margin: 10px;
padding: 5px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h1 {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #4040E6;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
}
h3 {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color: #75A3A3;
padding-bottom: 5px;
margin-bottom: 5px
}
h4 {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
text-decoration: none;
}<html>
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Comment Box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function commentSubmit() {
if (form1.name.value == '' && form1.comments.value == '') { //exit if one of the field is blank
alert('Enter your message !');
return;
}
$('#imageload').show();
var name = form1.name.value;
var comments = form1.comments.value;
var xmlhttp = new XMLHttpRequest(); //http request instance
xmlhttp.onreadystatechange = function() { //display the content of insert.php once successfully loaded
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('comment_logs').innerHTML = xmlhttp.responseText; //the chatlogs from the db will be displayed inside the div section
$('#imageload').hide();
}
}
xmlhttp.open('GET', 'insert.php?name=' + name + '&comments=' + comments, true); //open and send http request
xmlhttp.send();
}
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#comment_logs').load('logs.php');
}, 2000);
});
</script>
</head>
<body>
<div id="container">
<div class="page_content">
Page Content Here....
</div>
<div class="comment_input">
<form name="form1">
<input type="text" name="name" placeholder="Name..." />
</br>
</br>
<textarea name="comments" placeholder="Leave Comments Here..."></textarea>
</br>
</br>
<a href=" # " onClick="commentSubmit() " class="button ">Post</a>
</br>
</form>
<div id "imageload " style="display:none; ">
<img src="loading.gif " />
</div>
</div>
<div id="comment_logs ">
Loading comments...
<img src="loading.gif " />
<div>
</div>
</body>
</html>if you looking for responsive few. its quite simple just use max-width:100%; for comment box and it should be fixed
29
You can do it by 'class' or 'id' so that you have control on different field of same type. eg;textarea
add class='textstyle1' in your field
then, define textstyle1in your CSS, eg;
.textstyle1{ width:100%}
or, if you are using id, then use hashtag # , eg;
#textstyle1{ width:100%}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
