CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4jquery-uijquery-plugins
MikePR
MikePR

Reputation: 2986

jQuery Text Editor (JQTE)

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:

enter image description here

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 })
});

Upvotes: 0

Views: 8090

Answers (3)

user8627076
user8627076

Reputation: 1

.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*/
}

Upvotes: 0

epus
epus

Reputation: 139

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!

Upvotes: 1

Erik
Erik

Reputation: 957

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.

Upvotes: 1

Related Questions