Survey xblock not working properly inside the Mobile apps' webview

[miankhalid]

Hi folks 👋

Here to report an issue with the Survey xBlock's display inside our Mobile apps, plz have a look at the screenshots below:

Example 1	Example 2

After some client-side CSS injection magic:

Example 1	Example 2

cc @forgotvas @moiz994 @touchapp @hassan6190

[miankhalid]

@openedx/edx-infinity team would you folks be able to help here?

[eemaanamir]

This issue has been resolved in this PR.

[ayesha-waris]

@openedx/edx-infinity team would you folks be able to help here?

@miankhalid The issue has been resolved

[miankhalid]

thanks @ayesha-waris, lemme ask my team to verify the fix on our end as well.

[miankhalid]

@eemaanamir @ayesha-waris sadly, the issue isn't fully fixed. Plz have a look at the issues still occurring after the fix:

New line bug incase of Radio buttons	Alignment issue incase of percentages

[ayesha-waris]

@eemaanamir @ayesha-waris sadly, the issue isn't fully fixed. Plz have a look at the issues still occurring after the fix:

New line bug incase of Radio buttons Alignment issue incase of percentages

@miankhalid Thanks for confirmation, will get back to you once its resolved properly

[eemaanamir]

@miankhalid The new line issue is not reproducible on our end. Please take a look at the following screenshots. Varying dimensions have been used to test the problem.

Furthermore, the alignment bug is also not visible.

How are you producing the alignment bug in the first place? To my understanding, the total sum of all the percentages should not exceed 100%, but that is not the case in the screenshot you provided. Are you producing the bug using CSS manipulation? If yes, maybe that is the culprit behind the issue.

[miankhalid]

How are you producing the alignment bug in the first place? To my understanding, the total sum of all the percentages should not exceed 100%, but that is not the case in the screenshot you provided. Are you producing the bug using CSS manipulation? If yes, maybe that is the culprit behind the issue.

@forgotvas thoughts on these questions?

[forgotvas]

hi @eemaanamir, that bug i can still reproduce on that xblock. Possible i can reproduce that because on device we have width that less than 767px that limited in @media css:
|

Sum of percentages is not equal to 100 because it's a hard coded and i don't think that you have calculated css that depends on value there:

2024-02-13.10.54.53.mov

The new line issue still reproduced on my side, i went through html tags, possible that will help you to find a reason:

2024-02-13.11.04.13.mov

cc @miankhalid

[awais-ansari]

This issue has been addressed in this PR.

[forgotvas]

hi @awais-ansari, i can confirm that bug with new line was fixed, percent vertical alignment looks good too, but there also exist new one bug with percentage:

New line(fixed)	Percent vertical alignment (fixed)	New percent bug with new line

cc @miankhalid

[forgotvas]

hi @awais-ansari, do you have any updates for this bug?

cc @miankhalid

[awais-ansari]

@eemaanamir Can you please confirm that it is fixed or not?

[awais-ansari]

Here is a fix. #34408