OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Rails 7 elements rendered via partial get their BoundingClientRect set to (0,0)

  • Thread starter Thread starter Yochert
  • Start date Start date
Y

Yochert

Guest
I was setting up a tour with driverJS for my app, when I noticed that I couldn't get it to focus on some elements of my UI. Long story short, I've discovered that the element not being focused on has its BoundingClientRect set to {0,0,0,0}. The element in question is rendered within a partial, I've tried to focus on the element produced by other partial and it was working just fine.

So, I stripped down the surrounding code around the element in question to a bare minimum and still get the same result:

layout.html.erb

Code:
....
            <div>
              <div id="test2">
                <p>Lorem Ipsum</p>
              </div>
              <%= render "/shared/sidebar" %> <!-- Sidebar -->
            </div>
            <div class="flex-1 flex flex-col fit-view"><!-- Content area -->
              <%= yield %>
            </div>
          </div>
....

sidebar.html.erb

Code:
<div id="test3">
  <p>Ipsum Lorem</p>
</div>

After the page is loaded it results in following HTML

Code:
<div>
 <div id="test2">
    <p>Lorem Ipsum</p>
 </div>   
 <div id="test3">
   <p>Ipsum Lorem</p>
 </div>
</div>

I open devtools and these are the results for Bounding boxes for both elements:

Code:
$> document.querySelector('#test2').getBoundingClientRect() 

$> DOMRect {x: 0, y: 69, width: 53.8046875, height: 24, top: 69, …}

Code:
$> document.querySelector('#test3').getBoundingClientRect() 

$> DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}

Because the boundingClientRect is 0, I can't focus on the element for my tour, and I don't know how to fix it. The computed styles for both divs are exactly the same.

Why would rendering it via a partial set it to 0 on this particular partial and not on any elements that are rendered in <%= yield %> ?

<p>I was setting up a tour with driverJS for my app, when I noticed that I couldn't get it to focus on some elements of my UI. Long story short, I've discovered that the element not being focused on has its BoundingClientRect set to {0,0,0,0}. The element in question is rendered within a partial, I've tried to focus on the element produced by other partial and it was working just fine.</p>
<p>So, I stripped down the surrounding code around the element in question to a bare minimum and still get the same result:</p>
<p>layout.html.erb</p>
<pre><code>....
<div>
<div id="test2">
<p>Lorem Ipsum</p>
</div>
<%= render "/shared/sidebar" %> <!-- Sidebar -->
</div>
<div class="flex-1 flex flex-col fit-view"><!-- Content area -->
<%= yield %>
</div>
</div>
....
</code></pre>
<p>sidebar.html.erb</p>
<pre><code><div id="test3">
<p>Ipsum Lorem</p>
</div>

</code></pre>
<p>After the page is loaded it results in following HTML</p>
<pre><code><div>
<div id="test2">
<p>Lorem Ipsum</p>
</div>
<div id="test3">
<p>Ipsum Lorem</p>
</div>
</div>
</code></pre>
<p>I open devtools and these are the results for Bounding boxes for both elements:</p>
<pre><code>$> document.querySelector('#test2').getBoundingClientRect()

$> DOMRect {x: 0, y: 69, width: 53.8046875, height: 24, top: 69, …}
</code></pre>
<pre><code>$> document.querySelector('#test3').getBoundingClientRect()

$> DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
</code></pre>
<p>Because the boundingClientRect is 0, I can't focus on the element for my tour, and I don't know how to fix it. The computed styles for both divs are exactly the same.</p>
<p>Why would rendering it via a partial set it to 0 on this particular partial and not on any elements that are rendered in <code><%= yield %></code> ?</p>
 

Latest posts

D
Replies
0
Views
1
Damiano Miazzi
D
Top