change css of cloned element

I cloned a div onto another div with jquery and it works fine. The problem I'm having is the child of the div I cloned has a CSS assigned to it prior to cloning it so when I clone and append it to another div it also transfers the CSS data. I tried to change the CSS of the div after cloned but the main CSS is overwriting it. I tried the important attribute but it didn't work. How can I change the CSS of a cloned element? Note: if the cloned div doesn't have any prior CSS the method below works. Any help is appreciated. Thanks in advance.

UPDATE:

As suggested I have included full code but keep in mind that the cloned element is now being appended to a popover. To see the clone click on .newDiv

//what I tried, it didn't work

var popOverSettings = {
  selector: '.newDiv',
  container: 'body',
  html: true,
  trigger: 'click',
  placement: 'bottom',
  sanitize: false,
  content: function() {
    //i am getting the "to be cloned" element from a child iframe
    let source = $('.oldDiv').children().eq(0)
    $('.popoverCon').append('<div class="popoverContent"></div>')
    source.clone(true).appendTo('.popoverContent')
    $('.popoverContent').find('.oldDivChild').css({
      'bottom': '0%',
      'width': '100%',
      'height': '100%'
    })
    return $('.popoverCon').html();
  }

}

$(function() {
  $('body').popover(popOverSettings);
});

.oldDiv {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 30%;
  height: 40%;
}

.oldDivChild {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 70%;
  background-color: blue;
}

.newDiv {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 30%;
  height: 40%;
  background-color: red;
}

.popoverCon {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<div class="oldDiv">
  <div class="oldDivChild"></div>
</div>

<div class="newDiv">

</div>

<div class="popoverCon"></div>

I believe remove the class and add a new class after cloning would solve your problem.

source.clone(true).removeClass('oldDivChild').addClass('myNewClassName').appendTo('.popoverContent')

Alternatively, You could also make the children css rule only apply to the parent > target pair without changing your javascript

.oldDiv .oldDivChild {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 70%;
  background-color: blue;
}

that way the cloned div would have the .oldDivChild, but the css won't get applied because it's on a different parent.

change css of cloned element

Related

Recent Posts