Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly.

However, there are times when there are videos placed above the content. In such cases, when I click on the textarea to edit, the video player above the content obscures or hides the toolbar behind it.

Is there a way to adjust the z-index of the toolbar? (Preferably) Or should I consider relocating the toolbar?

Below is the code snippet I am using:

tinyMCE.init({
        mode : "textareas",
        editor_selector : "combo123",
        theme: "advanced",
        plugins : "save, paste, autoresize, asciimath, asciisvg",
        theme_advanced_styles: "Foo=foo, Bar=bar",
        content_css : "/css/tiny_mce.css"
});
jquerycsstinymce

Answer №1

Make sure the z-index of tinymce is raised to avoid being overwritten by another div

<style>
    .tox-tinymce-aux{z-index:99999999999 !important;}
</style>

Answer №2

After the initial setup, you have the option to adjust the z-index with the setup parameter

setup : function(ed) {
    ed.onInit.add(function(ed){
        $('tr.mceFirst').css('z-index','1');
    });
}),

Answer №3

To ensure the tinyMCE doesn't overlap the textarea, encase the textarea within a container and adjust the z-index of the container.

<div style="z-index: 15;"><textarea></textarea></div>

Answer №4

If the video player relies on Flash technology, implementing this solution may not be effective.

According to this webpage, adding the "opaque" attribute to the "wmode" parameter of the player could potentially resolve the issue with z-index. I have yet to verify this claim:

Answer №5

It appears that you have included two content_css files in your Notice, when only one should be used

The purpose of content_css is to add styling specific to your site. You can use CSS to customize the look of textareas, setting their width and height accordingly

tinyMCE.init({
        mode : "textareas",
        editor_selector : "combo123",
        theme : "advanced",
        plugins : "save, paste, autoresize, asciimath, asciisvg",

        theme_advanced_styles: "Foo=foo, Bar=bar",
        
        content_css : "/css/yoursite.css"
  });

Answer №6

Here is the solution I used

$(document).on('focusin', function (e) {
   if ($(e.target).closest(".mce-window").length) 
      e.stopImmediatePropagation();
});

Answer №7

If you're using Angular, simply include this code snippet in your component's SCSS file:

::ng-deep .tox-tinymce-inline {
  z-index: 200 !important;
}

Answer №8

setInterval(() => { FloatingPanel.zIndex = 99; }, 1000);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the value of a nested JSON object with a dynamic key

Currently, I am attempting to log a JSON key that is dynamic to the console. However, there is another nested object inside the main object that I also need to access a value from. The key of this nested object contains special characters, so I have been u ...

javascriptjqueryjson

How to Generate a Doughnut Graph with JSON and the chart.js Library

Exploring chart.js for analytics is a new experience for me. I've been searching online for a comprehensive guide on how to pass JSON data from an SQL Database using LINQ Lambda expression into chart.js within a .NET environment. Unfortunately, I have ...

jqueryjsonchart.js

Tips on choosing a jQuery unordered drop-down list with Selenium WebDriver

When dealing with a dropdown that has the select2 class from jQuery, I am having trouble selecting specific options like Apple or Orange. Any suggestions on how to tackle this kind of dropdown list? Your help would be greatly appreciated. Here is an examp ...

javajqueryselenium-webdriverdrop-down-menujquery-select2

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

javascriptjqueryhtmljsonajax

Display array information within a table using ajax

Currently working with the Zend Framework to develop a website. I have an array called $shadow which contains IDs of individuals. The query for $shadow runs smoothly in the Model and gets called in the Controller without any issues. However, now I need t ...

phpjquerymysqlajaxzend-framework

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Tips for keeping a div centered even when the window is resized to smaller than the background width

I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image ...

htmlcss

Tips for Personalizing Bootstrap 4.3 Through BootstrapCDN

I'm having trouble customizing the Bootstrap 4.3 BootstrapCDN by linking an external CSS file to override it. Even though I have placed the custom CSS file below the Bootstrap one, it doesn't seem to be taking effect. Can anyone explain why? Th ...

htmlcssbootstrap-4

What is the best way to conceal the dt tag when the dd tag contains no value

Is there a way to hide the "Subject" if the "subject_title" field is empty? <dt class="col-sm-6 text-dark" >Subject</dt> <dd class="col-sm-6">{{$course_dtl->subject_title }}</dd> For example, I would li ...

javascriptphphtmlcsslaravel

Encountering an Unhandled Reference Issue while Using JavaScript and AJAX

This is a td element I created using JavaScript: '<td contenteditable="true" onBlur="saveToDatabase(this,s1,' + d.pid + ')" onClick="showEdit(this);">' + d.s1+ '</td>' + I need to pass the value of the saveToData ...

javascriptjqueryajax

Having trouble with showing dynamic data in column2 of my HTML layout, and the alignment doesn't look quite right in HTML

I'm working with this HTML file, attempting to create a two-column layout using HTML and CSS. I want one column to be labeled REQUEST and the other RESPONSE. When a value is entered in the text field in Column 1, it should display a response in Column ...

htmlcssangularforms

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

Center the content within the div

Is there a way to center the content of the second column within this div? I've tried various methods without success so far. I'm currently using Bootstrap 4. Can anyone provide guidance on how to achieve this? <div class="card"> < ...

htmlcssbootstrap-4

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not wo ...

htmlcssflexbox

Populating a form field using another input

I am facing an issue with retrieving the price of a product in one field when the product name is selected in another field on a simple POS system. It works fine for the first product, but when I add another row for the next product, the price does not dis ...

javascriptphpjquery

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

javascriptjqueryhtmlcss

JQuery's is() function is returning a true value

I am facing a dilemma with a particular string that can either represent text or an anchor tag with text. I have implemented some logic to always return the text in the following way: $(text).is('a') ? $(text).text() : text; The idea behind ...

javascriptjquery

Incorporating existing CSS styles into a new CSS file

I'm a little confused by the title, so let me clarify with an example. Let's say I have the following CSS code inside a file: #container_1 { width:50%; border:1px solid black; } #container_2 { background-color:red; padding:5px; ...

css

Customize JQGrid columns by adding new columns at run time

I'm new to working with J Query and I'm experimenting with some samples on http://www.trirand.com/blog/jqgrid/jqgrid.html where I noticed that column names are written in JS and displayed in the Grid. My requirement is to show the Column they se ...

jqueryjqgrid