what is the best way to showcase a nested ordered list with varying list-style-types using ckeditor 4?

Dealing with a legacy application that features CKEDITOR 4 integration has presented me with a challenge involving the display of a nested ordered list. The issue arose when a user added an ordered list using the bullet list plugin.

I encourage you to take a look at the screenshot provided https://i.sstatic.net/6qATG.png

You can also view the HTML source code by clicking on this link: https://i.sstatic.net/dmT0v.png

In viewing mode, however, the ordered list is not rendering as expected. Please see the screenshot here: https://i.sstatic.net/VTjQX.png

The presence of multiple CSS files in my application is influencing the output on the view page.

div.docSection ol li {
  /* list-style-type: decimal; Commenting this line fixes the issue */ 
  margin: auto;
  margin-left: 2.0em;
  padding: 0em;
}
.sectionDiv li {
  padding: 0;
  padding-left: 2em;
  margin: 0;
  margin-bottom: 0.2em;
  margin-right: 1em;
  /* list-style: none; Commenting this line resolves the problem */
  line-height: 1.6em;
}

I am looking for solutions to ensure that the ordered list displays correctly in view mode. Is there a setting within CKEDITOR 4 that addresses this, or can it be resolved through CSS rules?

javascripthtmljquerycssckeditor

Answer №1

At long last, I've uncovered a solution to this troublesome issue. Utilizing JQUERY proved to be the key in resolving it. Essentially, by overriding the CSS rules applied from Header Css files with Local css rules, I was able to address the problem. The solution works perfectly for nested ordered lists and nested un-ordered lists, although it does not currently support mixed nested lists.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery(document).ready(function() {

  jQuery('div.docSection').find('ol').each( function() {
    var list_style_type = jQuery( this ).css("list-style-type");
    jQuery( this ).find('li').each( function () {
      jQuery( this ).css("list-style-type", list_style_type);
    });
  });

});

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

Implementing div elements in a carousel of images

I've been working on an image slider that halts scrolling when the mouse hovers over it. However, I'd like to use div tags instead of image tags to create custom shapes within the slider using CSS. Does anyone have any advice on how to achieve th ...

javascripthtmlcss

Unable to bring JavaScript into an HTML document

I am diving into the fundamentals of JS and HTML, starting with a simple script. Here is my test.js file: document.getElementById("test").innerHTML = "Loaded js file"; And here is my test.html: <!DOCTYPE HTML> <html lang="de"> <head> & ...

javascriptjqueryhtml

The process of Including Items into an Array of Objects within a Document utilizing Mongoose.js

I've been searching through various resources for a solution to my problem, but haven't been able to find the answer yet. My goal is to add objects to a new (empty) array in my local MongoDB without any duplicates. Additionally, I need to update ...

javascriptarraysnode.jsmongodbmongoose

What is the best way to position a span overlay on a card in the lower right corner

I am looking to add a thumbnail with the duration displayed in the bottom right corner of a video, but I am facing issues moving the span object within the card using Bootstrap 4. Whenever I try to increase the margin-left beyond 50%, the span object crash ...

cssbootstrap-4

Ways to resolve the issue of code not relocating the channel within a specific

The script I wrote to create a new category and channel produced an error message: TypeError: Cannot read property 'hasOwnProperty' of undefined. The issue occurs when the channel is not properly placed within the category. Here is the code snipp ...

javascriptnode.jsdiscorddiscord.js

You cannot use a colon ( : ) in HTML input text fields

How can I prevent a colon from being inserted into an input text field? In my code snippet, I have <input type="text"/> and I want to ensure that if the user types " : ", nothing appears in the input text field. Is there a way to achieve this using ...

htmlinput

Symfony2 does not receive any feedback from the Ajax request

Perform an ajax POST request with no response: Here is the ajax request code snippet: $.ajax({ method: 'POST', url: "{{ path('app-like-add') }}", data: { imageId: id }, success: function(response) { ...

javascriptphpjqueryajaxsymfony

`Manipulating binding and text options in a dropdown selection using knockout.js`

I've read through various sources and websites but still can't figure out what's wrong with my code. It seems like everything should be working fine, but I'm getting [Object object] as options. Html <select data-bind="options: Cit ...

javascriptjqueryknockout.js

How can we make the Facebook like button display the fan count as the counter?

Can the Facebook like button be customized to display the fan count as the counter, and also update the fan count when clicked (like/unlike)? I've searched through forums and tutorials but haven't found a solution yet. It appears that the standar ...

phphtmlfacebookfacebook-like

Show active Main Menu and sub Menu through the use of CSS and javascript

I currently have left side menus. <div class="panel"> <div class="panel-heading panel-red" role="tab" id="headingDash" style=""> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expa ...

javascriptjqueryhtmlcss

Tips on displaying a confirmation message upon a user clicking a checkbox

I am encountering an issue with displaying a confirmation message when a checkbox is clicked. The confirmation box pops up but does not carry out any action, like showing the text within the textbox after the user clicks OK. Any guidance on this matter wou ...

javascriptc#asp.netcheckbox

Calculate the percentage of the original height in relation to the document height

Is there a way to adjust the height of the document after new elements are added, without leaving excess space? I'm currently using the following code: $(document).ready(function() { var document_height = $(document).height(); document_height ...

javascriptjquerydom

Adding embedded attributes from a different object

I am facing a challenge with two arrays called metaObjects and justObjects. These arrays consist of objects that share a common property called id. My goal is to merge properties from the objects in these separate arrays into a new array. const metaObje ...

javascriptramda.js

Bootstrap modal assistance does not function properly when used together with ajax requests

I'm experiencing an issue with a small class project where the data is not being inserted into the database. I collect the data using a bootstrap modal and pass it to the php file using ajax. The problem seems to be occurring when executing the script ...

javascriptphpjqueryajaxtwitter-bootstrap

How can you adjust the width of the Material UI Select component?

Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...

htmlcssreactjsmaterial-designmaterial-ui

Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly appreciated. let btn_articles = ...

javascriptcss

Start by declaring a scope variable using AngularJS

My go-to method for retrieving data from the server and displaying it on various components like tables or charts is by using ng-init="controllerFunction()". This function needs to be called every time the page loads. While ng-init gets the job done, I ca ...

javascriptangularjsangularjs-ng-init

Tips on converting deeply nested JSON into an excel file using Node.js

I am attempting to convert the JSON data below into an Excel file using XLSX. Although it successfully converts my JSON to Excel, I encountered an issue where the nested array of dailyPointsArray appears blank after conversion. Code Attempted const XLSX ...

javascriptnode.jsexcelexpressxlsx

How about: "What about Using Percentage-Based Image Holders?"

I'm wondering if it's possible to use a placeholder with percentages instead of pixels. I know there's code that allows for pixel dimensions, but is there a way to use percentages? Currently, the code for the placeholder is img src="http://p ...

htmlcssimageplaceholderwireframe

Automatically send users to the login page upon page load if they are not authenticated using Nuxt and Firebase

I'm currently facing an issue with setting up navigation guards in my Nuxt application. The goal is to redirect users to the login screen if they are not authenticated using Firebase Authentication. While the router middleware successfully redirects u ...

javascriptfirebasevue.jsfirebase-authenticationnuxt.js