News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Quick- and extented editor bug

Started by HendriXXX, February 24, 2020, 08:04:32 AM

Previous topic - Next topic

HendriXXX

Hi!

I noticed that latest 2.1 Github version has little problem with editor. That little triange where you can expand writing area is missing in "quick reply" and it is misplaced in "extented editor".

See attachments.

Kindred

that is usually a browser thing, not a server side thing...

what Browser are you using?
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

HendriXXX

Ok. Thanks for your response!

Those images are taken with Win7 Firefox. I have also Chrome in my Android tablet and it behaves just like the pictures I attached. That github install is upgraded from RC2 and database updated too.

I have also 2.1 RC2 release and with same browsers there are no issues at all.

If I remember correct, few weeks back, with older nightly, I didn't have that problem. But I may recall that wrong.

I still have those older nightly zips, so maybe I test with those day after tomorrow when I have time..

Thanks!

Hatshepsut

I have the same problem. And one problem more - if I maximize Editor and then restore its size, buttons (Post, Save Draft and Preview) are already into the post area.
These problems are with the latest Github builds, the build from 21.12.2019 is working fine.

HendriXXX

Ok, I tested nightly from "e8f5a0f" and seems that same problem is there also. So probably I did remember that wrong and it haven't work at all..

Sadly I don't have any older nightly zips available to test..

Antechinus

Confirmed on the latest (almost, from a couple of days ago) nightly.
The problem is here:

Code (jquery.sceditor.css) Select

.sceditor-container iframe, .sceditor-container textarea {
    display: block;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    line-height: normal;
    border: 0;
    outline: none;
    font-size: 14px;
    color: #111;
    box-sizing: border-box;
    padding: 5px;
    margin: 0px;
    resize: none;
    background: #fff;
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 1px;
}


It's the resize: none; that is causing the problem. Change that to resize: vertical; and you'd be good to go, except that there's still some stupid javascript somewhere that is locking in a fixed height as an inline style.

HendriXXX

#6
I tried your solution Antechinus, but it didn't work. So I checked differences with "sdiff -s" from "jquery.sceditor.css" files from clean RC2 and commit "e8f5a0f" and found out that commit "e8f5a0f" is missing two lines..


.sceditor-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative; /* <<<<< */
        background: #fff;
        border: 1px solid #d9d9d9;
        font-size: 13px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #222;
        line-height: 1;
        font-weight: bold;
        height: 250px; /* <<<<< */
        border-radius: 4px;
        background-clip: padding-box;
        min-width: 100%;
        max-width: 100%;
}


position: relative; and height: 250px;

Now it seems to work. Only issue was that writing area overlapped buttons below (with tablet) so I changed 250 to 300.

It still overlaps those buttons if I reduce size of the writing area enough. Any ideas where that could be set?

Edit. This removes those lines. commit 7545e93

Hatshepsut

#7
Quote from: HendriXXX on February 26, 2020, 03:45:58 AM
I tried your solution Antechinus, but it didn't work. So I checked differences with "sdiff -s" from "jquery.sceditor.css" files from clean RC2 and commit "e8f5a0f" and found out that commit "e8f5a0f" is missing two lines..


.sceditor-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        position: relative; /* <<<<< */
        background: #fff;
        border: 1px solid #d9d9d9;
        font-size: 13px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #222;
        line-height: 1;
        font-weight: bold;
        height: 250px; /* <<<<< */
        border-radius: 4px;
        background-clip: padding-box;
        min-width: 100%;
        max-width: 100%;
}


position: relative; and height: 250px;

Now it seems to work. Only issue was that writing area overlapped buttons below (with tablet) so I changed 250 to 300.

It still overlaps those buttons if I reduce size of the writing area enough. Any ideas where that could be set?

Edit. This removes those lines. https://github.com/SimpleMachines/SMF2.1/commit/7545e93d30eb183c3d20c5d7cb449e0c4c2dcb77#diff-85965a27111edf0e7997de77a08500e3 (commit 7545e93)

You must edit all the files about Editor in the commit and revert all changes to be sure that Editor will work fine.
I made these changes and now editor area is resized like before. And post area doesn't overlap the buttons below :)

HendriXXX

#8
Yes, you are right. I reverted all changes related to that commit and now it works ok.

Advertisement: