🐞 List layout issues

[markgrafd]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.

Current Behavior

We have noticed some unsightly display in list elections:

1. List layout with 4 columns is wrapped randomly if the text of a list is too long. We would prefer a fixed width with text wrapping.
   

2. In lists that are divided into two columns, the right column is not left-aligned
   

3. Bound lists are displayed centered and therefore run over the frame on the left and right. We would prefer a left-justified display with fixed width and text wrapping.
   

4. Candidate names in bound lists are wrapped even though there is still white space.
   

Expected Behavior

We would prefer the list names to be left-aligned and also have text wrapping. For bound lists we would like to reduce the white space between the candidates a bit. Multi-column lists should be left-aligned in all columns.

Steps To Reproduce

No response

Environment

- OS:
- Web browser:

Tasks

Tasks

Beta Give feedback

1. Issue has been triaged
2. Successful replication of the defect
3. Successful defect resolution merged

Master PRs

Beta Give feedback

1. 🐞 List layout issues (#409) voting-booth#410
   bug +1

Stable PRs

Beta Give feedback

1. 🐞 List layout issues voting-booth#409
   bug +1

Additional context

No response

[edulix]

Thanks for the report @markgrafd with detailed screenshots. Can you please provide some elections.json configs for each use-case to easily replicate the issue?

[markgrafd]

@edulix Thank you for looking at this. Please find attached 2 configs
Demo.zip

[edulix]

Thanks for the report. Let me go through the different issues:

Issue 1

I have been able to replicate issue only with screen size less than 1200px, but nevertheless:

Before:

After applying the fix, the four columns are shown:

Issue 2

I have not been able to replicate the issue, so probably it's related to some specific custom css you apply to your elections. Please @ElectricPaperInformationssystemeGmbH (Sergiy) try to replicate the issue in the demo environment:

Issue 3

I have been able to replicate issue:

Before:

After applying the fix, the text wrapping happens correctly:

Please note that depending on the size of the text there might be multiple lines and this would mess up the vertical alignment of the candidates. There's no easy fix for that, other than trying to set a minimum height for the header...

Issue 4

I cannot easily replicate that - I'd suggest to try to replicate it in our demo environment @ElectricPaperInformationssystemeGmbH (Sergiy).

I believe this is mainly related to our default which is to always leave space for the image. I reduced the default padding to the right too. It's also related to the custom css that moves that to the right in EPI election's css styles. You can use the following css excerpt to hide the candidate image div in the election:

[avb-review-ballot-v2] .vertilize-wrapper .vertilize .vertilize-col.answer-image, [avb-simultaneous-question-answer-v2] .vertilize-wrapper .vertilize .vertilize-col.answer-image, [avb-simultaneous-questions-v2-screen] .vertilize-wrapper .vertilize .vertilize-col.answer-image { display: none; }

Explanation: leaving always the space for the candidate image was an explicit design decision so it's not a bug. The motivation was the fact that sometimes there might be an election where some candidates do have an image and others don't, so to align the name of the candidates correctly we left it always on, knowing that this can be easily fine-tuned with css if we want to hide it - which is exactly the solution we provided you above.

Before:

After:

Please let us know if this makes sense so we can merge it.

[markgrafd]

@edulix Thank you very much. Please have a look at: https://vnext.gremienwahlen.de/booth/3505/demo-vote In the second ballot there is much white space and the elements are not alligned properly. We know that this is a responsive display and is therefore difficult to handle. In any case, it's really nice that the list names now wrap around. We should refrain from fixed heights. We would still be happy if you could merge this, but maybe you can reduce the white space a bit more. It is also strange to us why individual elements are shifted so far.

[edulix]

THanks for the review @markgrafd . As I mentioned for issue 3 in my comment, this is related to the space left for the image of the candidate, and this is by design for the reasons mentioned in my comment too. BUT you guys can hide that with the election custom_css, as also mentioned. Here is how it looks, in the same link you provided but applying (manually, using Chrome DevTools) the custom css fix:

[markgrafd]

@edulix That looks much better. Thank you very much for the hint. We will keep an eye on that. Feel free to close this ticket.