Dropdown module – Codelibrary

Basic example

A very basic HTML so that you can see how the component works and to be able to edit it easily.

<div class="cl-dropdown"
   ng-init="dropdown.open = false">
  <button ng-click="dropdown.open = !dropdown.open"
          ng-class="{'cl-dropdown-button-open': dropdown.open == true}"
          id="dropdown-button"
          class="cl-dropdown-button"
          aria-haspopup="true"
          aria-expanded="{{ dropdown.open == true }}">
      Menu
  </button>
  <div class="cl-dropdown-menu"
       ng-class="{'cl-dropdown-visible' : dropdown.open == true }"
       aria-labelledby="dropdown-button">
      <div class="cl-dropdown-title">
          Where to?
      </div>
      <div class="cl-dropdown-items">
          <a class="cl-dropdown-item" href="#" ng-click="">
              Explore data
          </a>
          <a class="cl-dropdown-item" href="#" ng-click="">
              Create map
          </a>
          <a class="cl-dropdown-item" href="#" ng-click="">
              Create chart
          </a>
      </div>
  </div>
  <div class="cl-dropdown-backdrop"
       ng-click="dropdown.open = ''"
       ng-show="dropdown.open != ''"></div>
</div>

/* Dropdown menu with pill styling
   ========================================================================== */
.cl-dropdown {
    display: inline-block;
    margin: 13px 0 26px 0;
    position: relative;
}
/* Button */
.cl-dropdown-button {
    font-size: 1rem;
    color: var(--text);
    border: 1px solid #cbd2db;
    border-radius: 2rem;
    background: #FFFFFF;
    padding: .37rem 1rem;
    margin-right: 6px;
    transition: all .2s;
}
.cl-dropdown-button:hover,
.cl-dropdown-button:focus {
    color: var(--links);
    border-color: var(--links);
}
.cl-dropdown-button-open {
    border-color: var(--links);
    box-shadow: 0 0 0 3px rgba(20, 46, 123, .2);
}
.cl-dropdown-button-active {
    color: var(--links);
    border-color: var(--links);
    background-color: rgba(20, 46, 123, 0.1);
}
/* Dropdown styling */
.cl-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #dee5ef;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
    max-width: 350px;
    overflow-x: auto;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 11;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
}
.cl-dropdown-visible {
    opacity: 1;
    visibility: visible;
    top: 38px;
}
/* Dropdown items */
.cl-dropdown-menu {
    padding: 26px 0;
}
.cl-dropdown-title {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 26px;
}
.cl-dropdown-items {
    list-style: none;
    padding: 0 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}
.cl-dropdown-item {
    font-size: 1rem;
    display: block;
    margin-top: 13px;
}
.cl-dropdown-item:hover {
    text-decoration: none;
}
.cl-dropdown-input {
    margin-right: 4px;
}
.cl-dropdown-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
}
/* Backdrop */
.cl-dropdown-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    z-index: 10;
}

Use this component to have a more stylized look for your filters, for example instead of using a select.

Dataset in use: shanghai-world-university-ranking (See it on public domain)

Fields in use:

