Responsive Editor with XML Toolbar

[Angie]

Hello, I've just upgraded to the latest Telerik DLLs and am working on making the Editor responsive.  I'm not a fan of the mobile mode, which doesn't seem to work too well on either Android or Iphone, so I would prefer to use the Lightweight rendering.

 

I have an existing Toolbar.xml that I've been using.  Is it possible to hide some of the buttons as the window resizes, either by applying bootstrap classes or via media queries in the CSS?  In addition, is there a property for hiding the Design/HTML view upon resizing as well?

 

Thank you for any direction on this!

 

[Rumen]

Hi,

You can hide a toolbar button on the client using the getToolByName() method of the editor, e.g.

var oTool = editor.getToolByName("Bold"); //get a reference to the custom tool
oTool.get_element().style.display = "none";

 

RadEditor does not offer a client-side API for getting to the HTML and Design buttons, but you can hide them with CSS, JavaScript or jQuery by getting a reference to their HTML elements -> https://www.screencast.com/t/UJ6Y0Ra6TR20. 

Best regards,
Rumen
Telerik by Progress

[Angie]

Hi Rumen!  Thank you for the response!  I was able to hide the design bar with CSS.  I see that I can hide individual buttons via CSS, is there a way to get a reference to an entire toolbar section via a css property, for example, the toolbar I'm named "Edit" in the attached code?   I would like to hide the entire section rather than each individual button.  Thank you!

<tools name="Edit">

   <tool Name="AjaxSpellCheck" />

   <tool separator="true"/>

   <tool Name="Cut" shortcut="CTRL+X" />

   <tool Name="Copy" shortcut="CTRL+C" />

   <tool Name="Paste" shortcut="CTRL+V" />

   <tool separator="true"/>

   <tool Name="Undo" shortcut="CTRL+Z" />

   <tool Name="Redo" shortcut="CTRL+Y" />

   <tool separator="true"/>

   <tool Name="LinkManager" shortcut="CTRL+K" />

 </tools>



@media (max-width: 768px) {

    .reBottomProperties {display:none}

    .reAjaxSpellCheck {
        display: none !important;
    }

}

[Rumen]

Hi,

All of the inner toolbars use the same CSS class as you can see in this screenshot: https://www.screencast.com/t/WLaEX8wj. 

That's why you can hide them with JavaScript/ code on the client, or on the server, but not through a CSS selector, because it will be applied to all inner toolbars.

Best regards,
Rumen
Telerik by Progress