Greetings,
I have a custom EditorSplitButton that displays images. After the user selects an image to place on the editor, the image selected should be displayed on the 'button' itself like:
In the application I'm not using faces, I'm using template names such as:
Therefore, I want to increase the width of the button to one size that will fit the largest template name. From everything I've looked at, I can't see a 'width' property for the button itself. Please note, I'm not talking about the popupwidth or height such as:
... PopupWidth="170px" PopupHeight="117px">
I want to increase the size of the button itself. Is there any property setting to do this or some kind of work-around?? I get the feeling from this article below that the latest release addressed width settings on some objects, but not custom buttons. Just do a search on the word 'width' in this article to see my point:
I have a custom EditorSplitButton that displays images. After the user selects an image to place on the editor, the image selected should be displayed on the 'button' itself like:
In the application I'm not using faces, I'm using template names such as:
Therefore, I want to increase the width of the button to one size that will fit the largest template name. From everything I've looked at, I can't see a 'width' property for the button itself. Please note, I'm not talking about the popupwidth or height such as:
... PopupWidth="170px" PopupHeight="117px">
I want to increase the size of the button itself. Is there any property setting to do this or some kind of work-around?? I get the feeling from this article below that the latest release addressed width settings on some objects, but not custom buttons. Just do a search on the word 'width' in this article to see my point:
Thanks!
5 Answers, 1 is accepted
0
Hi John,
The URLs to the images you've sent point to localhost, and I was unable to look at them.
The toolbar of RadEditor and its buttons were designed and developed to behave just like the toolbars and the buttons of a normal word processing software (MS Word), and this is why we do not provide custom dimensions for certain user-defined buttons.
The layout of the toolbars and the buttons is achieved with CSS, and if you need larger buttons, you have to create a custom skin for the editor where all buttons will be larger, because the functionality you talk about is not available out of the box. More information on how to set an external skin of RadEditor can be found in the following KB article:
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-q3-2008-skins-available-for-download.aspx
Please, pay special attention to the part which explains the setting of the css files for the dialogs of RadEditor, because when you set EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet to false, this will affect not only RadEditor, but its dialogs, their wrapping control (RadWindow) and the other RadControls that are used with the dialogs as well.
And the rest is CSS...
Best wishes,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The URLs to the images you've sent point to localhost, and I was unable to look at them.
The toolbar of RadEditor and its buttons were designed and developed to behave just like the toolbars and the buttons of a normal word processing software (MS Word), and this is why we do not provide custom dimensions for certain user-defined buttons.
The layout of the toolbars and the buttons is achieved with CSS, and if you need larger buttons, you have to create a custom skin for the editor where all buttons will be larger, because the functionality you talk about is not available out of the box. More information on how to set an external skin of RadEditor can be found in the following KB article:
http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-q3-2008-skins-available-for-download.aspx
Please, pay special attention to the part which explains the setting of the css files for the dialogs of RadEditor, because when you set EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet to false, this will affect not only RadEditor, but its dialogs, their wrapping control (RadWindow) and the other RadControls that are used with the dialogs as well.
And the rest is CSS...
Best wishes,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
John
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2009, 12:16 PM
Much thanks for this information.
Given the alternative that you mentioned, the only other thing I would be curious about is whether it would be possible to create two sections or divisions on the editor. One would contain the default toolbars and buttons and the other would consist of the custom skin.
Is it possiblt to do this - create two different toolbars on the same editor - the default and a custom skin??
Thanks!
0
Scott Harford
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2009, 03:53 PM
Also, regarding this statement:
>> and this is why we do not provide custom dimensions for certain user-defined buttons
You would agree that not all of the default buttons of the RadEditor are the same width, yes/no?
Take for instance the 'Paragraph Style' dropdown button or the 'Font Names' or 'Custom Links' dropdowns. Are you saying that custom dimensions are not available for user-defined buttons only?
>> and this is why we do not provide custom dimensions for certain user-defined buttons
You would agree that not all of the default buttons of the RadEditor are the same width, yes/no?
Take for instance the 'Paragraph Style' dropdown button or the 'Font Names' or 'Custom Links' dropdowns. Are you saying that custom dimensions are not available for user-defined buttons only?
0
Hi John,
The different types of Editor tools have different dimensions - normal square buttons, liquid buttons with text 32 wide, split buttons, split buttons with text, etc. The several dropdowns also have they own dimensions set in the code. Due to the rendering of the tools, we cannot provide support for any dimensional tools, because, for example we would not be able to handle the hover or selected states of the buttons. What would happen if you have a 50 x 50 pixels button, and hover it? The hover image for the normal buttons is 22 x 22 pixels, and would not resize automatically, although this is the ultimate dream of the CSS coder.
On your question about using one RadEditor with two different skins for the toolbars. It is not possible, because the skin name is applied not only to the Editor itself, but to the toolbar classes as well, and you cannot tell a toolbar to use the skin X, while editor itself is using skin Y, i.e:
If the skin is "Vista", the root of the editor will be:
<div class="RadEditor Vista reWrapper " id="RadEditor1" />
... and the root element of the toolbar will be:
<div class="Vista reToolbarWrapper" />
The skin name is not inherited directly from the root, because there are cases (for example the show on focus mode of the editor), when the toolbars do not belong to the DOM of the root element of the editor itself, but are rendered inside RadWindow, which is a child of the form, not of the editor.
Sincerely yours,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The different types of Editor tools have different dimensions - normal square buttons, liquid buttons with text 32 wide, split buttons, split buttons with text, etc. The several dropdowns also have they own dimensions set in the code. Due to the rendering of the tools, we cannot provide support for any dimensional tools, because, for example we would not be able to handle the hover or selected states of the buttons. What would happen if you have a 50 x 50 pixels button, and hover it? The hover image for the normal buttons is 22 x 22 pixels, and would not resize automatically, although this is the ultimate dream of the CSS coder.
On your question about using one RadEditor with two different skins for the toolbars. It is not possible, because the skin name is applied not only to the Editor itself, but to the toolbar classes as well, and you cannot tell a toolbar to use the skin X, while editor itself is using skin Y, i.e:
If the skin is "Vista", the root of the editor will be:
<div class="RadEditor Vista reWrapper " id="RadEditor1" />
... and the root element of the toolbar will be:
<div class="Vista reToolbarWrapper" />
The skin name is not inherited directly from the root, because there are cases (for example the show on focus mode of the editor), when the toolbars do not belong to the DOM of the root element of the editor itself, but are rendered inside RadWindow, which is a child of the form, not of the editor.
Sincerely yours,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
John
Top achievements
Rank 1
Rank 1
answered on 15 Jul 2009, 01:58 PM
Martin,
Thanks for the help and explanation on this.
Thanks for the help and explanation on this.