Responsive

18 Dec 20183 minutes to read

The SpellCheck control has support for responsive behavior based on client browser’s width and height. To enable responsive, isResponsive property should be true.

The following code example describes the above behavior.

HTML

<div id="SpellCheck"></div>
    
<script type="text/javascript">
    $(function () {
            $("#SpellCheck").ejSpellCheck({                
                dictionarySettings: {
                    dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
                    customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
                },
                isResponsive: true
            });
        });      

</script>

The dialog of spell check control is rendering based on the client browser’s width and height. Refer to the following code to render the spellcheck dialog control with responsive.

HTML

<div id="SpellCheck"></div>

<div>
     <input type="button" id="Spell" />
</div>

<script type="text/javascript">
    $(function () {
            $("#SpellCheck").ejSpellCheck({                
                dictionarySettings: {
                    dictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/CheckWords",
                    customDictionaryUrl: "http://js.syncfusion.com/demos/ejservices/api/SpellCheck/AddToDictionary"
                },
                isResponsive: true
            });
    
            $("#Spell").ejButton({
                width: 100,
                height: 25,
                click: "showDialog",
                text: "Spell check"
            });
        });      
    
    function showDialog() {
        var spellObj = $("#SpellCheck").data("ejSpellCheck");
        spellObj.showInDialog();
    }

</script>

Mobile Rendering Screenshot: