You would do this when you want to avoid a lot of work with tweaking font sizes at certain breakpoints to make everything demanded by users fit without wrapping.
I guess that's why Google Sites uses this pattern as a default for their navigation.
This duplicates the behavior of the Sites approach in that we collapse the entire menu down on portrait mobile – turn your phone sideways to see the effect if visiting on mobile.
NOTE: Fancybox-4 is still in Alpha. Be sure to check CDN for updates before using in production.
<script src="assets/plugins/global/plugins.bundle.js"></script>maxlengthHTML attribute to control the total number of characters allowed.$('#kt_docs_maxlength_basic').maxlength({
warningClass: "badge badge-warning",
limitReachedClass: "badge badge-success"
});<label class="form-label">Basic example</label>
<input type="text" class="form-control" id="kt_docs_maxlength_basic" maxlength="10" />
<span class="fs-6 text-muted">The badge will show up by default when the remaining chars are 3 or less</span>thresholdoption is to set the minimum number of characters that will display the badge.$('#kt_docs_maxlength_threshold').maxlength({
threshold: 20,
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});<label class="form-label">Threshold example</label>
<input type="text" class="form-control" id="kt_docs_maxlength_threshold" maxlength="25" />
<span class="fs-6 text-muted">Set threshold value to show there are 20 chars or less left</span>alwaysShow: truein the Javascript.$('#kt_docs_maxlength_always_show').maxlength({
alwaysShow: true,
threshold: 20,
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});<label class="form-label">Threshold example</label>
<input type="text" class="form-control" id="kt_docs_maxlength_always_show" maxlength="20" />
<span class="fs-6 text-muted">Show the counter on input focus</span>$('#kt_docs_maxlength_custom_text').maxlength({
threshold: 20,
warningClass: "badge badge-danger",
limitReachedClass: "badge badge-success",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});<label class="form-label">Custom text example</label>
<input type="text" class="form-control" id="kt_docs_maxlength_custom_text" maxlength="20" />
<span class="fs-6 text-muted">Display custom text on input focus</span>textarea.$('#kt_docs_maxlength_textarea').maxlength({
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});<label class="form-label">Textarea example</label>
<textarea class="form-control" id="kt_docs_maxlength_textarea" maxlength="20" placeholder="" rows="6"></textarea>
<span class="fs-6 text-muted">Bootstrap maxlength supports textarea as well as inputs</span>$('#kt_docs_maxlength_position_top_left').maxlength({
placement: 'top-left',
warningClass: "badge badge-danger",
limitReachedClass: "badge badge-primary"
});<label class="form-label">Set Position example</label>
<input type="text" class="form-control" id="kt_docs_maxlength_position_top_left" maxlength="20" />
<input type="text" class="form-control" id="kt_docs_maxlength_position_top_right" maxlength="20" />
<input type="text" class="form-control" id="kt_docs_maxlength_position_bottom_left" maxlength="20" />
<input type="text" class="form-control" id="kt_docs_maxlength_position_bottom_right" maxlength="20" />
<span class="fs-6 text-muted">The field counter can be positioned at the top, bottom, left or right.</span>$('#kt_docs_maxlength_basic_modal').maxlength({
warningClass: "badge badge-primary",
limitReachedClass: "badge badge-success"
});<!--begin::Modal-->
<div class="modal fade" tabindex="-1" id="kt_modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<label class="form-label">Basic example</label>
<input type="text" class="form-control mb-3" id="kt_docs_maxlength_basic" maxlength="10" />
<span class="fs-6 text-muted">The badge will show up by default when the remaining chars are 10 or less</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--end::Modal-->
