compatibility with acf-autosize

[hirasso]

Hi there!

When using acf qtranslate fields (e.g. qtranslate_wysiwyg and qtranslate_textarea) together with the plugin acf-autosize, the fields that are initially not set to .current-language can't be autosized, since they are set to display: none;. A quick fix for this would be only hide them visually, not touching the display property. This is how I managed to get it to work:

/*
* compatibility with acf-autosize
*/
.acf-field-qtranslate-wysiwyg .multi-language-field > .acf-editor-wrap:not(.current-language),
.acf-field-qtranslate-textarea .multi-language-field > textarea:not(.current-language) {
  position: absolute !important;
  width: 100% !important;
  top: 0 !important;
  left: -10000px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: block !important;
}

[herrvigg]

If i understand well, this is to let auto-size do its job, which is not possible with display: none. But here you force the absolute position of these items. What happen when you want to edit them? Is this item moved or is the content copied to another element? In the second case, how does that work with auto-size?

[hirasso]

Hi @herrvigg , my css looks to the user basically just like setting display: none on the elements that are not set to .current-language. I haven't changed anything else in the acf-qtranslate module and it works great.

[herrvigg]

But why do you need to change the absolute position if it's hidden? What is the functional purpose of the element being hidden?

[hirasso]

visibility: hidden would only hide the element, but still push other elements down in the document flow. With position: absolute, the element "pops out" of the document flow and therefore stops messing with other elements in the DOM. (= visually hidden)

[herrvigg]

Yes but if it's hidden I don't really understand what the element is needed for. Just to store some content? What happens when the language is switched?

[hirasso]

This is how acf-qtranslate works. It creates one sub-field for each enabled language, switching them on and off in relation to qtranslate. In the following screenshot you can see one input for each enabled language (fr, en, de). The currently active language is en, hence the related input gets the class current-language.

[herrvigg]

Oh right, I think I understand now. It's with the not(.current-language) that it works. For the active language, the good one will be displayed without the absolute positioning.

[herrvigg]

Merged in master.

[hirasso]

Oh right, I think I understand now. It's with the not(.current-language) that it works. For the active language, the good one will be displayed without the absolute positioning.

Correct! Great that we sorted this out :))