Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap: unable to make the div to be scrollable

I have following code where I have text input for user to enter information and panel above the text input to display what user typed. I want the panel above the text field to be set to some height and as it gets overflowing it should be scrollable. 

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

In addition I want section above to be fix and not expand to the bellow section.

<div class="row-fluid">
  <div class="span4">
    testet seetsetsetset
  </div>
  <div class="span4">
    testsetstse estsetset
  </div>
  <div class="span4">
    setsetetsets setsetset
  </div>
</div>

I am using the bootstrap version publish in this tutorial: http://taskmessenger.com/blog/index.php/coderdojo-twitter-bootstrap-lesson-2-create-the-layout-page/

Also following css is been used to format the user input and the results of the reply, Was not able to do it in bootstrap way it would be great if few pointers can be given on that too: 

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

2

Answers


  1. 0 
    max-height:10;

    Is not valid value, there should be “px”, “em”, “cm” or “%” at the end. See if that helps.

    Login or Signup to reply.
  2. 0

    The height value you set needs to be a measurable value (ie. px, em, %, etc.). Further, you only need to declare it for one of the containers. You can also hide the scrollbar when it isn’t needed by setting overflow-y to auto instead of scroll.

    You also have invalid CSS. There is no center property in CSS. I’ve commented out in my example.

    The only change I made was to change

    <div class="row-fluid" style="max-height:10;overflow-y: scroll;">
  <div class="panel-body" style="max-height:10;overflow-y: scroll;">

    to 

    <div class="row-fluid" style="max-height:50px;overflow-y: auto;">
    <div class="panel-body">

    Here’s the fully code:

    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;  // This is invalid */
}

#input {
    margin-top: 0.5em;
}

#inbox .message {
    padding-top: 0.25em;
}

#nav {
    float: right;
    z-index: 99;
}
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row-fluid" style="max-height:50px;overflow-y: auto;">
    <div class="panel-body">
        {% 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>
<div class="row-fluid">
    <div class="span4">
        testet seetsetsetset
    </div>
    <div class="span4">
        testsetstse estsetset
    </div>
    <div class="span4">
        setsetetsets setsetset
    </div>
</div>

    Note: Here’s a Bootply to better demonstrate the appearance: http://www.bootply.com/1LGjrUomIl

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search