CODEWITHSUNDEEP
javascripthtmlcsszurb-foundation
user1625066
user1625066

Reputation:

Foundation custom select not working inside button bar

I am attempting to use Zurb Foundation 4 in my website. I am using the "custom forms" feature of foundation which applies special styling to form elements as described in this link.

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

The trouble I am having is that the HTML select elements don't work when embedded inside a button bar. For example, the following code works

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

But the same code embedded inside a button group does not work

<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>

I have created a JSfiddle which demonstrates the problem

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

Any ideas on what could be causing this? My initial thought was that the dropdown of the select is being hidden by some outer CSS class overriding the depth but I have had no luck identifying the offending element.

Upvotes: 1

Views: 3042

Answers (5)

zmanc
zmanc

Reputation: 5429

I cannot believe I missed this, but here is a much better solution.

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

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

Upvotes: 0

zmanc
zmanc

Reputation: 5429

What is going on is the button group UL and LI are smaller than you are expecting them to be. The custom form select element has a 100% width, however since the UL and the LI for the button-bar are much smaller than 100% width, 50px if I remember right, then your select will only be that wide.

If you add the css below you should be good to go. If you are planning on using button groups other places you can add another class to do the same thing. 

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

Fiddle Link for Reference

Image

Upvotes: 0

Ashish Sharma
Ashish Sharma

Reputation: 342

Probably you should see these two links::

Drop-down list inside add button or panel

Through JavaScript

Upvotes: 0

Ashish Sharma
Ashish Sharma

Reputation: 342

Include this css in CSS box.this should do the work.

/* 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);

but do have in mind that your classname name should equate with the css tags. So first you will have to equate them

And check this link if you are interested in making it through JavaScript click here

Upvotes: 1

Hossein J
Hossein J

Reputation: 1019

Simply try like this (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>

Upvotes: 0

Related Questions