Highest Voted 'getboundingclientrect' Questions

5

votes

0 answers

SVG path's stroke-width affecting getBoundingClientRect() results in Firefox

The implementation of getBoundingClientRect() varies from browser to browser when it comes to a SVG path with a given stroke width, with browsers like Firefox including the stroke width (unlike Chrome, for instance). By "including the stroke width"…

asked Aug 14 '20 at 03:44

user12273078

5

votes

2 answers

getBoundingClientRect from within iFrame

I have a function to assess whether an element (an iFrame) is within the viewport if the element is in view it returns true. function isElementInViewport() { var el = document.getElementById('postbid_if') var rect =…

javascript iframe cross-domain getboundingclientrect

asked Oct 30 '18 at 03:05

Jonathan Devereux

155
3
11

5

votes

1 answer

How to get position of element React | Redux (.getBoundingClientRect() + .getWrappedInstance())

I am trying to find a position of a component rendered with React. I am using redux, so I had to modify the connect function to: export default connect(mapStateToProps, mapDispatchToProps,null,{ withRef: true })(MyComponent); Now I am getting a…

reactjs redux getboundingclientrect

asked Jun 13 '17 at 10:52

semyd

430
4
17

5

votes

0 answers

Range getBoundingClientRect() top incorrect in Internet Explorer 11

I'm using a Range object and Element.getBoundingClientRect() to calculate the position of some text. I'm getting the expected result in Chrome and Firefox but in IE the top property value is wrong. To be more specific the text in contained within a…

javascript css range internet-explorer-11 getboundingclientrect

asked Mar 02 '17 at 20:53

mungmacoder

61
4

4

votes

0 answers

How to calculate window width based on getBoundingClientRectAsync values of another element?

Is it possible to calculate viewport or window width based on getBoundingClientRectAsync values of element which is in virtual DOM? Running JS in web worker (amp-script): let button = document.querySelector('.tooltip-trigger'); async function…

javascript asynchronous amp-html web-worker getboundingclientrect

asked Aug 05 '21 at 10:12

la_petite_kozel

826
5
26

4

votes

0 answers

element.getBoundingClientRect() returns wrong values in parent with grid display

Using React, I have a parent element which is div with a display grid and an input inside it.

My problen is when i remove the display:"grid" from style attribute, the…

javascript reactjs position getboundingclientrect

asked Feb 22 '21 at 08:13

Shahab

98
5

4

votes

1 answer

What unit does getBoundingClientRect return in?

I know that getBoundingClientRect() returns an object of type ClientRect or DOMRect, and each usually has properties like x, y, width, height, and more. And if you typeof those properties, you get Number. So my question is, that Number is an amount…

units-of-measurement getboundingclientrect

asked Dec 09 '20 at 19:24

Lakshya Raj

1,669
3
10
34

4

votes

1 answer

How to get an element's rect BEFORE a transform?

Currently, Element.getBoundingClientRect() gives the position and dimensions of an element, but it automatically accounts for transformations via the CSS transform property. How can I get the rectangle without the transformation? In the example…

javascript html css rect getboundingclientrect

asked Jan 03 '17 at 02:20

darrylyeo

3,103
20
30

3

votes

0 answers

Get current position when changing from position "sticky" to "relative" and set that value to translate

I am cloning this website https://www.lifeatspotify.com/ and I am about 90% done, but I am having trouble with the second section "folder flips". I have made the heading stack on each other but when the third heading stacks on top all the links…

javascript html css frontend getboundingclientrect

asked Oct 01 '22 at 06:22

Alexander Martos

31
4

3

votes

1 answer

getBoundingClientRect() returns inaccurate values for complex SVG's in Chrome

I'm trying to calculate the bounding box of transformed SVG elements and for that I'm using getBoundingClientRect() and mapping the x and y values to SVG coordinates. However, this function seems to produce wrong outputs in Chrome and Edge when the…

javascript google-chrome svg bounding-box getboundingclientrect

asked Dec 23 '21 at 14:00

jmbds

83
1
5

3

votes

1 answer

getBoundingClientRect() returns 0 for width and height of image

Ho do I use getBoundingClientRect() to determine the width and height of image function popUp() { var img = document.createElement('img'); img.id = "TT"; img.src = "https://picsum.photos/200/300"; document.body.appendChild(img); var…

javascript getboundingclientrect

asked Feb 24 '20 at 19:20

DCR

14,737
12
52
115

3

votes

2 answers

The position of the elements do not remain the same compared to their previous placed position using getBoundingClientRect

I drag and drop some elements on a div(containing background image) and upload the content . Before uploading I calculate the dropped element top,left positions wrt to parent div, so that the top,left positions can be used to place the elements…

javascript html css angular getboundingclientrect

asked Aug 19 '19 at 14:57

Enthu

512
2
13
38

3

votes

2 answers

Why Range.getBoundingClientRect() returns 0 for range inside textarea?

I have

element and create range inside it:

Create new range via document.createRange()
Get the only child node of <textarea> via textarea.childNodes[0]
Set range start and range end via range.setStart and range.setEnd

Then I call…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/range" class="post-tag grid--cell" title="show questions tagged 'range'" rel="tag">range</a> 
                
                <a href="../../questions/tagged/getboundingclientrect" class="post-tag grid--cell" title="show questions tagged 'getboundingclientrect'" rel="tag">getboundingclientrect</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Oct 01 '17 at 20:08">asked Oct 01 '17 at 20:08</time>
    <a href="../../users/5812238/diralik" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/5812238.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="diralik" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/5812238/diralik" class="s-user-card--link">diralik</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">6,391</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="28 silver badges">28</li>
            <li class="s-award-bling s-award-bling__bronze" title="52 bronze badges">52</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-45480954">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>3</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/45480954/why-getboundingclientrect-would-be-undefined-on-a-dom-element" class="question-hyperlink">why getBoundingClientRect would be undefined on a dom element?</a></h3>
        <div class="excerpt">This issue seem to occur only on Firefox:
I've got  an error saying "getBoundingClientRect is not a function" on a valid dom element included in the page:
var flashElement = document.getElementById("flash_2ffe3a7c");

result:
<object…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/firefox" class="post-tag grid--cell" title="show questions tagged 'firefox'" rel="tag">firefox</a> 
                
                <a href="../../questions/tagged/dom" class="post-tag grid--cell" title="show questions tagged 'dom'" rel="tag">dom</a> 
                
                <a href="../../questions/tagged/getboundingclientrect" class="post-tag grid--cell" title="show questions tagged 'getboundingclientrect'" rel="tag">getboundingclientrect</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 03 '17 at 10:01">asked Aug 03 '17 at 10:01</time>
    <a href="../../users/1489009/guian" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1489009.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Guian" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1489009/guian" class="s-user-card--link">Guian</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">4,563</li>
            <li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li>
            <li class="s-award-bling s-award-bling__silver" title="34 silver badges">34</li>
            <li class="s-award-bling s-award-bling__bronze" title="54 bronze badges">54</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-45463348">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>3</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/45463348/getboundingclientrect-alternative" class="question-hyperlink">getBoundingClientRect() alternative</a></h3>
        <div class="excerpt">I am using document.body.getBoundingClientRect().right to find what all elements in my top navigation are going out of view, so as to hide them and put them under a 'More' dropdown. But the function does not seem to be working in safari. Is there…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/getboundingclientrect" class="post-tag grid--cell" title="show questions tagged 'getboundingclientrect'" rel="tag">getboundingclientrect</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 02 '17 at 14:14">asked Aug 02 '17 at 14:14</time>
    <a href="../../users/4743297/keerti" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/4743297.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="keerti" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/4743297/keerti" class="s-user-card--link">keerti</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">245</li>
            
            <li class="s-award-bling s-award-bling__silver" title="5 silver badges">5</li>
            <li class="s-award-bling s-award-bling__bronze" title="19 bronze badges">19</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>

Questions tagged [getboundingclientrect]