When checkbox list has more than 10 items, display it in a scrollable area

This commit is contained in:
Sam Georges 2014-06-16 17:59:29 +10:00
parent 784faed606
commit dfee8dc5c0
4 changed files with 52 additions and 3 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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'.",

View File

@ -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 -->