Examples for Custom Styling of Validators

Sample Font-Awesome Icons

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button: Search

Search icon on a styled button: Search

Print icon:

Print icon on a styled link button: Print

Bootstrap Toggle ViewProvider.CheckBoxToggle

Properties & Samples This control inherits asp:CheckBox control and works just like it with the bootstrap toggle style applied.

Important Note: Bootstrap 4 does not contain btn-default anymore it was replaced with btn-secondary

AutoPostBack Set to True to have it post back to the server.

Enabled Set to False to disable the control server side.

TextOn Changes the text for when the toggle is "checked/On" Can take HTML.

TextOff Changes the text for when the toggle is "unchecked/Off Can take HTML

OnStyle Bootstrap enum for bootstrap styles: primary, success, info, warning, danger, default

OffStyle Same as OnStyle for the OffStyle

Height Set the height of the toggle. Only accepts pixels as units.

Width Set the width of the toggle. Only accepts pixels as units.

Bootstrap Modal

A modal that will open a dialog box at the top of the current page.

Test Select2 in Modals

To make sure that there is no weird z-ordering issues this is a test to make sure select2's function in modals using the site.css

Text Ellipsis NOTE: It is especially helpful to copy the text into the tooltip when using this.

Humanizer Examples

Humanizer has more capabilities than the small sample set shown here. Humanizer Documentation and Examples

DateTime.Now.AddDays(-1)

Normal ToString(): 5/18/2025 9:49:26 PM

Humanized: 2 days ago

DateTime.Now.AddHours(2)

Normal ToString(): 5/19/2025 11:49:26 PM

Humanized: 2 hours ago

"TheQuickBrownFox"

Humanized: The quick brown fox

Pluralize "People"

0 : 0 People

1 : 1 Person

10: 10 People

.ToOrdinalWords()

1: first

2: second

.Ordinalize()

1: 1st

2: 2nd

ByteSize object

(1000).Kilobytes().ToString(); 1000 KB

(1024).Kilobytes().Humanize(); 1 MB

(.5).Gigabytes().Humanize(); 512 MB

(1024).Gigabytes().ToString(); 1 TB

Bootstrap DatePicker

Bootstrap 4 WYSIWYG (Summernote)

For bootstrap 4 we are changing the wysiwyg to use Summernote. It is very easy to set up and very similar to how we initialized the old wysiwyg. Simply make a textarea or asp:Textbox and give it a selectable class. Then use the following JS to implement the control with whatever toolbar options you desire.

Some additional notes:

        $('.wysiwyg-placeholder').summernote({

            //onCreateLink : function(originalLink) {return originalLink;}, - add this to stop automatic http:// appending to links
            placeholder:'Place some test here...',
            height:150,
            width:900,
            toolbar: [
                ['style', ['bold', 'italic', 'underline']], //Text styling options
                ['fontsize', ['fontsize']], //Fontsize
                ['color', ['color']], //Text color
                ['para', ['ul', 'ol', 'paragraph']], //Paragraph options such as unordrered list or alignment 
                ['insert', ['link', 'picture']], //Inserting things such as images or links. Other options include videos or tables 
                ['misc', ['codeview']], //Miscellaneous items such as HTML view. Other options include fullscreen editor or undo/redo buttons.
            ]
        });
    

Multiline Text Ellipsis with DotDotDot

Note: Remember when using this library you HAVE to specifiy the height parameter so that it knows when to cut off the text.

You can either do this as a parameter when initializing the dotdotdot in js or do it through css on the span

Bootstrap Tooltips

Note for disabled buttons: bootstrap tooltips will not work on disabled buttons. You can wrap the button in a div and put the tooltip on the wrapper to get it to work but even then it is still buggy

For disabled buttons the best option would be to use a regular tooltip not bootstrap. To make this work add 'pointer-events: auto;' to .btn[disabled] in css.

Options:

Immediate - Add class "tip-immediate" this will cause the tooltip to show immediately rather than requiring a short hover before showing.

Position - you can add data-placement:"top" to set the position to the top, you may also use "bottom", "left", or "right".

(Note: If tooltip is being cut off for being too long, one solution is to add CSS element "max-width: none;" to .tooltip-inner for such tooltip.)

Supporting Mobile:

On display sizes less than 990px (bootstrap xs and sm) all tooltips will only show on click, not on hover. You may add the "tip-mobile" class to improve the UX for these smaller display sizes.

Items with the class "tip-mobile" will display a dotted underline on the text but they will also be set to display: inline; to support text wrapping. Wrap any tip-mobile elements in a div to get display: block and preserve the appropriate underlining.

Examples:

Toastr Notifications

AmCharts Examples

Power BI Embed Example