tab组件中嵌入下拉列表会导致列表显示不全 #833

Closed
chunsh opened this Issue Feb 8, 2016 · 4 comments

Projects

None yet

2 participants

@chunsh
chunsh commented Feb 8, 2016

tab组件中嵌入下拉列表会导致列表显示不全
以下是代码

<div style="margin:0 10px" class="am-tabs" data-am-tabs="{noSwipe: 1}">
    <ul class="am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active"><a href="#tab1">New</a></li>
        <li><a href="#tab2">xxx</a></li>
    </ul>
    <div class="am-tabs-bd">
        <div class="am-tab-panel am-fade" id="tab2">
            <code>Head
            </code>
        </div>
        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
<FORM>
    <table class="am-table am-table-bordered am-table-striped am-text-nowrap">
        <thead>
        <tr>
            <th style="min-width:200px">zzzz</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr style="" id="mb">
            <td>
                <div class="am-input-group" data-am-dropdown>
                                            <span class="am-input-group-btn">
                                                <button class="am-dropdown-toggle am-btn" data-am-dropdown-toggle>
                                                    <span class="am-icon-caret-down"></span>
                                                </button>
                                            </span>
                    <ul class="am-dropdown-content">
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">test</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr></tr>
        </tbody>
        </table>
</FORM>
            </div></div></div>
@minwe
Contributor
minwe commented Feb 22, 2016

Tab 容器为了动画效果实现加了 overflow: hidden,应该是这个问题。

@chunsh
chunsh commented Feb 27, 2016

为何我在div加了style="overflow:visible;"依然无法显示呢?

@minwe
Contributor
minwe commented Feb 29, 2016

加:

.am-tabs-bd {
  overflow:visible;
}

不过可能会产生其他问题。

@minwe minwe added the question label Mar 28, 2016
@minwe
Contributor
minwe commented Mar 28, 2016

暂时关闭,还有问题再打开。

@minwe minwe closed this Mar 28, 2016
@minwe minwe added the js-tabs label Mar 28, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment