How to remove iframe body overflow ?

vanillawhisky

Hello Forum,
I am not sure is this the right place for my question.
I am using Advance Editor plugins (by Dane MacMillan).I dont find this plugin in vanilla addons anymore so I am posting my question here.
I want the textarea with a fixed height and overflow scroll.
This plugins uses iframe and with javascript, the body of iframe is overflow:hidden (on jquery.wysihtml5_size_matters.js line 20). if I fix height/min-height of iframe, the textarea is still not scroalable (because iframe body has overflow:hidden). Is there a way to solve this problem?

Thank you in advance

vrijvlinder

<textarea id="Form_Body" name="Body" table="Comment" tabindex="1" fileupload="" class="TextBox BodyBox textarea-autosize editor-dropzone-init" format="Markdown" rows="6" cols="100" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 50px;"></textarea>

Depending on how you make your CSS changes, you would simply add the rules to change that or change it in the plugin

#Form_Body.TextBox.BodyBox.textarea-autosize.editor-dropzone-init{
overflow:auto!important;
max-height:400px;
}

vrijvlinder

One thing to know is that the max height of the element determines if the scrollbar/overflow will appear. Not the min height…

R_J

@vrijvlinder said:
or change it in the plugin

@vanillawhisky: Doing so would simply be wrong. Never change any file! Only if a) you know exactly what you are doing and there is b) no other way to achieve what you do.
If you change files, keep exactly track of all your changes.

You like to change how something is displayed? Clone the theme you are using, and make that changes in your copy. Search for how to create custom themes if you are unsure how to do that.

vrijvlinder

No you can change certain files just not core files. But you can change CSS in plugins and you can change some things in the JavaScript of some plugins like editors and others.

If you are going to put my advice down as bad advice, then at least be accurate about it.
Telling people they can't edit plugins is incorrect .

River

@vrijvlinder said:
No you can change certain files just not core files. But you can change CSS in plugins and you can change some things in the JavaScript of some plugins like editors and others.

If you are going to put my advice down as bad advice, then at least be accurate about it.
Telling people they can't edit plugins is incorrect .

it was said "Never change any file! "

it can be said Never say never.
Everything is a personal preference. Bottom line there is no

there is no Du must do

The bad thing about changing anything in a vanilla core download (including plugins) is that you might create difficulties for yourself when you upgrade, so you can code yourself into a corner because your fork has veered so far off. Another obvious thing about changing things on your own is when you ask for help no one will know the changes you made and it will be difficult to debug. At the same time if you know you modified a core plugin, it is easier to keep track of changes compared to other aspects of core.

I think it is a personal preference regarding editing plugins between a continuum
Editing core plugins it may be better to lean towards anal-retentive, however, editing broken plugins or editing abandoned plugins, who cares (is a personal preference).

The continuum

is there a hyphen in
anal-retentive <--------------------------------------------------------------> Wreckless

                                                     there may be some middle ground

There are no rules. However you can make things easier for yourself depending on your choices.

R_J

@vanillawhisky: changes you make directly to the advanced editors css files will be lost on the next update. Simple as that.

That is a frequent error made by Vanilla newbies and recommendation is always the same. Just look at a few samples

vrijvlinder

So then then correct procedure would be to use the CSSEDIT plugin to enact all of your CSS changes regardless of what they are for.

However there are some issues with the javascript files for the editors concerning style for the html doc that it generates and one can only change that inside the js file .

The correct approach would be to clone that js file into your custom theme js folder
and then the edited js file will have priority automatically .

Or , when you update, don't update the plugins folder… or the themes folder.

Vanilla updates happen very very scarcely unlike WP where you have them every week . It is not something to worry about so much, in my opinion.

People are free to do whatever they want, whether they are new or not and they probably will. Everyone must learn to make mistakes and then to fix them.

His issue is not with the theme, it is with the jquery for the editor which has inline style.

vanillawhisky

@vrijvlinder said:
<textarea id="Form_Body" name="Body" table="Comment" tabindex="1" fileupload="" class="TextBox BodyBox textarea-autosize editor-dropzone-init" format="Markdown" rows="6" cols="100" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 50px;"></textarea>

Depending on how you make your CSS changes, you would simply add the rules to change that or change it in the plugin

#Form_Body.TextBox.BodyBox.textarea-autosize.editor-dropzone-init{
overflow:auto!important;
max-height:400px;
}

This is not my case. This textarea is for html format (if normar text format is changed to html format). Normal format comes from iframe. And you cannot style body or any classes inside #document of iframe. and for info , I am using <format="Wysiwyg">.

I also agree on not modifying directly on any plugins. I always copy the plugins, rename and enable it, and disable the original one.

I also tried to do the same to the plugin too but I found the other solution.
I did it with javascript.

$(window).on('load',function(){
    var e = $('.TextBoxWrapper iframe');
    e = e.contents();
    e = e.find('body');
    $(e).each(function(i, el) {
        $(el).css('overflow','auto');
    });
});

here on('load') is important. cause this run after all your scripts file is finished. if you put your code on (document)ready, it maynot work.

Thank u everyone.