Iframe sets wrong width

Question

I have a page having iframe whose width is assigned dynamically from jquery. Whatever width I set through jquery, the value is incremented automatically and assigned to iframe. I don't understand how and where it changes.

 $("#contentViewer").width("1023px"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <iframe id="contentViewer"></iframe> </div> 

element rendered in a browser(copied HTML from browser inspect element)

<iframe id="contentViewer" style="width: 1026.98px;"></iframe>

I expect iframe width to be 1023px, but the iframe rendered with width 1026.98px

On inspecting external CSS includes, I came to know bootstrap CSS makes an issue. if I remove bootstrap CSS than iframe working fine. The bootstrap version I used is 4.3.1

Answer 1

The issue was coming due to CSS property inherited from bootstrap.

the property was:

*, ::after, ::before {
    box-sizing: border-box;
}

I changed it to:

iframe, ::after, ::before {
    box-sizing: unset;
}

Now iframe set exact value which I assign

Answer 2

Try replace jquery or add css once, this might help you.

 iframe{ border: none; } 

 $("#contentViewer").css({"width":"1023px"});