country	geo_shape
United Kingdom	“{““type”": ““MultiPolygon””, ““coordinates”": [[[[-5.6619486149, 54.5546031765], [-6.1978…
United States	“{““type”": ““MultiPolygon””, ““coordinates”": [[[[-155.54211, 19.08348], [-155.68…
United States	“{““type”": ““MultiPolygon””, ““coordinates”": [[[[-155.54211, 19.08348], [-155.68…
United States	“{““type”": ““MultiPolygon””, ““coordinates”": [[[[-155.54211, 19.08348], [-155.68…

<div class="ods-box">
    <!-- Important here: the disjunctive (multi filter) mode for the facet to still display other values even if one is selected -->
    <ods-dataset-context context="universities"
                         universities-domain="public"
                         universities-dataset="shanghai-world-university-ranking"
                         universities-parameters="{'disjunctive.country':true}">
        <div class="row">
            <div class="col-sm-4"
                 ods-facet-results="countries"
                 ods-facet-results-context="universities"
                 ods-facet-results-facet-name="country"
                 ods-facet-results-sort="alphanum">
                <h3>
                    Select a country to view universities
                </h3>
                <!-- Dropdown starts here -->
                <div class="cl-dropdown"
                     ng-init="dropdown.open = ''">
                    <button ng-click="dropdown.open = (dropdown.open == 'country' ? '' : 'country');"
                            ng-class="{'cl-dropdown-button-active': universities.parameters['refine.country'],
                                      'cl-dropdown-button-open': dropdown.open == 'country'}"
                            id="dropdown-button"
                            class="cl-dropdown-button"
                            aria-haspopup="true"
                            aria-expanded="{{ dropdown.open == 'country' }}">
                        {{ (!universities.parameters['refine.country'] ? 'Country' : universities.parameters['refine.country'] | capitalize) }}
                    </button>
                    <div class="cl-dropdown-menu"
                         ng-class="{'cl-dropdown-visible' : dropdown.open == 'country' }"
                         aria-labelledby="dropdown-button">
                        <div class="cl-dropdown-title">
                            Country
                        </div>
                        <ul class="cl-dropdown-items">
                            <li class="cl-dropdown-item">
                                <label class="cl-dropdown-label">
                                    <input ng-model="universities.parameters['refine.country']"
                                           ng-value="All"
                                           name="country"
                                           type="radio"
                                           class="cl-dropdown-input" />
                                    All countries
                                </label>
                            </li>
                            <li ng-repeat="country in countries"
                                class="cl-dropdown-item">
                                <label class="cl-dropdown-label">
                                    <input ng-model="universities.parameters['refine.country']"
                                           ng-value="country.path"
                                           name="country"
                                           class="cl-dropdown-input"
                                           type="radio" />
                                    {{ country.path | capitalize }}
                                </label>
                            </li>
                        </ul>
                        {{universities.parameters['refine.country'] = (universities.parameters['refine.country'] == 'All' ? undefined : universities.parameters['refine.country']); ''}}
                    </div>
                    <div class="cl-dropdown-backdrop"
                         ng-click="dropdown.open = ''"
                         ng-show="dropdown.open != ''"></div>
                </div>
                <!-- Dropdown ends here -->
            </div>
            <div class="col-sm-8">
                <ods-map context="universities"></ods-map>
                <ods-table context="universities"></ods-table>
            </div>
        </div>
    </ods-dataset-context>
</div>

/* Dropdown menu with pill styling
   ========================================================================== */
.cl-dropdown {
    display: inline-block;
    margin: 13px 0 26px 0;
    position: relative;
}
/* Button */
.cl-dropdown-button {
    font-size: 1rem;
    color: var(--text);
    border: 1px solid #cbd2db;
    border-radius: 2rem;
    background: #FFFFFF;
    padding: .37rem 1rem;
    margin-right: 6px;
    transition: all .2s;
}
.cl-dropdown-button:hover,
.cl-dropdown-button:focus {
    color: var(--links);
    border-color: var(--links);
}
.cl-dropdown-button-open {
    border-color: var(--links);
    box-shadow: 0 0 0 3px rgba(20, 46, 123, .2);
}
.cl-dropdown-button-active {
    color: var(--links);
    border-color: var(--links);
    background-color: rgba(20, 46, 123, 0.1);
}
/* Dropdown styling */
.cl-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #dee5ef;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.15);
    max-width: 350px;
    overflow-x: auto;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 11;
    white-space: nowrap;
    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
}
.cl-dropdown-visible {
    opacity: 1;
    visibility: visible;
    top: 38px;
}
/* Dropdown items */
.cl-dropdown-menu {
    padding: 26px 0;
}
.cl-dropdown-title {
    font-size: 1.3rem;
    color: var(--text);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 26px;
}
.cl-dropdown-items {
    list-style: none;
    padding: 0 26px;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 180px;
    overflow-y: auto;
}
.cl-dropdown-item {
    font-size: 1rem;
    display: block;
    margin-top: 13px;
}
.cl-dropdown-item:hover {
    text-decoration: none;
}
.cl-dropdown-input {
    margin-right: 4px;
}
.cl-dropdown-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 2px;
}
/* Backdrop */
.cl-dropdown-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    z-index: 10;
}

Components - Dropdown module

Basic example

Dropdown as filter