I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.

My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%

Is there anyway to remove or overwrite that code with jquery

It's basically adding an inline style to a div with a class called wysiwyg...

so:

<div class="wysiwyg" style="width:320px">

The editor I'm having the trouble with is called: jWYSIWYG

Here's a demo url: /

I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.

My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%

Is there anyway to remove or overwrite that code with jquery

It's basically adding an inline style to a div with a class called wysiwyg...

so:

<div class="wysiwyg" style="width:320px">

The editor I'm having the trouble with is called: jWYSIWYG

Here's a demo url: http://akzhan.github./jwysiwyg/help/examples/

• javascript
• jquery
• html

• Off course there is but it is kind of hard to help you without seeing the html produced by the wysiwyg editor. – Josh Mein Commented Mar 21, 2012 at 13:45
• Why not just look in the code for this value and change it? – Diodeus - James MacFarlane Commented Mar 21, 2012 at 13:46
• 1 You might want to tell which editor it is. – jgauffin Commented Mar 21, 2012 at 13:47

6 Answers 6

If you want to override inline styles you have two options:

Pure CSS:

.wysiwyg {
    width: 120px !important;
}

jQuery:

$(".wysiwyg").css({width:120});

If you want to use styles from somewhere else you can also do:

$(".wysiwyg").css({width:"inherit"});

Reset the width using jQuery:

$('.wysiwyg').css('width', '100%');

Alternatively, you could remove the style attribute altogether:

$('.wysiwyg').removeAttr('style');

Have you tried declaring your own CSS with:

!important

eg.

#textarea-id { width: 300px !important; }

You can either define a new css rule with !important, or use jquery:

$("rule target").width(value);

This should work for you:

$('.wysiwyg').removeAttr("style");

or alternatively you can set the width to 100%

$('.wysiwyg').css("width", "100%");

You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.

Or you can try to create your own slightly modified version of your WYSIWYG JS module.