<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; }
答案 0 :(得分:4)
不要在HTML代码中使用静态样式。尽可能将其删除到CSS定义中。 textarea的宽度为100%应该没问题。
/* 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>
答案 1 :(得分:1)
如果你寻找反应灵敏的少数。它非常简单,只需使用max-width:100%;
作为评论框即可修复
答案 2 :(得分:1)
您可以使用
textarea.your-class {
max-width: 100%;
}
答案 3 :(得分:0)
不要使用textarea的内联宽度属性,而是使用 rows =&#34; 4&#34; cols =&#34; 50&#34; 宽度和高度的属性。为了使其响应使用宽度单位&#34;%&#34;相反&#34; px&#34;
services.AddMvc()
.AddJsonOptions(options => {
options.SerializerSettings.Error = (object sender, Newtonsoft.Json.Serialization.ErrorEventArgs args) =>
{
//Log args.ErrorContext.Error details...
};
});
希望这将涵盖您的所有要求:)
答案 4 :(得分:0)
您可以通过'class'或'id'进行操作,以便您可以控制同一类型的不同字段。例如; textarea
在您的字段中添加class='textstyle1'
然后,在CSS中定义textstyle1,例如;
.textstyle1{ width:100%}
或者,如果您使用的是id
,则使用井号标签#
,例如;
#textstyle1{ width:100%}