Forums

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.
ntisithoj
 
siton replied on at Permalink Best Answer Reply
siton
Hi. It's hard to know what is the specific problem (and how this is related to your old Q)

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...
ntisithoj replied on at Permalink Reply
ntisithoj
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 
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.
siton replied on at Permalink Reply
siton
Nice :) mark as best answer for future searches about this topic
ntisithoj replied on at Permalink Reply
ntisithoj
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.
siton replied on at Permalink Reply
siton
It's hard to know the problem without HTML :)