I'm working with a code that includes a text input for users to enter information, along with a panel above the text input that displays what the user has typed. I want the height of the panel above the text field to be set so that it becomes scrollable when it overflows.
<div class="row-fluid" style="max-height:10;overflow-y: scroll;">
<div class="panel-body" style="max-height:10;overflow-y: scroll;">
{% for message in messages %} {% module Template("message.html", message=message) %} {% end %}
</div>
</div>
<div class="row-fluid">
<form action="/a/message/new" method="post" id="messageform" class="span12">
<table>
<tr>
<td>
<input name="body" id="message" style="width:500px">
</td>
<td style="padding-left:5px">
<input type="submit" value="{{ _(" Post ") }}">
<input type="hidden" name="next" value="{{ request.path }}">{% module xsrf_form_html() %}</td>
</tr>
</table>
</form>
</div>
Additionally, I want the section above to remain fixed and not expand into the below section.
<div class="row-fluid">
<div class="span4">
testet seetsetsetset
</div>
<div class="span4">
testsetstse estsetset
</div>
<div class="span4">
setsetetsets setsetset
</div>
</div>
The Bootstrap version used in this tutorial can be found at the following link:
I have also applied the following CSS to format the user input and reply results. If there are any suggestions on how to achieve this in a more Bootstrap-friendly way, I would appreciate some guidance:
body {
background: white;
margin: 10px;
}
body,
input {
font-family: sans-serif;
font-size: 10pt;
color: black;
}
table {
border-collapse: collapse;
border: 0;
}
td {
border: 0;
padding: 0;
}
#body {
position: absolute;
bottom: 10px;
center: 10px;
}
#input {
margin-top: 0.5em;
}
#inbox .message {
padding-top: 0.25em;
}
#nav {
float: right;
z-index: 99;
}