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

Question

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

Navigation

#1 by (0 votes)

0

I'm using something from a third party so I can talk to a particular store, I'm using the tawk-to tool.

But it forces the Iframe css with! important no style.

How could I change to align 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 do not do this for css because! important in style it is 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

asked by anonymous 30.11.2017 / 13:47

1 answer

Repairing Cell Phone x Desktop How to get dyndns via php

score 0 · Accepted Answer

I managed to make it go left the secret is that you have to make a pickup that waits for the class to instantiate and then applies the treatment via Javascript since it does not go 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);