You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#106481 JCE is not 100% width (front-end)

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Tuesday, 26 January 2021 10:57 GMT

woluweb
In the Profile for front-end editing, the Editor width is set to 100%.

But still, in the front-end the editor takes exactly the width of the buttons I have in the editor (which is not very much since there are not many buttons 😃 ).
I also allowed resizing... but it allows to make it less wide or higher... but not wider.

Notes:
1. the size of the editor stays the same even if I change the width to 1000 px for instance.
2. All the xtd-buttons are hidden to that type of users. But if I login as Super User, the xtd-buttons are displayed... and the JCE editor becomes wider (but still not 100%)

What have I missed ?
Txs !

Attachments

Ryan
The width of the editor, regardless of the value you have set, will always be constrained by the width of the parent container it is in, which in this case appears to be set by the component or template.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

woluweb
Yep, looking at the code in the console I saw :

<div class="editor wf-editor-container mb-2" style="max-width: 768px;">

Even with Protostar I have the same issue.
Besides I use EasyLayouts on that page, but I would not think it interferes.
Anyway, by adding this css I have a workaround :

.editor.wf-editor-container {
max-width: 100% !important;
}

Besides, on all pages (even pages without EasyLayout, pure regular Joomla pages), I noticed that the "resize editor" icon would be like "left-aligned".
Even with protostar
So I had to add this css as a workaround :

/* JCE - the resize icon at the bottom of the Editor is left aligned for some reason. This is a fix */
div#jform_articletext_resize, div#akengage-comment-editor_resize {
width: 100%;
}
span.mceIcon.mce_resize {
width: 100% !important;
}

Do you know why I have these two side-effects even with Protostar?
(the site was built originally by someone else, so it could be that there is a parameter somewhere that introduces those "funny" things)

Ryan
I'm not seeing this issue on the demo site, which uses protostar - https://demo.joomlacontenteditor.net/

I have removed all right side modules on the page, so the editor can expand full width when editing.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

woluweb
Txs for the quick reaction Ryan.

Yes indeed I can see that it is all OK on your demo.

Let's leave it like that: I have found a workaround with my custom.css.

But there is something at hand. Is it JCE generating this line of HTML for example ?
<div class="editor wf-editor-container mb-2" style="max-width: 768px;">

Ryan
But there is something at hand. Is it JCE generating this line of HTML for example ?
<div class="editor wf-editor-container mb-2" style="max-width: 768px;">


Yes, that is the base editor container.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.