tawk.to how to change an iframe that has ! Mportant to force the left align?

Asked

Viewed 242 times

-1

Well I am using something from third parties to be able to talk in a particular store, I am using the tool tawk-to.

But it forces the Iframe css with ! Import in style.

How could I change to line up the left?

<iframe id="tLvgrUQ-1512044562778" src="about:blank" frameborder="0" scrolling="no" title="chat widget" class="" style="outline: none !important;visibility: visible !important;resize: none !important;box-shadow: none !important;overflow: visible !important;background: none transparent !important;opacity: 1 !important;position: fixed !important;border: 0px !important;padding: 0px !important;transition-property: none !important;z-index: 1000001 !important;cursor: auto !important;float: none !important;height: 40px !important;min-height: 40px !important;max-height: 40px !important;width: 260px !important;min-width: 260px !important;max-width: 260px !important;transform: rotate(0deg) translateZ(0px) !important;transform-origin: 0px center 0px !important;margin: 0px !important;top: auto !important;bottom: 0px !important;right: auto !important;left: 0px !important;display: block !important;"></iframe>

In case I wanted to change the right: to auto and left to 0px, but you can’t do it by css because ! Port in style becomes impossible to change by style.

element.style {
outline: none !important;
visibility: visible !important;
resize: none !important;
box-shadow: none !important;
overflow: visible !important;
background: none transparent !important;
opacity: 1 !important;
position: fixed !important;
border: 0px !important;
padding: 0px !important;
transition-property: none !important;
z-index: 1000001 !important;
cursor: auto !important;
float: none !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
transform: rotate(0deg) translateZ(0px) !important;
transform-origin: 0px center 0px !important;
margin: 0px !important;
top: auto !important;
bottom: 0px !important;
right: 10px !important;
left: auto !important;
display: block !important;

}

  <!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5a142517bb0c3f433d4ca6ad/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
javascript html css

1 answer

0


I managed to make it go left the secret is that you have to make a pickup that waits for the instantiation class and then applies the treatment via Javascript since it does not via CSS.

<script type="text/javascript">
var i = setInterval(function ()
{
    if ($('div iframe').length)
    {
        clearInterval(i);
        $('div iframe:eq(1)').css({
        'right':'auto',
        'left': '0px',
       });


          $('div iframe:eq(0)').css({
        'right':'auto',
        'left': '-1340px ',
        'display': 'block',
        'position': 'absolute',
        'bottom': '0px',
        'display': 'none',
       });
    }
}, 100);

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.