CODEWITHSUNDEEP
htmltwitter-bootstrap
jason_kang
jason_kang

Reputation: 29

How to make search box results into scroll bar in Bootstrap?

I'm designing a search page with Bootstrap. Can anyone give some hint on how to change the drop-down search box to a scrollable one(i.e. the box size is fixed, and people can scroll over the possible results)? Img:https://www.dropbox.com/s/a1kyotwvcj0jcft/Screen%20Shot%202013-11-16%20at%2011.38.45%20PM.png The relevant code is:

@helper.form(action = routes.Figure6.submit(), 'class -> "form-group form-search subscribe-container", 'method -> "get") {
        <div class="input-group @("has-error".when(appForm.hasErrors))">

            <input type="hidden" name="id" id="id" value="@appForm("id").value" required>
            <input type="text" name="appName" id="appName" class="form-control input-lg"
                placeholder="App name" required>
            <span class="input-group-btn">
                <button class="btn btn-success input-lg" type="submit">Go!</button>
            </span>

        </div>
        <span class="help-block">
            @if(appForm.error("appName") != null) {
                @appForm.error("appName").message
            }
        </span>
    }
    <!-- Modal -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Alert</h4>
          </div>
          <div class="modal-body">
            Sorry, App: @appForm("appName").value @appForm("id").value  is not found in the database.
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="footer align-center">
        <span class="copyright transparent lighting-border rounded-corner">
            &copy; 2013 All rights reserved. </span>
    </div>
</div>

Upvotes: 0

Views: 3013

Answers (1)

Vahid Taghizadeh
Vahid Taghizadeh

Reputation: 997

Try this Tutorial please for your solution :

http://eichefam.net/2012/04/12/scrollable-menus-in-bootstrap/

Upvotes: 1

Related Questions