xwikisas/application-xpoll

The PROPOSALS, STATUS and TYPE text boxes aren't properly aligned/wrapped on narrower screens

Closed this issue · 3 comments

Preconditions: Test this using the wiki in FR and in EN.

Steps to reproduce:

  1. Click on Polls from the left Applications panel
  2. Click on Create > Add Title (select Poll type if needed) > Create
  3. Resize the screen/browser page

Expected results: The text boxes are properly aligned/wrapped when changing the screen/browser page size.

Actual results: The PROPOSALS, STATUS and TYPE text boxes aren't properly aligned/wrapped when resizing the screen. The issue can be seen better when using French wiki.

Environment: Windows 10, XWiki 12.6.5 with Polls Application (Pro) 2.0.4

Half Screen

In FR
PollHalfScreenFR

In EN
HalfScreenEN

Full Screen:

In FR
PollFullScreenFR

In EN
FullScreenEN

lucaa commented

Changed from bug to improvement since they are aligned, but not with what you find it reasonable to be aligned:
The whole triple (seen as a triple) made of label + hint + input box, are aligned at the top. Thus, since the hint text is of variable lengths, when it takes more than one line to display, this pushes the input lower, so the bottoms of the inputs are not aligned anymore (but the triples, seen as wholes, are still aligned.
I guess what you expect as behaviour is that:
1/ the 3 labels are aligned on top, between eachother
2/ the 3 hints are aligned on top with eachother, and can take more or less vertical space
3/ the 3 inputs are also aligned on top, with eachother, and all the 3 start after the end of the longest hint text. Thus, the shortest hint text may endup have a big witespace between the end of the text and the beginning of the input box.

It could work, but the big gap may also endup being confusing...

lucaa commented

What I described above would look something like this
image

lucaa commented

Also removed the major priority, this is not blocking the input of the data, nor the reading of the data, and occurs on specific screen sizes (on really small screens such as mobile, the 3 inputs are displayed one under the other).