CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Barrosy
Barrosy

Reputation: 1457

How to fix Bootstrap styling not working correctly in correspondence with Jquery?

I am trying to make front end for two dropdown elements.

If I click on the second dropdown element without setting the value of the first dropdown element, I would like to show a validation message stating the first drop down element is required to be entered/set. (The reason why I am trying to achieve this is that the values of the second dropdown element will be dependant on whatever the user chooses on the first dropdown element)

All functionality of the code I have made so far seems to be working correctly except for one part, which is that the bootstrap styling seems to be messing up whenever I click on the second dropdown element. The blue border around the element when it is being (I am not very sure it is that but) focused, will appear through the dropdown element. I assume this is because the styling on one of the attribute stylings is not changing accordingly with the element.

This only happens when the window is so small that the dropdown elements appear below each other.

Could anyone explain me what exactly is causing this and how I could fix this?

This is my code:

//If value of Dropdown 1 has been changed, do the following:
$(".exampleFormControlSelect1").change(function() {
  var selectedValue = $(".exampleFormControlSelect1").val();

  //If the selected option has a value assigned to it, execute the following:
  if (selectedValue) {
    $("#Dropdown1-error").hide();
    $(".exampleFormControlSelect2 option").show();
    //Do something else
    //alert(selectedValue);
  }

}).trigger("change");

//Whenever Dropdown 2 has been clicked and Dropdown 1 value has not yet been set, show validation error.
$(".exampleFormControlSelect2").click(function() {
  if (!$(".exampleFormControlSelect1").val()) {
    $("#Dropdown1-error").show();
  }
});
.exampleFormControlSelect2 option {
  display: none;
}

.cust-dropdown-error {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<form>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="exampleFormControlSelect1">Dropdown 1:</label>
          <select class="form-control exampleFormControlSelect1">
            <option disabled selected="selected">Choose an option...</option>
            <option value="1">Please load in more options...</option>
            <option value="2">Example option 2</option>
            <option value="3">Example option 3</option>
            <option value="4">Example option 4</option>
            <option value="5">Example option 5</option>
          </select>
          <span class="field-validation-valid text-danger" data-valmsg-for="Dropdown 1" data-valmsg-replace="true">
            <span id="Dropdown1-error" class="cust-dropdown-error">Dropdown 1 field is required.</span>
          </span>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="exampleFormControlSelect2">Dropdown 2:</label>
          <select class="form-control exampleFormControlSelect2">
            <option disabled selected="selected">Choose an option...</option>
            <option>Please load in more options...</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</form>

Edit: I believe that the borders around the options container that will be expanded when clicking a dropdown element, is still shown in its old position causing the blue line to cross the element. I would like to know the best way of addressing this problem.

I think I could add a container for the validation message but that would result in unnecessarily taking up space on the document when the validation message is not being shown.

Upvotes: 0

Views: 438

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

When you show the element, the bottom bootstrap border of the second select gets shifted to the middle of the second select.

This is a total hack but you can add this inside your function to force it to loose and gain focus again, thus resetting where it displays:

$(".exampleFormControlSelect1").focus();
$(this).focus();

OR use this alternate to those two lines:

$(this).blur().focus();

Example:

//If value of Dropdown 1 has been changed, do the following:
$(".exampleFormControlSelect1").on('change',function() {
  var selectedValue = $(".exampleFormControlSelect1").val();

  //If the selected option has a value assigned to it, execute the following:
  if (selectedValue) {
    $("#Dropdown1-error").hide();
    $(".exampleFormControlSelect2 option").show();
    //Do something else
    //alert(selectedValue);
  }

});//.trigger("change");

//Whenever Dropdown 2 has been clicked and Dropdown 1 value has not yet been set, show validation error.
$(".exampleFormControlSelect2").on('click',function() {
  if (!$(".exampleFormControlSelect1").val()) {
    $("#Dropdown1-error").show();
   // $(".exampleFormControlSelect1").focus();
    $(this).blur().focus();
  }
  
});
.exampleFormControlSelect2 option {
  display: none;
}

.cust-dropdown-error {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<form>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="exampleFormControlSelect1">Dropdown 1:</label>
          <select class="form-control exampleFormControlSelect1">
            <option disabled selected="selected">Choose an option...</option>
            <option value="1">Please load in more options...</option>
            <option value="2">Example option 2</option>
            <option value="3">Example option 3</option>
            <option value="4">Example option 4</option>
            <option value="5">Example option 5</option>
          </select>
          <span class="field-validation-valid text-danger" data-valmsg-for="Dropdown 1" data-valmsg-replace="true">
            <span id="Dropdown1-error" class="cust-dropdown-error">Dropdown 1 field is required.</span>
          </span>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="exampleFormControlSelect2">Dropdown 2:</label>
          <select class="form-control exampleFormControlSelect2">
            <option disabled selected="selected">Choose an option...</option>
            <option>Please load in more options...</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 1

suresh
suresh

Reputation: 230

Bootstrap comes with form-control on foucus css you can edit the below class name appropriately. comment out the box-shadow if you dont want shadow

.form-control:focus {
 color: #495057;
 background-color: #fff;
 border-color: #80bdff;
 outline: 0;
 //box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

Upvotes: 0

Related Questions