Question

我试图在我的网站上使用Zurb Foundation 4。我正在使用基础的“自定义表单”功能，它使用特殊样式来形成此链接中描述的元素。

http://foundation.zurb.com/docs/components/custom-forms.html

我遇到的麻烦是嵌入在按钮栏中时HTML选择元素不起作用。例如，以下代码可以使用

<form class="custom">
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
 </form>

但嵌入在按钮组中的相同代码不起作用

<div class="button-bar">
<ul class="button-group">
            <li>
                <form class="custom">
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </form>
            </li>
</ul>
</div>

我创建了一个演示问题的JSfiddle

http://jsfiddle.net/5JbZB/4/

关于可能导致这种情况的任何想法？我最初的想法是，选择的下拉列表被一些覆盖深度的外部CSS类隐藏，但我没有运气识别出有问题的元素。

Answer 1

在CSS框中包含此css。这应该可以完成。

/* We use these to controls height and width styles. */
$f-dropdown-max-width: 200px;
$f-dropdown-height: auto;
$f-dropdown-max-height: none;
$f-dropdown-margin-top: 2px;

/* We use this to control the background color */
$f-dropdown-bg: #fff;

/* We use this to set the border styles for dropdowns. */
$f-dropdown-border-style: solid;
$f-dropdown-border-width: 1px;
$f-dropdown-border-color: darken(#fff, 20%);

/* We use these to style the triangle pip. */
$f-dropdown-triangle-size: 6px;
$f-dropdown-triangle-color: #fff;
$f-dropdown-triangle-side-offset: 10px;

/* We use these to control styles for the list elements. */
$f-dropdown-list-style: none;
$f-dropdown-font-color: #555;
$f-dropdown-font-size: emCalc(14px);
$f-dropdown-list-padding: emCalc(5px) emCalc(10px);
$f-dropdown-line-height: emCalc(18px);
$f-dropdown-list-hover-bg: #eeeeee;
$dropdown-mobile-default-float: 0;

/* We use this to control the styles for when the dropdown has custom content. */
$f-dropdown-content-padding: emCalc(20px);

但请注意，您的类名称应与css标记等同。首先，你必须将它们等同于

如果您有兴趣通过JavaScript click here

制作，请查看此链接

Answer 2

只需尝试这样（http://jsfiddle.net/5JbZB/1/）：

<div class="row">
    Button bar with Zurb Foundation's custom select
    <div class="button-bar">
        <form class="custom">
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </form>
        <ul class="button-group">
            <li><a href="#">button</a></li>
        </ul>
    </div>
</div>

Answer 3

你应该看到这两个链接::

Drop-down list inside add button or panel

通过JavaScript

Answer 4

正在发生的事情是按钮组UL和LI小于您期望的按钮组。自定义表单选择元素的宽度为100％，但由于按钮栏的UL和LI远小于100％宽度，如果我没记错，则为50px，那么您的选择将只有那么宽。

如果你添加下面的CSS，你应该很高兴。如果您计划在其他地方使用按钮组，则可以添加另一个类来执行相同的操作。

.button-group {
    width:100%;
}
.button-group li {
    width:100%;
}

Fiddle Link for Reference

Image

Answer 5

我无法相信我错过了这个，但这是一个更好的解决方案。

.button-group .custom.dropdown{
  overflow:visible;
}

http://jsfiddle.net/5JbZB/7/

基础自定义选择在按钮栏内不起作用

5 个答案: