Textarea too large for page?

2018-06-03 23:48:00

<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..."             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>

    /* CSS Document */

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

I'm having an error with this comment box. How i can prevent this error? 在这里输入图像描述 I dont know where to put the @media screen here for when I resize my browser to smaller or larger.

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

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 :)

链接地址: http://www.djcxy.com/p/13238.html

上一篇: 动态集中嵌套vis

下一篇: Textarea太大的页面？