MDL-69453 core_form: improve form UI icons and alignment

[moodle.git] / lib / form / templates / element-group.mustache

{{< core_form/element-template }}
    {{$label}}
        {{^element.hiddenlabel}}
            <p id="{{element.id}}_label" class="mb-0 word-break" aria-hidden="true">
                {{{label}}}
            </p>
        {{/element.hiddenlabel}}
    {{/label}}
    {{$element}}
        <fieldset class="w-100 m-0 p-0 border-0">
            <legend class="sr-only">{{label}}</legend>
            <div class="d-flex flex-wrap align-items-center">
            {{#element.elements}}
                {{{separator}}}
                {{{html}}}
            {{/element.elements}}
            </div>
        </fieldset>
    {{/element}}
{{/ core_form/element-template }}
{{#js}}
require(['jquery'], function($) {
    $('#{{element.id}}_label').css('cursor', 'default');
    $('#{{element.id}}_label').click(function() {
        $('#{{element.id}}')
            .find('button, a, input:not([type="hidden"]), select, textarea, [tabindex]')
            .filter(':not([disabled]):not([tabindex="0"]):not([tabindex="-1"])')
            .first().focus();
    });
});
{{/js}}