Declined
Last Updated: 18 Aug 2015 15:47 by ADMIN
ADMIN
Ianko
Created on: 10 Jul 2015 06:18
Category: UI for ASP.NET AJAX
Type: Bug Report
0
Incorrect Fluid behavior of Toolbar with Touch, Silk and Glow skins
Enabling Fluid behavior of RadEditor (Width="100%") causes the tools not to collapse with a smaller view-port. Also, there are some further visual glitches with the toolbar.

Solution 1: Add a CSS rule to expand the height of the tool-groups automatically.

    .<SkinName>.reToolbar {
                height:auto !important;
    }

Solution 2: Enable Lightweight rendering (or Auto).

    <telerik:RadEditor ID="RadEditor1" Skin="Silk" RenderMode="Lightweight" runat="server" Width="100%" >
    </telerik:RadEditor>

1 comment
ADMIN
Nikolay
Posted on: 18 Aug 2015 15:47
The fluid behavior can be easy improved by loading a optimized tools file for the specified skin which has smaller groups e.g.
The following tools group

<?xml version="1.0" encoding="utf-8" ?>
<root>
	...
	<tools name="DropdownToolbar" >
		<tool name="InsertSymbol"/>
		<tool name="InsertTable"/>
		<tool name="InsertFormElement" />
		<tool name="InsertSnippet"/>
		<tool name="ImageMapDialog"/>
		<tool name="InsertCustomLink" shortcut="CTRL+ALT+K / CMD+ALT+K"/>
		<tool separator="true"/>
		<tool name="ConvertToLower" />
		<tool name="ConvertToUpper" />
		<tool separator="true"/>
		<tool name="Zoom"/>
		<tool name="ModuleManager" />
		<tool name="ToggleScreenMode" shortcut="F11 / CMD+F11"/>
		<!--<tool name="Help" shortcut="F1"/>-->
		<tool name="AboutDialog" />
	</tools>
</root>

could be modified to:

<?xml version="1.0" encoding="utf-8" ?>
<root>
	...
	<tools name="DropdownToolbar" >
		<tool name="InsertSymbol"/>
		<tool name="InsertTable"/>
		<tool name="InsertFormElement" />
		<tool name="InsertSnippet"/>
		<tool name="ImageMapDialog"/>
		<tool name="InsertCustomLink" shortcut="CTRL+ALT+K / CMD+ALT+K"/>
	</tools>
	<tools>
		<tool name="ConvertToLower" />
		<tool name="ConvertToUpper" />
	</tools>
	<tools>
		<tool name="Zoom"/>
		<tool name="ModuleManager" />
		<tool name="ToggleScreenMode" shortcut="F11 / CMD+F11"/>
		<tool name="AboutDialog" />
	</tools>
</root>

More detailed information about configuring toolbars can be found in this help article: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/overview