Translation placeholders inside "float: left" divs are not picked up by ICE

[Bilka2]

Expected behavior All placeholders for translation keys (e.g. {{__phrase_hero_title__}}) are picked up by the Javascript of the ICE and transformed into editable translations.

Actual behavior

When the placeholders are inside divs with style float: left, the ICE does not pick them up and does not show the edit button.

Your environment The demo app included in this repository: Current master branch of the gem, Rails 7.0, Firefox 125 on Linux

Full environment see Dockerfile + Gemfile.lock here: https://github.com/Bilka2/phraseapp-in-context-editor-ruby/tree/js-issues/examples/demo

Steps to reproduce the problem Modified demo app with Dockerfile: https://github.com/Bilka2/phraseapp-in-context-editor-ruby/tree/js-issues/examples/demo

Or just the problematic HTML:

<div>
  <div style="float: left; width: 48%">
    <h3 ><%= t(".find_your_favorites") %></h3>
    <ul><li><%= t('integrate_title') %></li></ul>
  </div>

  <div style="float: left; width: 48%">
    <ul><li><%= t('hero_description') %></li></ul>
  </div>
</div>

[Bilka2]

Context: I am working on integrating the ICE into otwarchive. The site uses float: left and float: right for the modules on the homepage and the navigation bar at the top of all pages. The HTML above is a simplified version of the modules on the homepage.

[github-actions[bot]]

Hey! This issue is still open, but there hasn't been any activity for a month now, so we will be marking this issue as stale and closing it in a week if it's still inactive.

[itsahsiao]

Hi @Bilka2, thank you for reporting this issue and including a demo repository! I will take care of adding this to our roadmap for our dev team to take a look.

[Varpuspaavi]

Hey @Bilka2! I took a look into this and it looks like this happens because the container holding the floating divs collapses and gets zero height. Usually this would mean that the content of the element is hidden so we don't take that element into consideration when walking the DOM.

https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing https://stackoverflow.com/questions/9024494/css-floating-divs-have-0-height

Seems like you can fix this by adding overflowproperty to the parent of floats, or adding some specific height to it :)

[Bilka2]

Hey, that indeed appears to solve the problem. Thank you!