This is a migrated thread and some comments may be shown as answers.

Editor inside of a Splitter pane

7 Answers 157 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Johannes asked on 16 Jun 2020, 12:42 AM

I am trying to place an Editor inside of a pane in a Splitter. The only problem is that the Editor goes past the end of the Splitter when I set the height to 100%, creating overflow in the pane, which I have hidden.

The workaround that I have found is putting the editor to have a height of calc(100% - 0px), but I feel as though this should not be necessary. Have I missed something here?

Here is the Tag Helpers with the editor height at 100% which produces the overflow.

<kendo-splitter name="cp-homepage-splitter" orientation="SplitterOrientation.Vertical" style="height:100%;">

<pane size="115px" collapsible="false" resizable="false" scrollable="false" id="cp-homepage-top-pane">

<p class="iv-title iv-title-2">Home page</p>

<p class="alert">Set the content for the first page shown.</p>

</pane>

<pane collapsible="false" resizable="false" id="cp-homepage-bottom-pane" style="height:100%;overflow-y:hidden;">

<kendo-editor name="HomepageEditor" aria-label="editor" style="height:calc(100% - 0px);">

<resizable enabled="false" />

<tools>

<tool name="bold" />

<tool name="italic" />

<tool name="underline" />

<tool name="strikethrough" />

<tool name="fontName" />

<tool name="fontSize" />

<tool name="foreColor" />

<tool name="backColor" />

<tool name="copyFormat" />

<tool name="applyFormat" />

<tool name="justifyLeft" />

<tool name="justifyCenter" />

<tool name="justifyRight" />

<tool name="justifyFull" />

<tool name="insertUnorderedList" />

<tool name="insertOrderedList" />

<tool name="outdent" />

<tool name="indent" />

<tool name="createLink" />

<tool name="unlink" />

<tool name="subScript" />

<tool name="superScript" />

<tool name="tableEditing" />

<tool name="viewHtml" />

<tool name="formatting" />

<tool name="cleanFormatting" />

<tool name="homePageSaveTool" template-id="homePageSaveToolTemplate" />

</tools>

<content>

<h1>Test</h1>

</content>

</kendo-editor>

</pane>

</kendo-splitter>

<script id="homePageSaveToolTemplate" type="text/x-kendo-template">

<button id="saveHomePageBtn" class="k-button k-primary">Save</button>

</script>

7 Answers, 1 is accepted

answered on 18 Jun 2020, 04:03 PM

Hello Johannes,

I've tried setting height: 100%; to the Editor, and also added a red border to the pane it is nested in, in order to make it clearer where the pane ends. Here's a screenshot of how this looks like at my end: https://www.screencast.com/t/g3mkvQtgT

As you can see the Editor is within the boundaries of the pane. The styles of the pane and the Editor are the following:

<pane collapsible="false" resizable="false" id="cp-homepage-bottom-pane" style="height:100%;overflow-y:hidden; border: 1px solid red;">
	<kendo-editor name="HomepageEditor" aria-label="editor" style="height:100%;">

Am I missing something with regard to reproducing the issue? Which Kendo UI theme do you use?

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 18 Jun 2020, 11:50 PM

overflowing-below-screen.png

no-overflow.png

The only thing that appears to be different for me is the size of the panel. It takes up a large portion of the screen. I have attached screenshots.

You can see that the image with the overflow going beyond the bottom of the screen does not have the down arrow for the editor content overflow shown. If I click into the content area and hit ctrl + end, the toolbar disappears above the pane.

The only code difference is the height being calculated.

Overflow below screen

<pane collapsible="false" resizable="false" scrollable="false" id="cp-homepage-bottom-pane" style="height:100%;">

<kendo-editor name="HomepageEditor" aria-label="editor" style="height:100%;">

No overflow

<pane collapsible="false" resizable="false" scrollable="false" id="cp-homepage-bottom-pane" style="height:100%;">

<kendo-editor name="HomepageEditor" aria-label="editor" style="height:calc(100% - 0px);">

answered on 26 Jun 2020, 11:40 AM

Hello Johannes,

After further testing the behavior of the Splitter, I noticed that the pane height is not set to fit the content nested in the pane. This is not something related to the Editor, since even nesting a div with fixed height leads to the same behavior - the pane is not high enough to fit the div and overflow occurs. We will look into this and check whether it is something we've introduced with a recent release, and will post here our findings.

Regards,
Ivan Danchev
Progress Telerik

answered on 30 Jun 2020, 02:00 PM

TelerikAspNetCoreApp104.zip

Hi Johannes,

In the code snippet you posted in your first reply, the bottom pane did not have its scrollable option disabled. In the last code snippet it has this option disabled:

<pane collapsible="false" resizable="false" scrollable="false" id="cp-homepage-bottom-pane" style="height:100%;">
                <kendo-editor name="HomepageEditor" aria-label="editor" style="height:100%;">

We tested it like this and there was no scrollbar displayed. Overflow does not need to be set since it by default comes from the theme like this:

.k-splitter .k-pane {
    overflow: hidden;
}

Attached you can find a sample project we tested the behavior in. Could you demonstrate the scrollbar issue in it and attach it back for further review?

Regards,
Ivan Danchev
Progress Telerik