CODEWITHSUNDEEP
javascriptjqueryjquery-chosen
Jon
Jon

Reputation: 149

Floating label for chosen dropdown

I am using the chosen dropdown, As per requirements I want a floating label, I tried it but it is not working. Please check my code below and let me know where I made a mistake. Thanks in advance

$('.chosen-select').chosen().on('chosen:open', (elm) => {
  const targetLabel = $(elm.target).prev('label');
  targetLabel.addClass('selected');
}).on('chosen:close', (elm) => {
  const target = $(elm.target);
  const targetLabel = target.prev('label');
  const targetOptions = $(elm.target.selectedOptions);
  if (targetOptions.length === 0) {
    targetLabel.removeAttr('class');
  }
});
label {
  font-size: 16px;
  color: #C2185B;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  transition: all 0.2s ease 0s;
}

label.selected {
  top: -20px;
  font-size: 12px;
  transform: translateY(0);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div class="col-md-6">
  <div class="form-group">
    <label for="select">Floating label</label>
    <select data-placeholder="" class="form-control chosen-select" style="width:350px;" tabindex="4">
      <option value=""></option>
      <option value="Any">[Any]</option>
      <option value="United States">United States</option>
    </select>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>

Upvotes: 2

Views: 2116

Answers (2)

Nalin Jayasuriya
Nalin Jayasuriya

Reputation: 377

I had this same challenge when adding a floating-label for the 'Chosen' select control. Here's a simple solution that worked for me:

.csHTML (.NET):

<div class="form-floating rowSpace">
       <select asp-items="Model.InterestGroupsList" class="form-control" data-placeholder="Select one or more" multiple id="myInterestSelect">
       </select>
      <label for="myInterestSelect">My interests (select one or more)<span class="required">&nbsp;*</span></label>
      <span asp-validation-for="InterestGroupIDs" class="text-danger"></span>
</div>

Here's the CSS that fixed the display issue:

    .form-floating > .form-control:focus, .form-floating > .form- 
    control:not(:placeholder-shown) {
      padding-top: 1.625rem;
      padding-bottom: .225rem;
   }

   .chosen-container-multi .chosen-choices {
        padding-top: 30px !important;
        padding-bottom: 6px !important;
    }

Here's how it looks when it renders in the browser:

enter image description here

Upvotes: 1

Ahed Kabalan
Ahed Kabalan

Reputation: 855

Read more about Chosen events here.

Working example:

$('.chosen-select').chosen().on('chosen:showing_dropdown', (elm) => {
  const targetLabel = $(elm.target).prev('label');
  targetLabel.addClass('selected');
}).on('chosen:hiding_dropdown', (elm) => {
  const target = $(elm.target);
  const targetLabel = target.prev('label');
  const targetOptions = $(elm.target.selectedOptions);
  if (targetOptions.length === 0) {
    targetLabel.removeAttr('class');
  }
});
label {
  font-size: 16px;
  color: #C2185B;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  transition: all 0.2s ease 0s;
}

label.selected {
  top: -5px;
  font-size: 12px;
  transform: translateY(0);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div class="col-md-6">
  <div class="form-group">
    <label for="select">Floating label</label>
    <select data-placeholder="" class="form-control chosen-select" style="width:350px;" tabindex="4">
      <option value=""></option>
      <option value="Any">[Any]</option>
      <option value="United States">United States</option>
    </select>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>

EDIT:

$('.chosen-select-deselect').chosen().on('chosen:showing_dropdown', (elm) => {
    const targetLabel = $(elm.target).prev('label');
    targetLabel.addClass('selected');
}).on('change', (elm) => {
    const target = $(elm.target);
    const targetLabel = target.prev('label');
    const targetOptions = $(elm.target.selectedOptions);
    if ($(target).val() === "") {
        targetLabel.removeAttr('class');
    }
}).on('chosen:hiding_dropdown', (elm) => {
    const target = $(elm.target);
    const targetLabel = target.prev('label');
    if ($(target).val() === "") {
        targetLabel.removeAttr('class');
    }
});

$('.chosen-select-deselect').trigger('chosen:updated')

Upvotes: 1

Related Questions