This is a migrated thread and some comments may be shown as answers.
Responsive Editor with XML Toolbar
3 Answers 11 Views
This is a migrated thread and some comments may be shown as answers.
Angie
Top achievements
Rank 1
Angie asked on 27 Apr 2017, 09:20 PM

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!

 

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 28 Apr 2017, 07:13 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Angie
Top achievements
Rank 1
answered on 01 May 2017, 06:07 PM
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;
    }
        
}
0
Rumen
Telerik team
answered on 02 May 2017, 10:45 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Angie
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Angie
Top achievements
Rank 1
Share this question
or