On phone, remove the margin under Reference.

If I remove it then the item fields will NOT be aligned.
See your own comment #26945 (comment)

On phone or small width, they won't ever be side by side.

That part is easy to solve. Will do tomorrow.

@Quy Done

I did not tested deeply, but I assume the problem with "change" event triggering (it does not triggers), that event is expected by associations-edit.js

The event should be triggered somewhere here:

In Joomla 3 there an explicit call of .change(), that trigger change event by jQuery in sidebyside.js.
Since it still used jQuery there it should be possible to make/copy as it was in Joomla 3, except remove all .chosen() words.
The jQuery.change() will not work here.
In joomla 4 it can be triggered as
Joomla.Event.dispatch(element, 'change');
or
element.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true }));

@Fedik
My poor knowledge: I am unable to modify the sidebyside.js to fit your suggestion.

Example code:
3.x we have both a remove() and a change() line 48 on

		// - For chosen association selectors (menus).
			reference.find('#jform_associations_' + targetLang + '_chzn').remove();
			reference.find('#jform_associations_' + targetLang).val('').change().chosen();

in 4.0 line 41 on

      // - For chosen association selectors (menus).
      reference.find('#jform_associations_' + targetLang).val('');

and further down similar code

.... '_chzn').remove();

this creepy thing is for remove Chosen, just ignore it

reference.find('#jform_associations_' + targetLang).val('').change().chosen();

this to reset a value, and to trigger "change", hmm

I think something like:

var targetLangSelect = reference.find('#jform_associations_' + targetLang);
targetLangSelect.val('');
Joomla.Event.dispatch(targetLangSelect[0], 'change');

(Instead of what you seen in joomla 4 reference.find('#jform_associations_' + targetLang).val('');)

That a bit dirty, because a whole sidebyside.js is a hard mix of jQuery and non jQuery code, whoever made it.

@Fedik
alas I have now an error in core.js
TypeError: newElement is undefined core.js:1140:5

Line is
newElement.dispatchEvent(new CustomEvent(newName, {

hm, that sounds like targetLangSelect = reference.find('#jform_as... did not found anything

I will try to look more, on the week

will try to look more, on the week

Thanks. I guess that if you can solve, it would be better to create a new PR and ping me.

To help, this is what we get in 3.x when using the Clear button.

The association is cleared from the reference.
The whole form is cleared in the Target. It will only display after selecting a Target Language.
As soon as a new Target item is selected, its name will display in the associations tab of the reference and the target associations tab will display the reference.

@Quy
As this work on sidebyside.js is totally independent from this PR, please test and let's try to get this one in. Thanks.

I have tested this item ✅ successfully on f92b2f1

I have tested this item ✅ successfully on f92b2f1

@infograf768 I made a separated pull for that #27159

@Fedik
will test tomorrow

@infograf768 In summary of changes section of description I think there is a typo:

... with width to 100% until getting to modal view.

I think you meant mobile view. Is that right?

@infograf768 In a size short before mobile view - let me call it tablet view ;-) - it still does not look nice here:

It would look better if the left and right article would be aligned at the top. Not sure if that is possible, and not sure if what I see is correct. I mean I have done npm after applying the patch and have cleared broswer cache, but who kows, maybe that was not enough. Does it look the same for you with such a width?

Other question: I've noticed that since a few days when I install multilingual sample data, the English (GB) content is missing, only German and French content exists and is associated. Can you confirm that?

@Quy @richard67
Modified to cope with tablet view

Please test again.

(Looking into the multingual sample data question, unrelated to this patch)

@richard67
I confirm the issue with en-GB and multilingual sample data... GRRR
It is related to the absence of the lang string prefix for the xml as we have only
$file = $path . '/' . $lang . '/' . $lang . '.xml';
and not the possible situation
$file = $path . '/' . $lang . '/langmetadata.xml';
Looking into it now.

concerning sampledata, see #27179

I have tested this item ✅ successfully on bb40f8c

I have tested this item ✅ successfully on bb40f8c

RTC

RTC

Thanks!