MDL-69453 core_form: improve form UI icons and alignment
[moodle.git] / lib / form / templates / element-group.mustache
1 {{< core_form/element-template }}
2     {{$label}}
3         {{^element.hiddenlabel}}
4             <p id="{{element.id}}_label" class="mb-0 word-break" aria-hidden="true">
5                 {{{label}}}
6             </p>
7         {{/element.hiddenlabel}}
8     {{/label}}
9     {{$element}}
10         <fieldset class="w-100 m-0 p-0 border-0">
11             <legend class="sr-only">{{label}}</legend>
12             <div class="d-flex flex-wrap align-items-center">
13             {{#element.elements}}
14                 {{{separator}}}
15                 {{{html}}}
16             {{/element.elements}}
17             </div>
18         </fieldset>
19     {{/element}}
20 {{/ core_form/element-template }}
21 {{#js}}
22 require(['jquery'], function($) {
23     $('#{{element.id}}_label').css('cursor', 'default');
24     $('#{{element.id}}_label').click(function() {
25         $('#{{element.id}}')
26             .find('button, a, input:not([type="hidden"]), select, textarea, [tabindex]')
27             .filter(':not([disabled]):not([tabindex="0"]):not([tabindex="-1"])')
28             .first().focus();
29     });
30 });
31 {{/js}}