jQuery Text Editor (JQTE)

Question

I recently incorporated the jQuery Text Editor plugin ( here ), in my development of an MVC project.

It was straightforward to add the plugin. However when executing my View the text editor renders as follow:

This is the code I'm using in my View:

JS references (omit the greater than and less than characters due to it's not rendered in the question):

<script src="~/Scripts/jquery-1.11.1.min.js">
<script src="~/Plugins/jQuery-TE/jquery-te-1.4.0.min.js">
<link href="~/Plugins/jQuery-TE/jquery-te-1.4.0.css" rel="stylesheet">

HTML:

<div class="row">
    <div class="col-md-9">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Executive Summary
            </div>
            <div class="panel-body">
                <form role="form">
                    <div class="form-group">
                        <textarea name="textarea" class="jqte-test" placeholder="Enter some text">                     
                        </textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>  
</div>

Script for the JQTE:

$('.jqte-test').jqte();

// settings of status
var jqteStatus = true;
$(".status").click(function () {
    jqteStatus = jqteStatus ? false : true;
    $('.jqte-test').jqte({ "status": jqteStatus })
});

Answer 1

I change the CSS rule

.jqte_tool.jqte_tool_1 .jqte_tool_label {
position:relative;
display:block;
padding:3px;
width:70px;
height:16px; /* change it to 20px; */
overflow:hidden; }

That's how it worked for me.

Answer 2

Maybe for someone else:

.jqte_tool.jqte_tool_1 .jqte_tool_label {
    position:relative;
    display:block;
    padding:3px;
    width:70px;
    height:21px; /*change*/
    overflow:hidden;
}
.jqte_tool_label{
    padding-top: 1px !important; /*add*/
    height: 25px !important; /*add*/
}

works for me!

Answer 3

.tab_point_decr, .tab_point_decr img, .tab_point_decr div {
    overflow: visible !important; /*change*/
}
.jqte_toolbar {
    overflow: auto !important;
    padding: 3px 4px;
    background: #EEE;
    border-bottom: #BBB 1px solid;
    position: inherit;
    overflow: visible !important; /*add*/
    height: 35px; /*add*/
}
.jqte_fontsizes { 
    height:auto; /*change*/
}
.jqte_cpalette {
    z-index:20; /*add*/
}