Get rid of margin on ul and ol tags inside an iframe

Rohit Bajaj
Rohit Bajaj used Ask the Experts™
on
Hi,
In my web application an iframe gets loaded from a third party js.
Inside it there are some ol and ul tags which are getting margin of 14px top and bottom.
This most probably is coming from the browser.
How can i get rid of these margins ?
Here is the screen shot :
Screen-Shot-2016-02-15-at-10.05.48-P.png
The third party library i am loading is basically ckeditor and demo can be seen at http://ckeditor.com/demo
If you type in the editor with bulltet or numbering tools... you will see in the firebug that ul and ol elements are getting generated with top and bottom margins... I am loading this ckeditor inside my web application.... and want to keep them to 0. But they are loaded inside iframe....
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I guess the simplest way will by overriding the original margins:

cke_editable ol, cke_editable ul, {
margin: 0 !important;
}

Open in new window

Author

Commented:
Doesnt seem to be working probably because these nodes are inside an iframe... and if i apply a rule like that it will get applied on my parent DOM
Manager / Solutions Architect
Commented:
The thing is that you need to add the css into the iframe.
To do so you either change the CKEditor css (which I know from previous questions you don't want) or you inject it upon editor ready, like this:
CKEDITOR.on('instanceReady',
  function(e) {
    var ckhead= $(e.editor.document.$).find('head');
    //var ckbody = $(e.editor.document.$).find('body');
    
    ckhead.append('<style>ul{margin:0 !important;}</style>');
  });

Open in new window

This is a generic approach and it will affect all editors on the page; if you only have one then there's nothing to worrie about.

Still I think the best option is to add your customizations to the ckeditor css file.
Document them properly and if the version of the control changes, just move them into the new file.
Doing this kind of CSS injection makes things look like magic and much harder to identify and maintain.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi Alexandre,
Thanks your solutions works perfect.
Just want to ask you one more thing.. in case say i use contents.css for modification as you suggest.
How to document this ? Is there any standard way to document these type of things... ?
Alexandre SimõesManager / Solutions Architect

Commented:
Documentation is a cultural thing.
I mean, there's no way to prevent someone from replacing the contents.css, even if it's documented somewhere that it should be handled with care.

But there are other options, you're not alone here :)
I just discovered that CKEditor actually supports adding CSS files!
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-addContentsCss

Try to add your custom CSS file in this way, from the documentation, it seems like the official way to do it.

Let me know!

Author

Commented:
Wow.. thats seems really a good option...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial