Editor Rendering Isuse

[gkedParticipant]

Hello guys,
I am experiencing stupid this issue with rendering, which I think, happens because of one of js file missing?
I am not sure. Anyways, I am sending the link to the screenshot for visual aid.

List of jqx widgets files that I am referencing in my _layout template:

   <!--jqxWidgets -->
    <link href="~/jqwidgets/jqxCustomTheme.css" rel="stylesheet" />
    <link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <link href="~/jqwidgets/styles/jqx.arctic.css" rel="stylesheet" />
    <script src="~/jqwidgets/globalization/globalize.js"></script>

    <script src="~/jqwidgets/jqxcore.js"></script>                   
    <script src="~/jqwidgets/jqxbuttons.js"></script>                
    <script src="~/jqwidgets/jqxcalendar.js"></script>               
    <script src="~/jqwidgets/jqxcheckbox.js"></script>               
    <script src="~/jqwidgets/jqxdata.js"></script>                   
    <script src="~/jqwidgets/jqxdatetimeinput.js"></script>          
    <script src="~/jqwidgets/jqxdropdownlist.js"></script>           
    <script src="~/jqwidgets/jqxgrid.js"></script>    
    <script src="~/jqwidgets/jqxgrid.edit.js"></script>              
    <script src="~/jqwidgets/jqxgrid.selection.js"></script>         
    <script src="~/jqwidgets/jqxgrid.sort.js"></script>              
    <script src="~/jqwidgets/jqxgrid.filter.js"></script>            
    <script src="~/jqwidgets/jqxdata.export.js"></script>            
    <script src="~/jqwidgets/jqxgrid.export.js"></script>            
    <script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>     
    <script src="~/jqwidgets/jqxgrid.storage.js"></script>     
    <script src="~/jqwidgets/jqxgrid.grouping.js"></script>     
    <script src="~/jqwidgets/jqxinput.js"></script>                  
    <script src="~/jqwidgets/jqxknockout.js"></script>
    <script src="~/jqwidgets/jqxlistbox.js"></script>
    <script src="~/jqwidgets/jqxmenu.js"></script>
    <script src="~/jqwidgets/jqxnumberinput.js"></script>
    <script src="~/jqwidgets/jqxpanel.js"></script>
    <script src="~/jqwidgets/jqxradiobutton.js"></script>
    <script src="~/jqwidgets/jqxscrollbar.js"></script>
    <script src="~/jqwidgets/jqxtooltip.js"></script>
    <script src="~/jqwidgets/jqxwindow.js"></script>    
    <script src="~/jqwidgets/jqxsplitter.js"></script>
    <script src="~/jqwidgets/jqxtabs.js"></script>
    <script src="~/jqwidgets/jqxexpander.js"></script>
    <script src="~/jqwidgets/jqxeditor.js"></script>
    <script src="~/jqwidgets/jqxdropdownbutton.js"></script>
    <script src="~/jqwidgets/jqxcolorpicker.js"></script>        
    

Here is contents of my js file:

Messageboard = new function () {

    //define selectors here
    var Selectors = new function () {
        this.messagebox = "#editorArea";
    }
        
    //set controls function to setup a messagebox
    function initializeMessagebox() {
        $(Selectors.messagebox).jqxEditor({
            height: 300,
            width: 800
        });           
    }

    // initialize
    this.initialize = function () {
       initializeMessagebox();        
    };
}

and this is my html file(I am using MS MVC5, so it is cshtml file)

<!--Message board partial page-->
<h4 style="margin-left: 10px; margin-bottom: 5px">Messageboard</h4>
<div id="messageboard">
    <table id ="messageboardSpace">
        <tr>
            @*<td width="125px"><span id="editorLabel">Messageboard</span></td>*@
            <td>
                <textarea id="editorArea"></textarea>
            </td>
        </tr>
    </table>    
</div>

Do you happen to know what is causing the issue?
Thank you,

[gkedParticipant]

Hello,
Actually, I figured it out.
The problem was we used earlier version of jqwidgets before.
Now, that we needed editor box, we had to upgrade to the version 3.4. Consequently, I forgot to update CSS files with new version. Hence the rendering issues.
Thank you.

[Author]

Posts