Bootstrap 4 no highlight of element in list

[Serhioromano]

There is list like this

<ul class="typeahead dropdown-menu" role="listbox" style="top: 38px; left: 0px; display: none;"> 
   <li class="active">
        <a class="dropdown-item" href="#" role="option"><strong>Gr</strong>apes</a>
    </li>
</ul>

It adds an active element to LI but in BS 4 you have to add an active element to a link. I suggest to add it to both.

[aaronbarzilai]

Any chance you could provide an example of how to do that @Serhioromano? Would be much appreciated. Thanks!

[Serhioromano]

@aaronbarzilai to do what?

[divadsn]

Not sure if any of you have ever read the source file:
https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js#L65

[Edig]

This is because the css class changes in bootstrap 4 I create this class as "work-around"

`
.typeahead .active, .dropdown-item:hover {
z-index: 2;
background-color: #007bff !important;
border-color: #007bff !important;
}

.typeahead .active .dropdown-item {
color: white !important;
}
`

[divadsn]

This is because the css class changes in bootstrap 4 I create this class as "work-around"

`
.typeahead .active, .dropdown-item:hover {
z-index: 2;
background-color: #007bff !important;
border-color: #007bff !important;
}

.typeahead .active .dropdown-item {
color: white !important;
}
`

Well if you would have read the source code I linked in my reply above, you would notice that you only need to set the theme option to bootstrap4 on initialize.

Therefor the entire issue is obsolete and to be closed.

@bassjobsen please include that option in the docs on the README.

https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js#L742

[Edig]

@divadsn Yes I try it and it didn't work for me, or maybe I',m calling bad the theme

newArticle.find('.article-input').typeahead({ source: articles, autoSelect: true, fitToElement: true, showHintOnFocus: true, theme: 'bootstrap4' });

[divadsn]

@Edig the preview from my reply is done using the following code:

    $('#search').typeahead({
        items: 10,
        minLength: 2,
        delay: 200,
        theme: 'bootstrap4',
        fitToElement: true,
        changeInputOnSelect: false,
        changeInputOnMove: false,
        source: function(query, process) {
            $.get('./search?q=' + query, function(data) {
                return process(data);
            });
        },
        ...
    });

Using recent minified version from this repo.

[aaronbarzilai]

Thanks. I didn't understand the theme option, I just used it and it worked great. Appreciate it! Aaron

…

On Mon, Apr 27, 2020 at 1:52 PM David Sn ***@***.***> wrote: @Edig <https://github.com/Edig> the preview from my reply is done using the following code: $('#search').typeahead({ items: 10, minLength: 2, delay: 200, theme: 'bootstrap4', fitToElement: true, changeInputOnSelect: false, changeInputOnMove: false, source: function(query, process) { $.get('./search?q=' + query, function(data) { return process(data); }); }, ... }); — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#380 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADYZXB5PGD2KIRIZT4I4QGTROXA4ZANCNFSM4IVUWFJA> .