CODEWITHSUNDEEP
htmlcsstwitter-bootstraptypeahead
Andy
Andy

Reputation: 5395

Bootstrap Typeahead width with long text

I have 4 inputs which are in .col-md-3 as follows:

<div class="row">
    <div class="col-md-3">
        <input id="input1" type="text">
    </div>
    <div class="col-md-3">
        <input id="input2" type="text">
    </div>
    <div class="col-md-3">
        <input id="input3" type="text">
    </div>
    <div class="col-md-3">
        <input id="input4" type="text">
    </div>
</div>

I'm using the Typeahead plugin. My js works such that Typeahead only works on #input3:

$('#input3').typeahead({
      ajax: '/getdata.php'
});

Some of the text which is being returned is very long (e.g. over 300 characters). The problem with this is that it doesn't fit into the Typeahead dropdown box. It "overlaps" the outside of the box like this:

enter image description here

I've read extending the width of bootstrap typeahead to match input field but none of these fix it for me. I'm wondering if they're deprecated solutions.

Bootstrap version is 3.3.7

Upvotes: 3

Views: 3484

Answers (4)

Chuck D
Chuck D

Reputation: 1809

This fixed my issue:

.tt-menu {
   width: fit-content;
}

Upvotes: 0

Jaleel Ahmed
Jaleel Ahmed

Reputation: 65

I was able to solve this by adding css style by setting the width to max-content:

.dropdown-menu {
  width: max-content;
  text-align: left;
}

Upvotes: 1

Bryan Labuschagne
Bryan Labuschagne

Reputation: 213

Try adding a CSS style:

white-space: normal;

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28563

If you add overflow-x: hidden; (or auto/scroll if you'd like to be able to scroll), that should work?

Hope the overflow attribute works for you.

EDIT: after a bit of googling, I found an article that documented that Typeahead has had issues with design [pertains to inputs in particular] during development. there. There is an article here that notes it at the end and how it fixed it at the end.

Note: typahead js has design issue while we use it with twitter bootstrap 3. This tutorial i have added that fixes in css and also you must add following jquery script based on input control size

JavaScript

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Also found this 'fix' on github, created by 'hyspace' - typeahead.js/ bootstrap3.less

Here is a jsfiddle example of the code that the fix is based upon. I forked it to adjust the entries to have long text that in your case would overflow. As you will see, in the typeahead box in the fiddle, instead of extending beyond the box, the text wraps.

Press 'H' in the second box to see an example of this.

(Do note that the fiddle only uses the code that the fix is based on - I haven't used the typeahead.js-bootless3.less, but I doubt if you have to hard-code the values! Actually, having read the page on github more closely, it's the style more than anything that has been adjusted, rather than the js.)

Upvotes: 1

Related Questions