How to allow selection via icon on dropdown

Question

I'm using fuelux with bootstrap to create some nice selections via drop downs.

In the drop down I'm placing icons via font-awesome. I've managed to get the icons to render fine and when selected, the icon is included as selected.

My problem is when I click on an icon in an activated drop down. The selection occurs but is set to nothing. I have to click on either the text or white space around the icon on the dropdown list.

Does anyone know how to fix this?

Here is a JS Fiddle that demonstrates the problem:

http://jsfiddle.net/metalskin/xye7zj3n/

The code in the jsfiddle is as follows:

<div class="row">
    <div class="col-md-12">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-4 control-label" for="title">Title</label>
                <div class="col-md-6">
                    <input 
                      id="title" 
                      name="title" 
                      type="text" 
                      placeholder="Enter the title" 
                      class="form-control input-md"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="icon">Icon</label>
                <div class="col-md-6 fuelux">
                    <div 
                      class="btn-group selectlist" 
                      data-initialize="selectlist" 
                      id="iconSelectlist">
                        <button 
                          class="btn btn-default dropdown-toggle" 
                          data-toggle="dropdown" 
                          type="button">
                          <span class="selected-label">
                              <a href="#"><i class="fa fa-users fa-lg"></i></a>
                          </span>
                          <span class="caret"></span>
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li data-value="a">
                                <a href="#"><i class="fa fa-users fa-lg"></i> Users</a>
                            </li>
                            <li data-value="b">
                                <a href="#"><i class="fa fa-camera fa-lg"></i> Camera</a>
                            </li>
                        </ul>
                        <input 
                          class="hidden hidden-field" 
                          name="mySelectlist" 
                          readonly="readonly" 
                          aria-hidden="true" 
                          type="text"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

CSS:

.container-fluid {
    margin-top: 10px;
}

.row {
    margin: auto
}
.row.no-pad {
    margin-right:0;
    margin-left:0;
}
.row.no-pad >[class*='col-'] {
    padding-right:0;
    padding-left:0;
}
ul.dropdown-menu-form {
    color: black;
}
.selected-label {
    color: #555;
}
.dropdown-toggle {
    border-color: #ccc;
}
.dropdown-toggle:focus {
    border-color: #ccc;
}
.dropdown-toggle:hover {
    border-color: #ccc;
}
.caret {
    color: #333;
}

External resources:

http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/css/bootstrap.min.css
http://exacttarget.github.io/fuelux/assets/vendor/fuelux/dist/css/fuelux.css
http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/js/bootstrap.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js

DTD:

HTML 5

Normalised CSS:

true

Body Tag:

<body class="fuelux">

And jQuery 2.x (edge)

score 1 · Accepted Answer · answered Sep 25 '14 at 15:45

1

It's a bug. Previously only the <a> was allowed as a clickable child element. Icon support was a recent addition. Please see issue and pull request, Selectlist is empty when icon is clicked instead of text label This should be merged into master with release 3.0.3.

answered Sep 25 '14 at 15:45

Interactive Llama

780
4
10

Ahh thank you. I suspected it was a defect as further testing demonstrated that if I used 3.0.0 it allowed selection of the icon, just didn't show the icon in the selection result. Was going to investigate further today and see if it was a defect. :-) – Metalskin Sep 25 '14 at 20:49

How to allow selection via icon on dropdown

1 Answers1