Tables responsive script affect JCE editor toolbar

Hi supporters,

I installed JCE editor in my website and there is no problem when the screen width of a device is big. It works well when I add articles from both back-end or front-end.

577px.jpg

However, when device screen is small, is 576px or smaller (like mobile phone screen), if I add articles from front-end, JCE editor toolbar changed, and cannot be used.

576px.jpg

I contacted JCE supplier and he told me that the problem happens because JCE is designed in tables and in the template, there is some scripts with tables responsive affecting JCE toolbar. He also checked and find out that one of the reason is in css file: /templates/gk_news2/css/mobile.css (line 134).

Can you please help me to check and correct it in order that I can still use JCE for mobile screen at front-end but it does not affect other function of the website.

You can use following account to login the website from front-end, then try to create an article by clicking button "CHIA SẺ BÀI VIẾT" on the right of the main menu. And try adjusting screen, when screen shrinks to 576px or smaller, it will happen.

ID: xxx
Password: xxx

Thank you and regards,

Hai

I have edited your post and removed data.
Please send me a PM with:
1. URL to your website
2. login and password of user with admin/super-admin privileges (please create one for me)
3. link to this thread
4. leave an information back here when you will send the PM

Hi Cyberek,

I just sent you the admin account information.

Sincerely,

Hai

Could you please provide me step by step instruction on how to reproduce the issue (beside logging in onto provided account?) I mean what to click and where should I expect a new article / edit article button (screenshots with marks might help).

Yes, Cyberek,

First, please log in the website like following screenshot:

pic1.jpg

Then click the "CHIA SẺ BÀI VIẾT" button at the menu on the right:

pic2.jpg

You will come to this page to add an article to the website.

pic3.jpg

When the screen is big, you will see that the toolbar display correctly.
(please see my next post)

But when the screen is small. The problem happen. You can shrink the screen like a mobile screen in your computer to see.

pic4.jpg

And you cannot see icons in the toolbar of JCE editor. This will cause difficulty for adding articles from mobile phone.

Please review and help me.

Your sincerely,

Hai

I guess the easiest way would be to tind this code in mobile.css file:

Code: Select all

/* Fix for tables */
fieldset {
   box-sizing: border-box!important;
   max-width: 100%!important;
   width: 100%!important;
   overflow: hidden;
}
#gkMainbody table:before {
   content: "Scroll horizontally to view the whole table";
   height: 14px;
   width: 100%;
   display: block;
   font-size: 10px;
   margin-top: -30px;
   margin-bottom: 10px;
   font-family: Arial, sans-serif;
}
#gkMainbody table {
   /* width: 540px!important; */
   /* display: block!important; */
   /* padding: 30px 0 20px 0; *//* padding for the scrollbars and the top message */
   /* overflow:scroll; */
   /* max-width: 100%; */
   -webkit-overflow-scrolling:touch;
}

#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 540px!important;
   display: table;
}


and remove it completely.
Also, from what I see sadly, the editor is not rwd friendly, so it will not work correctly on mobile devices (320 px width).

Hi Cyberek,

Thank you a lot for your help.

The reason I used JCE because it can manage each user folder separately and also can set parameter for each user group. If you know any better editor, please suggest me.

For the appearance in mobile, I will change to 3 rows instead of 2 rows now and it will look better.

I think the solution is good enough for the editor toolbar if it does not affect other function of the website.

Thank you again for your help.

Hai

It would affect the site if you would like to use scrollable tables. If not, then you are fine.

Yes, I will pay attention to that type of content.

Thank you.

Hai

Ok. If you have any additional questions regarding this topic, please let me know.