mirror of
https://github.com/wintercms/winter.git
synced 2024-06-28 05:33:29 +02:00
When checkbox list has more than 10 items, display it in a scrollable area
This commit is contained in:
parent
784faed606
commit
dfee8dc5c0
@ -7433,6 +7433,19 @@ label {
|
||||
.field-textarea.size-giant {
|
||||
min-height: 350px;
|
||||
}
|
||||
.field-checkboxlist-scrollable {
|
||||
background: white;
|
||||
border: 1px solid #e2e2e2;
|
||||
padding-left: 15px;
|
||||
height: 300px;
|
||||
}
|
||||
.field-checkboxlist-scrollable .checkbox {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.field-checkboxlist-scrollable .checkbox ~ .checkbox {
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-buttons {
|
||||
padding-bottom: 20px;
|
||||
font-size: 0;
|
||||
|
@ -151,7 +151,7 @@ label {
|
||||
|
||||
.custom-checkbox,
|
||||
.custom-radio {
|
||||
label {cursor: default;}
|
||||
label { cursor: default; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -171,6 +171,22 @@ label {
|
||||
&.size-giant { min-height: @size-giant; }
|
||||
}
|
||||
|
||||
.field-checkboxlist-scrollable {
|
||||
background: white;
|
||||
border: 1px solid @color-list-border;
|
||||
padding-left: 15px;
|
||||
height: @size-large + 100;
|
||||
|
||||
// First checkbox
|
||||
.checkbox {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// All others
|
||||
.checkbox ~ .checkbox { margin-top: 0; }
|
||||
}
|
||||
|
||||
.form-buttons {
|
||||
.clearfix();
|
||||
padding-bottom: 20px;
|
||||
|
@ -114,7 +114,10 @@ return [
|
||||
'or' => 'or',
|
||||
'confirm_tab_close' => 'Do you really want to close the tab? Unsaved changes will be lost.',
|
||||
'behavior_not_ready' => 'Form behavior has not been initialized, check that you have called initForm() in your controller.',
|
||||
'preview_no_files_message' => 'Files are not uploaded'
|
||||
'preview_no_files_message' => 'Files are not uploaded',
|
||||
'select' => 'Select',
|
||||
'select_all' => 'all',
|
||||
'select_none' => 'none',
|
||||
],
|
||||
'relation' => [
|
||||
'missing_definition' => "Relation behavior does not contain a definition for ':field'.",
|
||||
|
@ -4,6 +4,19 @@
|
||||
?>
|
||||
<?php if (count($field->options)): ?>
|
||||
|
||||
<?php if (count($field->options) > 10): ?>
|
||||
<!-- Quick selection -->
|
||||
<small>
|
||||
<?= e(trans('backend::lang.form.select')) ?>:
|
||||
<a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', true)"><?= e(trans('backend::lang.form.select_all')) ?></a>,
|
||||
<a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', false)"><?= e(trans('backend::lang.form.select_none')) ?></a>
|
||||
</small>
|
||||
|
||||
<!-- Scrollable Checkbox list -->
|
||||
<div class="field-checkboxlist-scrollable" id="<?= $field->getId('scrollable') ?>">
|
||||
<div class="control-scrollbar" data-control="scrollbar">
|
||||
<?php endif ?>
|
||||
|
||||
<?php $index = 0; foreach ($field->options as $value => $option): ?>
|
||||
<?php
|
||||
$index++;
|
||||
@ -12,7 +25,6 @@
|
||||
$option = array($option);
|
||||
?>
|
||||
<div class="checkbox custom-checkbox">
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
id="<?= $checkboxId ?>"
|
||||
@ -30,6 +42,11 @@
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
|
||||
<?php if (count($field->options) > 10): ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<!-- No options specified -->
|
||||
|
Loading…
x
Reference in New Issue
Block a user