I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidden class to the input field when a specific value is selected from the dropdown. This class modifies the flex-base property of the input field, causing it to be hidden with a smooth transition. When a different value is selected, the field should reappear.
While everything functions properly in a basic HTML test file, the problem arises when I include the bootstrap.css link in the header. The transition stops working, and the input field no longer hides/shows smoothly as intended.
How can I identify the portion of bootstrap.css responsible for this issue and resolve it? Despite spending considerable time analyzing the bootstrap files, I have been unable to find a solution so far.
Please select "Value A" from the dropdown below to observe the issue...
Working Fiddle: https://jsfiddle.net/gd03sjtn
Fiddle with Bootstrap (not working): https://jsfiddle.net/gd03sjtn/1
Check out the two code snippets illustrating the functioning and non-functioning states (affected by bootstrap css)
$(function() {
var $typeSelect = $('#typeSelect');
var $valueSpinner = $('#valueInput');
$typeSelect.change(function() {
if ($typeSelect.val() == "0") {
$typeSelect.addClass('red');
$valueSpinner.parent().addClass('hidden');
} else {
$typeSelect.removeClass('red');
$valueSpinner.parent().removeClass('hidden');
}
});
});.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.container select {
flex-grow: 10;
}
.container select.red {
background: red;
}
.container .spinner {
flex-grow: 0;
flex-basis: 30%;
transition: flex-basis 500ms ease-in-out;
}
.container .spinner.hidden {
flex-basis: 0%;
}
.container .spinner input.valueInput {
width: 100%;
}<!-- Remove Bootstrap.css to make this working -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<span class="spinner">
<input id="valueInput" value="205" class="valueInput">
</span>
<select id="typeSelect">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3" selected="selected">D</option>
<option value="4">E</option>
</select>
</div>$(function() {
var $typeSelect = $('#typeSelect');
var $valueSpinner = $('#valueInput');
$typeSelect.change(function() {
if ($typeSelect.val() == "0") {
$typeSelect.addClass('red');
$valueSpinner.parent().addClass('hidden');
} else {
$typeSelect.removeClass('red');
$valueSpinner.parent().removeClass('hidden');
}
});
});.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.container select {
flex-grow: 10;
}
.container select.red {
background: red;
}
.container .spinner {
flex-grow: 0;
flex-basis: 30%;
transition: flex-basis 500ms ease-in-out;
}
.container .spinner.hidden {
flex-basis: 0%;
}
.container .spinner input.valueInput {
width: 100%;
}<!-- Remove Bootstrap.css to make this working -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<span class="spinner">
<input id="valueInput" value="205" class="valueInput">
</span>
<select id="typeSelect">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3" selected="selected">D</option>
<option value="4">E</option>
</select>
</div>