Button

Button Style

Use button style utility to quickly style checkboxes like buttons.

button style

<div class="r1 c1 hf-button-style">
    <input id="doku-check1" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox' }" />
</div>
<div class="r1 c1 hf-button-style hover">
    <input id="doku-check2" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Hover' }" />
</div>
<div class="r1 c1 hf-button-style disabled">
    <input id="doku-check3" type="checkbox" value="value" 
        data-win-control="HFWinJSCtrl.CheckBox"
        data-win-options="{ label: 'Test Checkbox Disabled', disabled: true }" />
</div>

Button Inline

Use button inline utility to quickly place a small button inline with a TextField under a label.

button inline

<div class="r1 c1 hf-button-inline">
    <input type="text" id="doku_input" data-win-control="HFWinJSCtrl.TextField" 
        data-win-options="{
            label: 'Test Button Inline'
        }" />
    <div id="doku_reverseGeolocator" class="pdf-hide" 
        data-win-control="HFWinJSCtrl.ReverseGeolocatorButton"
        data-win-options="{
            buttonType: 'small',
            targetFields: {
                'address_zip_code':'postal_code', 
                'address_city': 'locality', 
                'address_street_and_no':'route + street_number' 
            },
            typesSeperator: ', '
        }"></div>
</div>