Display problem with Switchbox when label strings aren't the same length as "On" & "Off"

[Dominique-Alain JAN]

It was ok in 15.04 but the the new interface of 15.10dev, the translated text for the "switch" options are not displayed correctly.

1/ When "On", the translated text for "on" is displayed, with the text for "off" partially
2/ When "Off", the translated text for "off" is displayed centered below the the red bullet

(see inclosed picture)

[Aaron Wells (u-aaronw)]

On further testing, it looks like the problem here is that the switchbox's width is hard-coded to the English language labels "On" and "Off". Having a label that is significantly shorter *or* longer than this, will cause display problems. So, it works for the "Yes" and "No" switches (which you see on the "Add users by CSV" screen) but it doesn't work for "True" and "False" (which is supported by the switchbox element but not currently used in core)

The French langpack has cleverly worked around this for on/off by setting them to "❙" (that's some kind of unicode pipe character which is wider than the ASCII "|") and "O" (capital-O).

For "Yes" & "No" it has "Oui" and "Non", and as a result it has display problems.

[Aaron Wells (u-aaronw)]

So to be clear, for any translators coming across this, this issue has a partial workaround.

Most switchboxes are On/Off, and the 'on' and 'off' strings are only used for the switchbox, so you can set them the same as the French langpack:

$string['off'] = 'O';
$string['on'] = '❙';

Unfortunately, the "Yes" and "No" strings are used in places other than the switchbox, so you can't use the same thing there. Fortunately, most of the "yesno" switchboxes are on the admin side of Mahara. The only one visible to non-admin users is in the form for editing a task in a plan. So, the impact of that bug should be fairly limited.

[Kristina Hoeppner (kris-hoeppner)]

Liam is looking into this. We are switching the default to Yes / No as that corresponds better to the action verbs we use. I guess we could create a different lang string if needed for the interim if the issue is not so easy to fix and the 'O' and '|' should be used.

[Dominique-Alain JAN (dajan)]

Aaron, we find switch boxes elsewhere as well. For example when you write a note and can decide whether to make it public or not.

[Aaron Wells (u-aaronw)]

Hm, we should probably change the switchbox so that it uses its own dedicated yesno strings, so that it's easier to customize those.

[Aaron Wells (u-aaronw)]

I've filed a separate bug 1508723 to separate the switchbox language strings into separate language strings, in order to make it easier for them to be customized.

So with that, a workaround for other languages becomes easier, and the priority of this bug can drop to medium.

[Robert Lyon (robertl-9)]

See the fix in bug 1508723 to help deal with this problem in 15.04, 15.10, and 16.04

[Dominique-Alain JAN (dajan)]

It is still affecting Mahara 15.04 - 15.10 and 16.04. See attachment, made with a 16.04.

[Kristina Hoeppner (kris-hoeppner)]

Thanks for checking, dajan. We'll leave it open.

[Aaron Wells (u-aaronw)]

The patch for Bug 1508723 creates dedicate language strings for the Switchbox. So that means that for 15.10 and 16.04, the workaround is to make sure that the translations for these language strings are roughly the same size as the English word "Yes":

pieforms/switchbox.true (English: "True")
pieforms/switchbox.false (English: "False")
pieforms/switchbox.on (English: "On")
pieforms/switchbox.off (English: "Off")
pieforms/switchbox.yes (English: "Yes")
pieforms/switchbox.no (English: "No")

As described in this note ( https://bugs.launchpad.net/mahara/+bug/1508723/comments/7 ) we didn't backport the patch to 15.04, because it would break existing translations. So those dedicated language strings don't exist in Mahara 15.04. But there is a patch for 15.04 which affected sites can apply manually if they'd like to.

But the above is just a workaround. The underlying bug here still exists. Specifically, the bug is that the switchbox is hard-coded to a certain size. Instead, it should be dynamically sized to fit the text labels that particular switchbox is displaying.

[Kristina Hoeppner (kris-hoeppner)]

Hi dajan,

The latest screenshot you provided was from 15.10 or 16.04. When I view the demo site in Firefox in French, I do not get the half cut-off switchboxes. Which browser do you use?

[Dominique-Alain JAN (dajan)]

The screenshot was from 16.04 on Firefox Mac latest version

[Kristina Hoeppner (kris-hoeppner)]

Hi dajan,

I can't replicate your problem with French in Firefox 46 on the Mac (see screenshot).

[Kristina Hoeppner (kris-hoeppner)]

Hi dajan,

I can't replicate your problem with French in Firefox 46 on the Mac (see screenshot).

[Dominique-Alain JAN (dajan)]

Hi Kristina,

So it seems to be a Mac issue, because I have it with
  * Chrome
  * Firefox
  * Safari
on two different computers
(see screenshot)

Sorry about this

dajan

[Kristina Hoeppner (kris-hoeppner)]

dajan, what browser version on which Mac? I tested on Mac Mavericks (I think) in Firefox and didn't have the problem.

[Dominique-Alain JAN (dajan)]

I gave the browser version in the inclosed document previously. It is

   for Firefox : 46.0.1 (English)
   for Safari : 9.1 (11601.5.17.1) (English)
   for Chrome : 50.0.2661.94 (French)

The Mac are
   Powerbook Mac mid 2014 on OsX 10.11.4
   iMac Pro on OsX 10.11.4

[Kristina Hoeppner (kris-hoeppner)]

Hi dajan, thanks for all that info. I still cannot replicate the issue not even in ElCapitain. Attached is a screenshot from the demo site in Safari 9. It also looks correct in Chrome.

Were you testing with our demo site or with one of your sites? If you haven't tested on http://demo.mahara.org yet, can you please do so and ask a few others who have a Mac to check?

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hello, I sill have this problem in french with the version 16.04.4.
I'm using Windows 7 Chrome 54 and Firefox 50.

To reproduce:
* Put your language in French
* Visit this page : artefact/file/index.php
* Click on the the pencil to open the files settings
* Check the comments switchbox

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hi! I have a fix for this bug but I just need some time to share it with you (at the end this week). Thank you !

[Kristina Hoeppner (kris-hoeppner)]

That would be great, Gilles-Philippe. I assigned it to you so we know that it's in progress. :-)

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7353

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hello Kristina, I do not your comment here :
https://reviews.mahara.org/7353

"Patch Set 2: Verified-1

It's already better :-) but not quite yet unless we don't care about very long words: https://seafile.catalyst.net.nz/f/a1c6470ac1/"

Thanks!

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

I mean, I do not understand your comment.

[Kristina Hoeppner (kris-hoeppner)]

Hi Gilles. I tested with a very long word on the button for "Yes" and a short one for "No". There was an improvement in that the buttons were not as messy anymore, but it did not resolve the problem entirely because the long word could still be seen partially on the "No" button as per the screenshot at https://seafile.catalyst.net.nz/f/a1c6470ac1/

Does that help? :-)

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7361

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Oh, I see! I understand more now. We didn't test this case but the problem is not that the On switch is larger than the no one since the server use only the larger one.

See in htdocs/lib/form/elements/switchbox.php:
$strlength = max(strlen($onlabel), strlen($offlabel));
$width = floor((57 + (($strlength - 2) * 3.5) + pow(1.4, ($strlength - 2)))) . 'px';

My educated guess is that this formula is incorrect. I admit to do not understand it but if someone is able to explain it I'll be interested :)

I'm already into rewrite it and I'm pretty sure this will fix this.

[Kristina Hoeppner (kris-hoeppner)]

Hi Gilles-Philippe,

We've discussed it a bit in the team in Wellington, and fixing the problem by using a different font would not be an approach that we want to take in Mahara core as that introduces a different font and doesn't solve the problem if someone overwrites that.

JavaScript might be the only option at this point. Do you want to investigate that or have us take a look?

Cheers
Kristina

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hi Kristina,

Yea, My first thought where I saw the problem was to ask myself why the computed width is done server side, at least, only here.
I did the patch like this to avoid to change too greatly the behavior but I admit now that a client side will be the best.

Now the problem with JavaScript is the switch is visible when the page is loaded and there’ll be a delay before the application of the width so the resize will be visible.
The best would be a pure CSS solution but I even not sure its possible the way the switch is.
This is why I would keep a fix on the server side when loading the page. The actual server side computed width still wrong.

I’m interested to investigate for it, I just hope it will not take too much time, I already spent quite some on this.

Regards,
Gilles-Philippe Leblanc

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7377

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hi, here is a pure Javascript solution for this problem. Use only the patch set 3.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7392

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/7377
Committed: https://git.mahara.org/mahara/mahara/commit/a08f5a34bdbcc751a2327b1b8e4f513961a45d1e
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit a08f5a34bdbcc751a2327b1b8e4f513961a45d1e
Author: Gilles-Philippe Leblanc <email address hidden>
Date: Thu Dec 22 09:45:06 2016 -0500

Bug 1467252: Fix display problem with Switchbox with long width

behatnotneeded: style change only

Change-Id: Ic97afddfe84057e613e340598322cc2a51ec57b3

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/7392
Committed: https://git.mahara.org/mahara/mahara/commit/261d386dac6fe1349a3a7a6ec2ea65520fef5050
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 261d386dac6fe1349a3a7a6ec2ea65520fef5050
Author: Robert Lyon <email address hidden>
Date: Mon Jan 16 20:21:49 2017 +1300

Bug 1467252: Fix display problem with Switchbox

When switchbox is outside pieforms

behatnotneeded

Change-Id: I5c8d53fba46267a16b70b7d288f18488cdd82b29
Signed-off-by: Robert Lyon <email address hidden>

[Robert Lyon (robertl-9)]

As the changes to switchbox / checkbox are significant we will not backport this fix

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7415

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/7415
Committed: https://git.mahara.org/mahara/mahara/commit/1d72469a117d6787cd7d0e16674f16bc4d134adb
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 1d72469a117d6787cd7d0e16674f16bc4d134adb
Author: Robert Lyon <email address hidden>
Date: Wed Jan 25 09:45:44 2017 +1300

Bug 1467252: Fixing problem with tinymce add image edit form

And the needing of switchbox.js to exist for the page

We will incude it as part of the smarty setup

behatnotneeded

Change-Id: Ie38f3d5fd89ae779566626be0f69db2ada65f074
Signed-off-by: Robert Lyon <email address hidden>

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/7471

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/7471
Committed: https://git.mahara.org/mahara/mahara/commit/89e994747b1d12d7c1089cd59c2d94d887ada577
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 89e994747b1d12d7c1089cd59c2d94d887ada577
Author: Robert Lyon <email address hidden>
Date: Fri Feb 17 12:51:23 2017 +1300

Bug 1665493: allow resume editcomposite to have switchbox js

A fix to deal with Bug 1467252 where switchbox is not included via
pieforms

behatnotneeded

Change-Id: I54ae33b55012658ccfcd64e4305ea3f27951fa91
Signed-off-by: Robert Lyon <email address hidden>

[Kristina Hoeppner (kris-hoeppner)]

Hi Gilles-Philippe,

Do the swichboxes display correctly now for you when you pull Mahara master?

Cheers
Kristina

[Gilles-Philippe Leblanc (gilles-philippe-leblanc)]

Hi Kristina,

I just tested with the master on my development environment and for what I know, everything seems to work properly.

Regards,

Gilles-Philippe

[Kristina Hoeppner (kris-hoeppner)]

Fantastic, Gilles-Philippe! Thanks for checking.