Checkbox lists are not displayed correctly in builds 460 - 461

[summercms]

Link: #4573 (comment)

Should look like this:

They look like this:

My PR: #4599

Altered commit afterwards: 6daea25

Will try and re-fix things (when I get some free time).

[summercms]

Code that fixes the above is taken directly from my pr:

.checkbox {display:block;min-height:20px;margin-top:10px;margin-bottom:15px;padding-left:20px}
.field-checkboxlist:not(.is-scrollable) {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#fff;border:1px solid #e2e2e2}
.field-checkboxlist .checkboxlist-controls {padding:15px 15px 0;border-bottom:1px solid #e2e2e2;color:#2a3e51;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}
.field-checkboxlist .checkboxlist-controls a {margin-right:15px;margin-bottom:15px;text-decoration:none;color:#2a3e51}
.field-checkboxlist .checkboxlist-controls > div {padding-right:15px;padding-bottom:15px}
.field-checkboxlist .checkboxlist-controls .search-input-wrap {margin-left: auto}
.field-checkboxlist-container:not(.is-scrollable) {padding: 20px 20px 2px 20px}

Add the above PR code and you get this screenshot:

Extra code to fix an extra issue:

into this:

Fixes the checkboxes with scroll and adds a header control box.

Also add this code:

.field-checkboxlist-scrollable .control-scrollbar.drag-scrollbar.vertical {
    padding-left: 5px;
}
.field-checkboxlist.is-scrollable .checkboxlist-controls {
    background: #fff;
    border: 1px solid #e2e2e2;
}

• Screenshots were done in build 460.

(Wait for admins to review as @daftspunk changed my pr code)

But at least this is a working solution in this comment.

[LukeTowers]

@ayumi-cloud could you submit a PR with this information with a screenshot of the demo page that you have as it is in 461 right now with how it should look and the code to make it look that way?

[LukeTowers]

Also did you submit that demo page to the Test Plugin? It would be very helpful to have

[summercms]

octobercms/test-plugin#82

[summercms]

Sure, will try and get a pr done in next few hours and test it on v461.

[daftspunk]

This occurs due to the introduction of the quickselect option. The feature requires a reconstruction of the form field's markup and styles. The current implementation used a "hacked" approach that did not include this reconstruction, therefore the rendering appears inconsistent according to the conditions

The issue has been accepted and will be processed soon. If you require this feature to be expedited, consider purchasing a premium support subscription

Note a PR that includes any additional hacks to fix this is unlikely to be accepted

[daftspunk]

Please be advised this is the intended appearance of this UI

Fixed by 21f8c5f
Refs #4827

[Eoler]

Fixed by 21f8c5f
Refs #4827

Is preview mode #4817 fixed by this too?

[summercms]

Have updated daftspunk commit here to allow support for tap-targets on touch screen devices, see here for the pr: #4841