how to display nested ordered list with different list-style-type in ckeditor 4?

Question

I maintain a legacy application that has CKEDITOR 4 integrated. I am facing an issue with the display of the nested ordered list. A user added an ordered list in this way using the bullet list plugin.

Please refer to the screenshot.

The source of this HTML code can be viewed using the source button. Here is how the source looks like:

But when the user is viewing the ordered list in the view mode, then it is not showing as expected. Please refer to the screenshot here:

In the view page, there are many other css file which are used across my application which is affecting the output.

div.docSection ol li {
  /* list-style-type: decimal;  Commenting this line is solving the problem */ 
  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 is solving the problem */
  line-height: 1.6em;
}

How can I make sure that the ordered list display is not affected in view mode. Is there a setting in CKEDITOR 4 for this? Can we solve this in css rules?

Answer 1

Finally Found a solution to this issue. I had to use JQUERY to solve this. Basically I am over-riding the css rules which were getting applied from Header Css files by Local css rules. The following is working for nested ordered list and nested un-ordered list but not 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); }); }); });