Language list too long in AWS contest configuration

[andreyv]

In the AWS contest configuration page, the "Allowed programming languages" row is becoming too long to fit on screen. See attached screenshot.

Listing one language per line (using <br/>) seems wasteful too, so I looked into allowing content wrapping in the corresponding table cell. The typical advice is to use table-layout: fixed; width: 100%; to achieve text wrapping in a table. However, this doesn't seem to work for me in Firefox. Furthermore, table-layout: fixed; results in a weird-looking first column (takes half of vertical space).

[wil93]

display: flex; flex-wrap: wrap;

On Sun, Apr 8, 2018, 12:15 PM Andrey Vihrov [email protected] wrote:

In the AWS contest configuration page, the "Allowed programming languages" row is becoming too long to fit on screen. See attached screenshot.

[image: screenshot-2018-4-8 admin test] https://user-images.githubusercontent.com/397308/38466183-ebaae626-3b2d-11e8-8adb-ad0b77bd61e5.png

Listing one language per line (using
) seems wasteful too, so I looked into allowing content wrapping in the corresponding table cell. The typical advice is to use table-layout: fixed; width: 100%; to achieve text wrapping in a table. However, this doesn't seem to work for me in Firefox. Furthermore, table-layout: fixed; results in a weird-looking first column (takes half of vertical space).

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cms-dev/cms/issues/930, or mute the thread https://github.com/notifications/unsubscribe-auth/ABOc8aUhb6GTVKHFTENIVdorX-wSeTYKks5tmeMtgaJpZM4TLewh .

[lw]

<select multiple>?

[wil93]

I didn't know select multiple (it can be tested here), it's neat but you have to CTRL + click (so a help text is needed) and, most importantly, a misclick can cause you to lose the subset you selected (and at that point you have to refresh the page to restore the list)

IMO in this case the wrapping works better

[wil93]

If someone wants to open a PR, I just tested that it's enough to add these CSS rules to the parent <td>:

display: flex
flex-wrap: wrap
width: 100%

[andreyv]

From a technical perspective, @lerks suggestion is on point. It does exactly what is needed and joins the choices semantically.

[lw]

And, possibly, with enough CSS and JS it will even render nicely! ;)

Here is something I just found on Google: https://silviomoreto.github.io/bootstrap-select/examples/

[stefano-maggiolo]

How about we use @wil93 suggestion and move to select multiple when we'll have a framework handling the "enough JS and CSS"?

[stefano-maggiolo]

https://github.com/stefano-maggiolo/cms/commit/ded1e19b556d968d12dea1e215225d448184dfc0