bassjobsen / typeahead.js-bootstrap4-css Goto Github PK

View Code? Open in Web Editor NEW

90.0 7.0 87.0 17 KB

SCSS (Sass) / CSS code for using typeahead.js with Bootstrap 4

License: MIT License

CSS 100.00%

typeahead.js-bootstrap4-css's Introduction

Typeahead.js and Bootstrap 4

For Bootstrap 3 try typeaheadjs.css

typeahead.js

The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provided a rich typeahead experience.

Bootstrap 4

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by Mark Otto and Jacob Thornton, and maintained by the core team with the massive support and involvement of the community.

To get started, check out http://getbootstrap.com!

History

With Twitter Bootstrap 3 the typeahead plugin had been dropped. @mdo says: "in favor of folks using Twitter's typeahead. Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 4. The DOM structure of the dropdown menu used by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme. You can download the basic CSS here, or use the SCSS file to integrate it into your project. CSS and SCSS are build with the latest SCSS code of Bootstrap 4 (alpha). Code does not introduce new mixins and only extends Bootstrap's SCSS.

Note also the orginal typeahead plugin still works with Bootstrap 4.

Download

Download the latest typeaheadjs.css or typeaheadjs.scss.

How to use

CSS

Include the CSS file after Bootstrap's CSS in your HTML:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="typeaheadjs.css" rel="stylesheet">

Sass

Copy typeaheadjs.scss into your Bootstrap's SCSS folder
Import this file at the end of bootstrap.scss: @import "typeaheadjs.scss";
Recompile Bootstrap

Example

typeahead.js-bootstrap4-css's People

Contributors

Stargazers

Watchers

Forkers

chantarella insky2005 donpuerto hashdb rezacute jbwl asia653 rajuyohannan egiferdian bolinotkt haguilar91 inewxz reubenlouis64 salchee young-coder1 jacobwegner mellojl nhogle mtkuyucu angelosalatino mesarikaya meetkishan o2b3k pashachek davidthegray double0scotty thestanislav tigerman55 evyhernyta gtorresdx alissonrubim basaingeal abhilashak lievcin umangthapliyal acabrales christian-aid-admin ph0tonic unandwana sunnyw3c hboy8043 teuxsd16 inkalmptechnolabs aplear krunalcp devin0231577 stash86 yyw cristianojeda dimas4 adamlwatson youssefbenzaoui sroeurnsuon rubyrabelle geekosaurusr3x elderlk adisoe verduurzaming vasudevanep addicto nivekze aag147 ktfth awangku92 ponkung longyue1994 pjohnraj gofatoni colgibson cquinoneso diagonir yusronarif coryrobertsdev agenteand niz47 underdogdude airkjh masumrahmanhasan a751116023 xiadongxiang amirinns lukeraza tcoldmf pony1688 boskyle maxan

typeahead.js-bootstrap4-css's Issues

input-group-lg and input-group-sm Not Supported

I noticed input-group-lg and input-group-sm modifiers don't work out of the box.

To get these to work I added:

input-group.input-group-lg{
  span.twitter-typeahead{
    .form-control{
      @extend .form-control-lg;
      @include border-right-radius(0)
    }
  }
}

.input-group.input-group-sm{
  span.twitter-typeahead{
    .form-control{
      @extend .form-control-sm;
      @include border-right-radius(0)
    }
  }
}

Styles break when I use input group

It worked in https://github.com/bassjobsen/typeahead.js-bootstrap-css for Bootstrap 3.

<div class="input-group input-group-lg">
    <span class="input-group-btn">
      <button class="btn btn-primary" type="button"><i class="fa fa-location-arrow"></i></button>
    </span>
    <input id="typeahead" type="text" class="form-control">
</div>

Remove or fix Bootstrap import in scss file

The Bootstrap import in typeaheadjs.scss does not work with the current release of Bootstrap 4. The import states...

@import '../bootstrap4/bootstrap-4-dev/scss/bootstrap.scss';

..., but the current path should be...

@import '../bootstrap/scss/bootstrap';

Please either fix the import statement or remove it all together so people are in control of the exact Bootstrap import.

[ EDIT ]
It seems the import statement is removed in the scss file, but when adding the package with yarn the import is still there. How come?

On Bootstrap 4 Alpha 6 a variable is not there anymore

Love this little component... on alpha 6 the SASS variable $font-size-root doesn't exist anymore.
Using $font-size-base should also work but in the following calculation you are doing:

CURRENT:

top:(2 * $input-padding-y + $font-size-base*$line-height-base + 2 * $input-btn-border-width/**$font-size-root**) !important;

NEW:

top:(2 * $input-padding-y + $font-size-base*$line-height-base + 2 * **$input-btn-border-width**/**$font-size-base**) !important;

This however creates an error when compiling because $input-btn-border-width is in pixels and $font-size-base is in rem. Which of-course makes the division problematic.

Unfortunately my knowledge of the px : rem ratios in bootstrap is a bit limited. Thought I'd rather ask you what a proper solution is.

Style not working with Bootstrap 4 Beta

Hi, I'm triyng to render the following html:

<div class="input-group">
    <input class="typeahead form-control" type="text" />
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button" disabled><i class="fa fa-search"></i> Buscar</button>
    </span>
</div>

I'm referencing typeaheadjs.css. But this is what I get:

Can you help me please? Is my problem or is a CSS problem? Thank you very much in advance.