CODEWITHSUNDEEP
htmljquerycssbootstrap-4
Simon
Simon

Reputation: 61

Create a Bootstrap select with options on an icon span

I've created a blade with a signboard (screenshot). The signboard has a foreach containing each created column with its name, color and assigned cards.

For sorting these cards I have added an icon next to each column title. I'd like to be able to open a select and see it's options when clicking on the sort-icon.

I've tried to add a hidden select element and used .selectpicker('toggle') to try and toggle it when clicking on the element, but without any success.

The foreach loop is shown in the code below, where $statuses are the columns's values given form the controller.

<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
    <div class="row">
        <div class="col-10">
            <h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
            <span class="small material-icons" style="display: inline">sort</span>
        </div>
        <div class="col-2">
            <small class="totalCandidates mt-0 float-right"></small>
        </div>
    </div>
</div>

To summarize my question: Is there any way that I could use an icon instead of a bulky select box to show my sortable options?

I'd really appreciate any support or solutions. If it's not possible in any way I would like to hear this too so I could look for other options.

Kind regards and my thanks in advance.

EDIT

My updated card header after Bernhard Beatus's answer:

<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
    <div class="row">
        <div class="col-10">
            <ul class="nav nav-pills">
                <h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
                <li class="nav-item dropdown pl-1">
                    <a data-toggle="dropdown" href="#"><span class="small material-icons">sort</span></a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Name</a>
                        <a class="dropdown-item" href="#">Status</a>
                        <a class="dropdown-item" href="#">Position</a>
                        <a class="dropdown-item" href="#">Creation date</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-2">
            <small class="totalCandidates mt-0 float-right"></small>
        </div>
    </div>
</div>

This will now open a dropdown-menu, so unfortunally still no select box, but it'll have to do.

Upvotes: 0

Views: 1622

Answers (1)

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

So now there is an Icon.
I created a fiddle for you: https://jsfiddle.net/bogatyr77/1xfwjq6c/2/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="col pl-1 pr-1">
  <div class="card bg-transparent h-100">
    <div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
      <div class="row">
        <div class="col-10">
          <ul class="nav nav-pills">
            <h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-filter"></i></a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
              </div>
            </li>
          </ul>
          <span class="small material-icons" style="display: inline"></span>
        </div>
        <div class="col-2">
          <small class="totalCandidates mt-0 float-right"></small>
        </div>
      </div>
    </div>
    {{-- uses jQuery to show corresponding cards --}}
    <div class="card-body kanbanColumn" data-status='{{ $status->id }}'></div>
  </div>
</div>
<div id="candidateModal"></div>

Upvotes: 1

Related Questions