The long story is I have a CKEditor component that allows site admins to
select content on a page and edit it. I do this with the Dynamic component.
Occasionally I need to put a style tag in the template to override the
default styling for the page. In this case I have a template like:

<span>

<style>



*html,body*{height:100%;}

*body* {padding: 0px;}

.container{height: 100%; padding: 0px; margin: 0px; max-width: 100%;}

.carousel*,*.item*,*.active{height:100%;}

.carousel-inner{height:100%;}

.fill{width:100%;height:100%;background-position:center;background-size:
cover;}



.carousel-inner > .item {

    -webkit-transition: 0.3s ease-in-out left;

    -moz-transition: 0.3s ease-in-out left;

    -o-transition: 0.3s ease-in-out left;

    transition: 0.3s ease-in-out left;

}


</style>


<div id="carousel" class="carousel slide" data-interval="5000" >

*...*

*</div>*

*</span>*


so I can make the Bootstrap carousel component full screen and control the
transition time. The problem is


.carousel-inner > .item turns into .carousel &gt; .item


and does not work. I know I can fix this by making a different way to add
css to the page but that's a lot of work to solve this problem.

Reply via email to