CODEWITHSUNDEEP
javascripttwitter-bootstrap-3tinymce
per källström
per källström

Reputation: 169

tinyMCE the textbox is showing beneath the editor

For some reason the textbox which tinymce uses is shown beneath the editor, am I doing something wrong here?

this is what it looks:

enter image description here

<head>
<title>---</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="----">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="scripts/jquery-2.2.0.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="tinymce.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<script>
tinymce.init({
    selector: "#edit",theme: "modern",
    plugins: [
    "advlist autolink link image lists charmap hr anchor pagebreak",
    "visualblocks visualchars media nonbreaking",
    "table contextmenu emoticons paste textcolor responsivefilemanager code"
    ],
    toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
    toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | code ",
    image_advtab: true ,

    external_filemanager_path:"filemanager/",
    filemanager_title:"Responsive Filemanager" ,
    external_plugins: { "filemanager" : "filemanager/plugin.min.js"}
});
</script>
</head>

in the body:

 <div class="row">
        <div class="textarea-container">
            <textarea class="normal" id="edit" name="edit" rows="20" cols="80"></textarea>
        </div>
        </div>

Upvotes: 0

Views: 32

Answers (1)

Shayan
Shayan

Reputation: 966

you code has no problem, but one of things that make this problem is this

.normal{
  display: block !important;
}

you may use some custom css that do this. for more details. please add an screen shot of page, and you console, and your css

Upvotes: 1

Related Questions