How do I resolve same-page multiple block instance CSS conflicts?
Permalink
I detailed the issue in another post here
https://www.concrete5.org/community/forums/customizing_c5/need-css-a...
But as this is block specific, I am referring to it in the block request forum.
https://www.concrete5.org/community/forums/customizing_c5/need-css-a...
But as this is block specific, I am referring to it in the block request forum.
Your first link nailed it! That was exactly my problem. I was looking for exactly that answer in web search but somehow missed it.
I changed all the IDs to
then changed all the selectors in view.js to
and it works! yay.
Well, sorta...
The left/right forward/back button disappeared and their position is completely wacked out :( So it seems there is another class or id that is controlling their position (they still function if you click on the empty div).
When I look at the php that creates those buttons i see
This seems pretty clear, however, the only place where that functionality seems to be in bootstrap.min.js, and I am not too keen on mucking about in there :/
So, the issue then becomes, even if I change the php and js to respect unique blocks, there seems to be some deeply embedded, fundamental code/css that must also be changed to support that.
I changed all the IDs to
id="fourcolumn-carousel_<?= $uid ?>"
then changed all the selectors in view.js to
$('[id^=fourcolumn-carousel]').carousel({ and $('[id^=fourcolumn-carousel] [class^=item]').css({
and it works! yay.
Well, sorta...
The left/right forward/back button disappeared and their position is completely wacked out :( So it seems there is another class or id that is controlling their position (they still function if you click on the empty div).
When I look at the php that creates those buttons i see
<a class="left carousel-control" href="#fourcolumn-carousel_<?= $uid ?>" data-slide="prev"><i class="fa-chevron-circle-left"></i></a> <a class="right carousel-control" href="#fourcolumn-carousel_<?= $uid ?>" data-slide="next"><i class="fa-chevron-circle-right "></i></a>
This seems pretty clear, however, the only place where that functionality seems to be in bootstrap.min.js, and I am not too keen on mucking about in there :/
So, the issue then becomes, even if I change the php and js to respect unique blocks, there seems to be some deeply embedded, fundamental code/css that must also be changed to support that.
Nice :) mark as best answer for future searches about this topic
one last note: I have no idea why the above changes completely mangled the left/right arrow, but by adding the following CSS to view.css, they became usable again. I know it is a bit hacky, and have not tested the effects on responsiveness.. but it got me up and running.
.fa-chevron-circle-right:before { content: "\f054"; font-family: FontAwesome; position:absolute; right: -30px; font-variant: none; font-style: normal; } .fa-chevron-circle-left:before { content: "\f053"; font-family: FontAwesome; position:absolute; left: -30px; font-variant: none; font-style: normal;
Viewing 15 lines of 26 lines. View entire code block.
It's hard to know the problem without HTML :)
Conflict or "extra code" (each block instance loads the view.css? or any idea like this)
What about this Q (JS not CSS):
-https://stackoverflow.com/questions/27047717/multiple-bootstrap-caro...
-https://stackoverflow.com/questions/10521257/is-it-possible-to-have-...
This is a conflict:
"Two or more conflicting CSS rules are sometimes applied to the same element."
This is your case? (add url)
http://www.webteacher.ws/2010/08/26/resolving-conflicts-in-css/...
My advice:
First, create two carousels on the same page with codepen or jsfiddle (html-css-js) - learn this issue and then add this concept to your C5 block (now you know how it works + working reference, and so on)
https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp...
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&fil...