1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Editor JUMPS (scrolls) to top when Style applied

Editor JUMPS (scrolls) to top when Style applied

I've just started using the Rich Text Editor in my solution and have come across an issue that makes it completely unusable for me.


When using some of the Text-Formatting/Styling buttons, on a page where it extends beyond the visible height of the Editor (IOW, the Editor can be scrolled) when the selected/highlit text has a Style applied, the Editor 'JUMPS' to the top of the page.  Obviously this makes using the Editor completely unworkable.


I am using the Rich Text Editor on Mac, inside FileMaker Pro.  The issue exists when using the base code as supplied by Vinitha in this thread.


This issue happens with the following Buttons (I have only checked the buttons I'm using in my solution):


●   Paragraph/Heading etc.

●   FontSize

●   TextColor

●   Text-Background-Color

●   Text-Align

●   URL/Link

●   Table


There is NO problem with these buttons:


●   Bold Italic Underline

●   ClearFormat

●   Indent / Outdent


Any suggestions for a fix?


3 Replies
VJ Vinitha Jeyakumar Syncfusion Team March 12, 2024 09:40 AM UTC

Hi Grant Symon,



We have tried to replicate the reported issue at our end using the details you have shared. but we didn't face any issues as you reported. we have also attached a sample and video illustration for your reference.


Can you please share the exact issue replication steps along with entire code snippet and if possible share the simple issue reproducing sample to validate further.


Regards,

Vinitha


Attachment: Video_Sample_eed0dc65.zip

GS Grant Symon March 12, 2024 04:26 PM UTC

Hi Vinitha,


I’ve followed your lead and made a video-grab of what happens. 🙂


As you can see, this is running inside FileMaker Pro.  ( I’ve added a dedicated Table and Layout to my solution so I can work with the RTE code and see the result, side-by-side. )


  • The content is copy/pasted from Wikipedia, so as to ensure reliable html.


  • The Syncfusion code is the basic code you provided to me, in my first thread/question.  The only things added to your code, are marked in RED and are:

  • Popup / Quick-Popup fix
  • hmtl content for defaultRTE via a FileMaker record
  • My license key (white text)

Also in the video-grab…

  • I’ve included a view of running the same process in a very basic install of TinyMCE.  I did this in order to show that the problem is not due to FileMaker’s web-viewer.  As you can see, there is no problem of 'jumping' / 'resetting' with the Tiny version… which is also running in inLine mode.


Hope this helps.


________________________________________________




<!DOCTYPE html><html lang="en">


<head>


    <script src="https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2.min.js" type="text/javascript"></script>

    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/24.2.3/material.css" rel="stylesheet">

    <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<style>

            body{

                touch-action:none;

            }

            .control-section{

                margin-top:0px;

            }

.e-rte-inline-popup{

min-width: 420px !important;

}

.e-rte-quick-popup{

max-width: 300px !important;

}

</style>


</head>

<body>

<script> // Registering Syncfusion license key

ej.base.registerLicense('xxxxxxxxxxxxx');

</script>

        </style></head><body><div class="stackblitz-container material"><div class="col-lg-8 control-section">

    <div class="sample-container">

        <div class="default-section">

            <div id="defaultRTE"> " & RTE_🌐::TEST_Note_html & " 

            </div>

        </div>

    </div>

</div>

<div class="col-lg-4 property-section">

    <div id="property" title="Properties">

        <table id="property" title="Properties">

            <tbody>

                <tr>

                    <td>

                        <div>

                            <input type="checkbox" id="select" checked="false">

                        </div>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>

</div>



</div>

<script>

    var defaultRTE = new ej.richtexteditor.RichTextEditor({

        inlineMode: {

            enable: true,

            onSelection: true

        },

        toolbarSettings: {

            items: ['Formats','Bold', 'Italic', 'Underline', 'FontSize', 'FontColor', 'BackgroundColor', 'ClearFormat' ,

                 '-', 'Alignments', 'Indent', 'Outdent', 'OrderedList', 'UnorderedList',

                'CreateLink', 'InsertCode', 'Image', 'Display', 'CreateTable']

        },

    quickToolbarSettings: {

        image: [

        'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',

        'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'

        ]

        },

        format: {

            width: 'auto'

        },

        fontFamily: {

            width: 'auto'

        }

    });

    defaultRTE.appendTo("#defaultRTE");

    var select = new ej.buttons.CheckBox({

        // set true for enable the checked state at initial rendering

        checked: true,

        label: 'Show on Selection',

        // bind change event

        change: function (args) {

            defaultRTE.inlineMode.onSelection = args.checked;

            defaultRTE.dataBind();

        }

    });

    select.appendTo('#select');



</script></body></html>




Attachment: SyncfusionJUMPGSymon_92218c60.zip

VJ Vinitha Jeyakumar Syncfusion Team March 14, 2024 12:22 PM UTC

Hi Grant Symon,

We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. Please login using the below link.


https://support.syncfusion.com/support


Regards,

Vinitha


Loader.
Up arrow icon