Reputation: 95

Textarea too large for page

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>

Upvotes: 6

Answers (5)

Alireza Sabahi

Reputation: 675

you can use

 textarea.your-class {
      max-width: 100%;
 }

Upvotes: 1

Abner Stan.

Reputation: 121

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%}

Upvotes: 1

Sandeep Saroha

Reputation: 72

Don't use inline width attribute for textarea, instead play with rows="4" cols="50" attribute for width and height. For make it responsive use width unit "%" instead "px"

<textarea rows="4" cols="50"></textarea>

Hope this will cover all your requirement :)

Upvotes: 0

Eytibi

Reputation: 545

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>

Upvotes: 7

Mukesh Kumar

Reputation: 65

if you looking for responsive few. its quite simple just use max-width:100%; for comment box and it should be fixed

Upvotes: 2

Textarea too large for page

Answers (5)

Related Questions