html - typeahead 和基础结果似乎被切断

Question

所以我有这个 html:

<form name="searchForm" role="form" ng-submit="controller.navigate()">
    <div class="row collapse">
        <div class="small-10 columns typeahead-icon">
            <!-- If we take the filter out, it will match all parts of the object -->
            <input type="text" placeholder="Search" ng-model="controller.selected" typeahead="item.value + ' ' + item.title + ' ' +  item.detail for item in controller.search($view)" />
            <i ng-show="controller.autoComplete.loading" class="fa fa-spinner fa-pulse"></i>                        
        </div>
        <div class="small-2 columns">
            <button type="submit" class="button postfix">Go</button>
        </div>
    </div>
</form>

如您所见，我正在使用一个内联表单来显示我的预输入控件。问题是，对于具有 position: relative 的 .columns，包含结果的列表隐藏在列 div 的末尾后面。由于我的设计，我无法向 div 添加溢出。我想要的是结果列表出现在所有内容的顶部。 我创建了一个代码笔来向您展示正在发生的事情:

http://codepen.io/r3plica/pen/gpoXeg

有人知道我该怎么做吗？

Answer 1

虽然这需要一些时间来解决，但答案很简单。 我所要做的就是添加:

overflow: visible;

到我不想改变高度的父元素(在本例中为 .tile.block)，它解决了这个问题。 上面的代码笔已更改以反射(reflect)此更改。