Typeahead box alignment issues

[hassanasad]

Hi - Typeahead was working perfectly in previous version, however i believe in one of the recent updates the alignment of the box that shows suggestions are messing up. The box now shows up after the input field and not below it.

Also i am not sure how to debug its CSS values as it closes as soon as i click anywhere inside my chrome inspector :)

Just for reference here is a screenshot: https://www.dropbox.com/s/zqxr1lzjc76zhy9/Screenshot%202016-12-24%2012.56.16.png?dl=0

[zkorz]

Same thing happening to me when updating:

[valorkin]

@zkorz @hassanasad are you using hybrid app too?

[hassanasad]

@valorkin - I am not sure what hybrid apps are. I am just using your package with Angular2 (2.4 to be exact) and angular-cli.

[olaf89]

I had same problem, i used .form-inline, after updating to latest version dropdown was aligned as showed on screenshots. Its not specific to hybrid apps.

[valorkin]

Can you give me peace of html with Typeahead
So I can reproduce it

[olaf89]

Sure,

<div class="form-inline">
    <div class="form-group">
        <label>label</label>
        <input type="text" id="input" class="form-control" [(ngModel)]="selected" [typeahead]="items">
    </div> 
</div>

[zkorz]

Mine works when I take away the class navbar-form from the parent span.

<span class="navbar-form" role="search">
    <form class="btn-group ng-valid ng-touched ng-dirty">
        <input class="form-control ng-valid ng-touched ng-dirty" name="search" placeholder="Search students or assignments..." type="search">
        <span class="glyphicon glyphicon-remove-circle searchclear"></span>
    </form>
</span>

[hassanasad]

Well looking at the mark up of other folks here, i believe its some issue that appears with bootstrap ? (I too am using it with bootstrap) - however it was working fine before the recent updates.

[valorkin]

Before, I was forcing position of container and internal elemement, now only container.
One way or another I will publish a fix today

[hassanasad]

Thanks @valorkin and happy holidays ;)

[valorkin]

@hassanasad thanks, you too ;)

[valorkin]

ok, issues was with form inline
so I fixed it and now you can use container="body" to attach typeahead to body ;)

[valorkin]

published as 1.1.16-10, please try and drop me a note

[hassanasad]

Works perfectly for me again!

Thanks @valorkin :)

[zkorz]

@valorkin the main form is working great now:

However on the extra small screen the typeahead is only showing the first choice, maybe sensing that there is not a lot of room below even though there really is beneath the navbar.

Here is the simplified markup:

<nav class="navbar navbar-default" role="navigation" style="">
    <div class="collapse navbar-collapse" aria-expanded="true" aria-hidden="false" style="display: block; overflow: visible; height: auto;">       
        <ul class="nav navbar-nav" id="navbarSearchBox">
            <li>
                <div class="col-xs-12">
                    <span class="navbar-form" role="search">
                        <form class="btn-group">
                            <input class="form-control" name="search" type="search">
                        </form>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</nav>

[valorkin]

@zkorz can you try container="body" ?

[zkorz]

@valorkin that was it. works perfectly now.

[aleksander351]

@valorkin is there any way to align the dropdown to the right?
Otherwise it overflows the page if the list items are very long.
I borrowed the image from @zkorz
I see that the typeahead directive has a protected placement property.