Some pages are experiencing a lack of visibility of Tinymce buttons

Currently, I am utilizing the tinymce plugin for image upload and it is functioning properly on one specific page.

However, on a different page, there is a sidebar located on the left side while the main content area is positioned on the right side. The tinymce plugin is situated in the content area on the right side, but on this particular page, the tinymce buttons do not appear. They only become visible if the browser window is resized to a medium size where the sidebar is hidden, allowing the tinymce textarea to occupy the entire width and consequently the buttons are displayed.

Can you suggest what might be causing this issue?

I have provided an example demonstrating the issue here: "jsfiddle.net/7b941us0/34".

jqueryhtmlcsstwitter-bootstraptinymce

Answer №1

Hey there, thank you for sharing your code snippet with JSFriddle.

The issue you're experiencing is due to the code in lines 1378 to 1380. By removing these lines, the problem is resolved.

It appears that you are hiding all buttons within the .adminContainer class. Simply removing this styling will restore the functionality.

.adminContainer button {
  display: none;
}

The reason the buttons reappear at a smaller parent's width is because you have specified their display property in a media query:

@media only screen and (max-width: 768px) {
  .adminContainer button {
    display: block;
  }
  (...)

To avoid this issue, I recommend targeting specific buttons using CSS classes.

Check out the updated JSFriddle example.

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

JQuery - stylish vertical accordion navigation menu

I'm currently working on a vertical accordion-style sidebar navigation system. Everything seems to be functioning properly, but I've encountered some issues with the icons that I'm using from Twitter Bootstrap 3. You can view the code on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Angular: Linking an href tag with a JSON key

I am working with a JSON object that includes the following value: {test_link : www.test.com} My goal is to retrieve this value and use it as a link in an HTML <a> tag, like so: <a href={{test_link}}> test </a> However, I am encounter ...

htmlangular

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

javascriptjqueryhtmlajax

CSS: Inject Text at the End of Input Text's Value

Hey there, I'm facing a minor issue. The user wants to add some funny text to an input field if a specific condition is met. For example: Normal Condition: the input field shows "#{model.user}" Abnormal condition: the input field should display "# ...

javacssjsf

Differences between Bootstrap 5 gutter and margin

I have a question that I'm struggling to understand. I've been looking at the Bootstrap v5 documentation and noticed a lot of changes from v4, particularly regarding gutters. Could someone please clarify the difference between using gutters and ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Leverage PHP to retrieve the value from a jQuery div element

One of my <div id="single-home-container"></div> is showing a value generated by a jQuery script. Is there a way to utilize PHP in order to retrieve that value for the purpose of passing it into a MySQL query? Thank you. ...

phpjquery

Difficulty with linking a CSS property to an HTML element using JavaScript

I'm currently working on building a custom carousel from scratch. Instead of using pre-made code snippets, I decided to challenge myself by creating one using setTimeout in JavaScript. However, I seem to be encountering an issue that I can't quit ...

javascripthtml

Question about transparency - HTML, CSS, and Bootstrap

I adjusted the opacity of the bootstrap card to 0.8, but now I want the table to be opaque while the rest of the card remains translucent. How can I achieve this effect? I attempted to add the style opacity : 1 to the table, but it didn't have the des ...

htmlcsstwitter-bootstrapbootstrap-4

Is it mandatory to include a DOCTYPE/DTD in XHTML5?

Currently in the process of developing a new language that converts to XML, I am facing the limitation of not being able to support DOCTYPE/DTD. Would it be possible for me to utilize XHTML5 without needing to declare , or will I have no choice but to in ...

xmlhtmlxhtmldoctype

Play framework fails to apply style attributes correctly

When working with play-framework 2.3.x, I am in the process of creating a form and would like to show/hide it based on a model attribute. Typically, setting the style attribute manually using style = "display: none" and style = "display: block" works fine. ...

htmlcssscalaplayframework

HTMLKit is functioning properly on the simulator but is experiencing difficulties when running on the

Currently, I'm utilizing HTMLKit as a dependency in my project. It runs smoothly on the simulator but encounters issues when running on an actual device. Below is the crash log generated while attempting to run it on an iPhone: dyld: Library not ...

htmliosswiftxcodecocoapods

Pass various checkboxes data in an email using PHP and $_POST

I'm having trouble sending my checkbox values via my email form as it keeps returning as "None" every time. Any assistance would be greatly appreciated! Code snippet: <form method="post" name="sentMessage" id="contactForm" novalidate> ...

phphtmlpost

What are the different methods for completing a form?

From what I understand, there are 2 methods for submitting a form. For instance, in asp.net, there is the Button.UseSubmitBehavior property which Specifies whether the Button control uses the client browser's submit mechanism or the ASP.NET postb ...

javascripthtmlasp.netformssubmit

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

javascriptjqueryhtmlcssjquery-ui

Navigating JSON within HTML forms

I'm reaching out because I have been using a workaround that seems to be effective, but I am concerned about potential issues down the line. To create an HTML form in PHP, I am using SimpleXML and DOM to manage the source code (an HTML file containin ...

javascriptphphtmljson

Is there a hover function in jQuery that works with both mouseenter and mouseout events?

I've been facing a slight issue with a list of items using the <li> element. I have a plugin running that dynamically adds a data-tag ID to the data-* attribute of these items. As a result, all items are dynamically added and another function I ...

javascriptjquery

Applying CSS onmousemove does not function properly in conjunction with Bootstrap framework

Currently, I have a code snippet that enables an absolutely positioned box to follow the movement of the mouse cursor: $(document).mousemove( function(e) { $(".wordbox").css({ top: "calc(" + e.pageY + "px - 0.8em)", left: e.pageX }) ...

jquerycsstwitter-bootstrap

"Enhance Your Website Navigation with HTML5 and CSS - Creating a Wide

I've spent a full day trying to solve this issue, but unfortunately, I haven't been able to achieve any results. My goal is to create a menu with collapsible links that expand horizontally when hovering over the parent <li>. Essentially, it ...

htmlcssmenu

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

css

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

javascriptjqueryhtmlfile-uploaddrag-and-drop