We Keep Coding

Bootstrap conflics with custom CSS transition - How to find + fix the conlicting css rule?

I am trying to add a custom CSS transition to my existing Bootstrap 3 based project. A simple flex container which holds a value input and a select field. jQuery is used to add a .hidden class to the input field when the first select value is picked. This class changes the flex-base property of the input field which should than be hidden using a transition. When another value is picked the field is shown again.
Everything works fine when I use a simple test HTML file. But as soon as I add the bootstrap.css link in the header, the transition does not work any more. The select field still hides/shows but without a transition.
How can I find out which part of bootstrap.css is responsible and fix this problem? I already spend hours digging through the bootstrap files but without any success so far.
Select value A from the select field in the following examples to see the problem...
Working Fiddle: https://jsfiddle.net/gd03sjtn
Fiddle with Bootstrap (does not work): https://jsfiddle.net/gd03sjtn/1
Two snippets demonstrating it working / not working (blocked 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>

The issue is that you're using the same class name as one from bootstrap:
hidden { display: none!important }
so your spinner flex panel isn't shrinking to flex-basis: 0% - it's disappearing completely, immediately - the key parting being immediately.
How can I find out which part of bootstrap.css is responsible and fix this problem?
First, try different class names in your own css - I changed hidden to hiddenx in your js+css and it started working ok again, so that was the issue.
Second, look in the Elements/Styles tab/sub-tab of developer tools (F12) to see what's changing.
Also, partly knowing what styles bootstrap uses, knowing that hidden makes something, well, hidden, so I knew from that (after wasting time looking at the select) that it was bootstrap class it was a case of determining (in the styles tab) what it was adding (rather than wade through the bootstrap css (no thanks))

When you make a request to get all css rules for bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
this link in the header will merge all others configurations in your css...
Solution:
Download the compiled bootstrap.min.css and modify to use just what you need!
https://getbootstrap.com/docs/4.1/getting-started/download/

I would suggest to use the developer tools (F12) of firefox or chrome. In the "elements" tab (this is the chrome wording - not sure how it is called in firefox, but you can find the same areas there) find your element for which the css transition should work. Click on it and then look on the right side in the style-area. You see all styles that apply. The style with the highest precendence selector is on top. If you are not sure which value for which css attribute is finally use on your elemente the mpve over to the Computed tab.
In both areas you see the applied styles and from which stylesheet and from which line within they come.

Change display property and id attribute

I have 2 sections:
<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
<!--stuff --->
</section>
<section class="focus" id="need" style="display:none;">
<!--stuff --->
</section>
I want to display the second section when window is lowered to width less than 1043px. And hide the first section by display:none
Update:
How can I remove id attribute of first section, when width is less than 1043?

You should use CSS media queries. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 1043px) {
section.focus {
display: block;
}
}

Firstly you cannot use same ID for more than one div. So change the id of one div.
And to hide the second div and show the first div:
Use CSS:
#media only screen and (max-width: 1043px) {
.focus {
display: block;
}
.notes {
display: none;
}
}

In response to your requirement for removing the ID attribute, try the following JavaScript. It can only do it once however, and if you are interested in performance you should consider investigating debounce/throttle for the resize handler. (http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/)
$(window).on('resize', function() {
if($(window).width() < 1043) {
$('.notes').removeAttr('id');
$(window).off('resize');
}
});
However, the media queries answers are the correct approach to show/hide based on screen width.

Checkbox image label Select effect only applying on hover, not when checked

I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom

You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/

May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.

how to hide image by its icon-value

hi everyone i cant find the solution for my question on google. i just want to hide the images using there icon-value
like in the below example i just want to hide the image which have icon-value="1" in the div which have .box class
<div class="box">
<div class="icon"><img src="xyz/smiley.png" icon-value="1" icon-index="0"></div>
<div class="icon"><img src="xyz/1.png" icon-value="2" icon-index="1"></div>
</div>

use an attribute selector.
.box img[icon-value="1"] {
display: none;
}

CSS solution:
.box img[icon-value="1"] {
display: none;
}
Demo
PS: Notice the value in quotes. I don't think CSS attribute selectors will work if the value is not specified in quotes
jQuery solution:
$(".box img[icon-value=1]").css("display", "none");
Demo

using css try following
.box .icon img[icon-value="1"] {
display: none;
}
or if you are using jquery you can try this also
$(".box img[icon-value=1]").hide();

HTML objects growing and pushing others

How could I make it so that given two elements let's say these boxes:
If I clicked over one, it would grow, and the other would shrink like and vice versa:
How can I do this?
I have seen this sort of done with CSS, using the focus tag and adjusting the width. But I have two problems there, first how could I affect the other element, and second as far as I can tell adjusting width will only stretch them right. I have seen people change the way they float the elements to deal with that, but I don't want to move them around the page to do this.

Here are 2 examples without Javascript/jQuery:
Pure CSS - Trigger on click: (example)
Using the checkbox hack in CSS you can effectively toggle the widths of the elements when the checkbox is :checked. Here is what part of the CSS looks like:
input[type=checkbox]:checked ~ .red {
width:70%;
}
input[type=checkbox]:checked ~ .green {
width:20%;
}
Go to the example for the full CSS.
HTML
<input type="checkbox" id="toggle" />
<div class="red">
<label for="toggle"></label>
</div>
<div class="green">
<label for="toggle"></label>
</div>
You might also be interested in the original example I made. It takes a different approach, though it doesn't fully work.
Pure CSS - Trigger on hover: (example)
Unfortunately, neither the adjacent selector, nor the general sibling selector can select previous elements, therefore it makes this a little difficult. I placed 2 general elements before the main elements in order to somewhat solve this issue.
.greenS:hover, .greenS:hover ~ .green,
.redS:hover, .redS:hover ~ .red {
width:72%;
}
.greenS:hover ~ .redS, .greenS:hover ~ .red,
.redS:hover ~ .greenS, .redS:hover ~ .green {
width:22%;
}
HTML
<div class="redS"></div><div class="greenS"></div>
<div class="red"></div>
<div class="green"></div>
Since this was tagged as JS/jQuery, here are 2 alternative solutions.
JS/jQuery - Trigger on click: (example)
$('.red, .green').click(function(){
$('.red').toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
JS/jQuery - Trigger on hover: (example)
$('.red').hover(function(){
$(this).toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
$('.green').hover(function(){
$(this).toggleClass('expanded')
.prev('.red').toggleClass('contracted');
});

See jQuery .animate() method documentation.
Example on jsfiddle:
.box {
width: 100px;
height: 100px;
display: inline-block;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
$('.box').click(function() {
var currentWidth = $(this).outerWidth(),
siblingCurrentWidth = $(this).siblings('.box').outerWidth();
$(this).animate({'width' : currentWidth/2})
.siblings('.box').animate({'width' : siblingCurrentWidth*2});
});
This is a very simple example with several flaws, but it demonstrates a possibility for what your purpose is.

Simple example http://jsfiddle.net/PeLub/ ( modify how you need) .
<div class="box" id="first"></div>
<div class="box" id="second"></div>
$("#first").click(function(){
$(this).animate({width:'50px'}, 500);
$("#second").animate({width:'150px'}, 500);
});
$("#second").click(function(){
$(this).animate({width:'50px'}, 500);
$("#first").animate({width:'150px'}, 500);
});