Show More
form-inline.html
173 lines
| 4.7 KiB
| text/html
|
HtmlLexer
r1 | <%inherit file="/debug_style/index.html"/> | |||
<%def name="breadcrumbs_links()"> | ||||
r1900 | ${h.link_to(_('Style'), h.route_path('debug_style_home'))} | |||
r1 | » | |||
${c.active} | ||||
</%def> | ||||
<%def name="real_main()"> | ||||
<div class="box"> | ||||
<div class="title"> | ||||
${self.breadcrumbs()} | ||||
</div> | ||||
<div class='sidebar-col-wrapper'> | ||||
${self.sidebar()} | ||||
<div class="main-content"> | ||||
<h2>Inline form elements</h2> | ||||
<p>A few places have a button close to an input element or similar.</p> | ||||
<h3>Submit button after select element</h3> | ||||
<div class="bs-example"> | ||||
## TODO: johbo: not sure if we should add a class like .form-inline | ||||
## here. Seems to work good enough right now. | ||||
<form method="post" action=""> | ||||
<div class="form"> | ||||
<div class="fields"> | ||||
<select id="example_select" > | ||||
<option value="#">${_('Templates...')}</option> | ||||
<option value="ga">Google Analytics</option> | ||||
<option value="clicky">Clicky</option> | ||||
<option value="server_announce">${_('Server Announcement')}</option> | ||||
</select> | ||||
<input type="submit" value="Set" id="example_save" class="btn"> | ||||
</div> | ||||
<script> | ||||
$(document).ready(function() { | ||||
$('#example_select').select2({ | ||||
containerCssClass: 'drop-menu', | ||||
dropdownCssClass: 'drop-menu-dropdown', | ||||
dropdownAutoWidth: true, | ||||
minimumResultsForSearch: -1 | ||||
}); | ||||
}); | ||||
</script> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h3>Submit button after input element</h3> | ||||
<div class="bs-example"> | ||||
## TODO: johbo: not sure if we should add a class like .form-inline | ||||
## here. Seems to work good enough right now. | ||||
<form method="post" action=""> | ||||
<div class="form"> | ||||
<div class="fields"> | ||||
<input type="text" id="example_input" placeholder="Placeholder..."> | ||||
<input type="submit" value="Set" id="example_save" class="btn"> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h3>Submit and Reset button after input element</h3> | ||||
<div class="bs-example"> | ||||
## TODO: johbo: not sure if we should add a class like .form-inline | ||||
## here. Seems to work good enough right now. | ||||
<form method="post" action=""> | ||||
<div class="form"> | ||||
<div class="fields"> | ||||
<input type="text" id="example_input" placeholder="Placeholder..."> | ||||
<input type="submit" value="Set" id="example_save" class="btn"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn"> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h3>Checkbox wrapped in the label itself</h3> | ||||
<div class="bs-example"> | ||||
<div class="field"> | ||||
<label><input id="example_label_checkbox" type="checkbox">Checkbox with label around it</label> | ||||
</div> | ||||
<div class="field"> | ||||
<label><input id="example_label_checkbox" type="radio">Radio with label around it</label> | ||||
</div> | ||||
</div> | ||||
<h3>Checkbox wrapped in the label itself</h3> | ||||
<div class="bs-example"> | ||||
<div class="form"> | ||||
<div class="fields"> | ||||
<label>Label</label> <input type="text"> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class="bs-example"> | ||||
<div class="form"> | ||||
<div class="fields"> | ||||
<label>Label</label> | ||||
<select id="02_example_select1" > | ||||
<option value="#">${_('Templates...')}</option> | ||||
<option value="ga">Google Analytics</option> | ||||
<option value="clicky">Clicky</option> | ||||
<option value="server_announce">${_('Server Announcement')}</option> | ||||
</select> | ||||
<label>Label</label> | ||||
<select id="02_example_select2" > | ||||
<option value="#">${_('Templates...')}</option> | ||||
<option value="ga">Google Analytics</option> | ||||
<option value="clicky">Clicky</option> | ||||
<option value="server_announce">${_('Server Announcement')}</option> | ||||
</select> | ||||
</div> | ||||
</div> | ||||
<script> | ||||
$(document).ready(function() { | ||||
$('#02_example_select1').select2({ | ||||
containerCssClass: 'drop-menu', | ||||
dropdownCssClass: 'drop-menu-dropdown', | ||||
dropdownAutoWidth: true, | ||||
minimumResultsForSearch: -1 | ||||
}); | ||||
$('#02_example_select2').select2({ | ||||
containerCssClass: 'drop-menu', | ||||
dropdownCssClass: 'drop-menu-dropdown', | ||||
dropdownAutoWidth: true, | ||||
minimumResultsForSearch: -1 | ||||
}); | ||||
}); | ||||
</script> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</%def> | ||||