V2.2.1 Autocomplete inside a Popup page, result list partially visible (with vertical scrollbar)

1

Hi, I trying to build a popup with inside an autocomplete input field but when the search result list is rendered this is shown partially with respect to the page.

51
Screen Shot 2018-04-16 at 16.19.51.png658×986 27.1 KB

My html code is:

<div id="SimpleSearchPopup" class="popup SimpleSearchPopup">
<div class="view">
        <div id="SimpleSearchPage" class="page" data-name="SimpleSearchPage">
            <div class="navbar bg-color-orange">
                <div class="navbar-inner">
                    <div class="left">left</div>
                    <div class="center">title</div>
                    <div class="right">
                        <a href="#" class="link" data-event="button-my-location">
                            <i class="f7-icons ios-only">my_location</i><i class="material-icons md-only">my_location</i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="page-content">
                <div class="list no-hairlines no-hairlines-between mt2-i">
                    <form id="simpleSearchForm" autocomplete="off" onsubmit="event.preventDefault();">
                        <ul>
                            <li>
                                <div class="item-content item-input">
                                    <div class="item-input-wrap">
                                        <input name="autocomplete-simple-search" id="autocomplete-simple-search" type="text">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

and for js:

app.popup.create({
        content : ...
      }).open() ;

app.autocomplete.create({
        inputEl: this._autocomplete_input_element_id,
        openIn: 'dropdown',
        limit : 60,
        highlightMatches : false,
        updateInputValueOnSelect: false,
        closeOnSelect: true,
        preloader: true
});

Someone can help me to resolve this issue?
Thanks,
Valentina

2

Can’t see anything that can cause it. Try to inspect the layout to see what the reason behind it

3

Hi, thanks for your support.
I have narrowed the test area, using the following example where the issue present itself:

<div id="SimpleSearchPopup" class="popup SimpleSearchPopup">
    <div class="view">
        <div id="SimpleSearchPage" class="page" data-name="SimpleSearchPage">
            <div class="navbar bg-color-orange">
                <div class="navbar-inner">
                    <div class="left"></div>
                    <div class="title">title</div>
                    <div class="right"></div>
                </div>
            </div>

            <div class="page-content">
                <div class="list no-hairlines no-hairlines-between">
                    <form id="simpleSearchForm" autocomplete="off" onsubmit="event.preventDefault();">
                        <ul>
                            <li>
                                <div class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-input-wrap">
                                            <input name="autocomplete-simple-search" id="autocomplete-simple-search" type="text">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

the issue comes from the height calculation (source code, row 29076):

var maxHeight = $pageContentEl[0].scrollHeight - paddingBottom - (inputOffsetTop + $pageContentEl[0].scrollTop) - $inputEl[0].offsetHeight;

If I remove the navbar the problem does not occur.
Could it be a problem of the height calculation?
Thanks,
Valentina

4

I think to have found the problem, I have open a issue for this, see:
https://github.com/framework7io/framework7/issues/2350

Thanks,
Valentina

1 Like
5

Thanks, will check it

1 Like