CODEWITHSUNDEEP
javascriptcssjquerytwitter-bootstrap
JK87
JK87

Reputation: 379

Multiple fields with Twitter's Bootstrap typehead inside a modal

I have a bootstrap modal with a form and two input fields that make use of bootstrap's typeahead. Both are working, but the results of the second one are not displayed correctly as you can see below:

enter image description here

Can someone help me on this one?

EDIT

JQUERY:

$(function(){

    var stopObjs = {};
    var stopNamen = [];

    $(".naamtypeahead").typeahead({
        source: function ( query, process ) {

            $.ajax({
                url: '../includes/js/autocompletenaam.php',
                type: 'GET',
                dataType: 'json',
                data: 'naam=' + query
                ,cache: false
                ,success: function(data){

                    stopObjs = {
                    };
                    stopNamen = [];

                    _.each( data, function(item, ix, list){

                        stopNamen.push( item.naam )

                        stopObjs[ item.naam ] = item.adres;
                    });

                        process( stopNamen );
                }
            });
        }
        , updater: function ( adres) {

            $( ".adres" ).val( stopObjs[ adres ] );

            return adres;
        }
    });
});

Upvotes: 3

Views: 3436

Answers (2)

CHB
CHB

Reputation: 45

I've found this problem, too. I've correct by using this code:-

top: (pos.top + pos.height + this.$element.offsetParent().scrollTop())

so this should correct position on all scrolling div, which typeAhead be inside it.

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49054

I found the same problem (looks like some kind of a bug, see: https://github.com/twitter/bootstrap/pull/8436 for a possible fix). The menu with options gets a css top with position absolute. When using the typeahead in a modal the scroll height is not used in the calculation of the top. This issue has been fixed in: https://github.com/bassjobsen/Bootstrap-3-Typeahead

The scrolling of the modal cause the problem not the use of multiple fields (with typeahead).

The best solution i found (update!):

function scrollHeight()
{
  return $('.modal-body').scrollTop();
} 

$.fn.typeahead.Constructor.prototype.show = function () {
      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

      this.$menu
        .insertAfter(this.$element)
        .css({
          top: (pos.top + pos.height + scrollHeight.call())
        , left: pos.left
        })
        .show()

      this.shown = true
      return this

    }

This will overwrite the show function of the typeahead class and adds + $('.modal-body').scrollTop() to it. and adds a call to scrollHeight to set the height dynamic.

See also update : http://bootply.com/66845 (remove the javascript to see the problem)

update 20 aug

The code above only works with one modal (only one .modal-body class). For two or more modals use the code below:

$.fn.typeahead.Constructor.prototype.show = function () {
      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })                    
      this.$menu
        .insertAfter(this.$element)
        .css({
          top: (pos.top + pos.height + this.$element.closest('.modal-body').scrollTop())
        , left: pos.left
        })
        .show()

      this.shown = true
      return this

}

Twitter's Typeahead and Twitter's Bootstrap 3

Twitter's Bootstrap 3 drops bootstrap-typeahead.js and tells to use Twitter's Typeahead (http://twitter.github.io/typeahead.js/). See also: https://github.com/twitter/bootstrap/issues/7805. Switching to Twitter's Typeahead (with Twitter's Bootstrap 2.x) also seems to fix your problem. But ... To use Twitter's Typeahead with Bootstrap you need to add some extra stylesheet: https://github.com/twitter/typeahead.js#bootstrap-integration. When using this in a modal with multiple (typeahead) form fields the form fields will be over the dropdown menu. To fix this add a z-index:1 to your stylesheet:

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
   z-index: 1;
}

See also: https://github.com/jharding/typeahead.js-bootstrap.css/pull/13

Twitter's Bootstrap 3

The Bootstrap integration of Twitter's Typeahead for Twitter's Bootstrap 3 don't work well at the moment (10 july 2013)

Upvotes: 2

Related Questions