DDL width & custom colors

[Derek Hunziker]

Hi there,

I'm having an issue with the width of my editor's dropdownlists.  By default, they are getting cut off so that the name of the dropdown is not fully displayed.  All my attempts to apply CSS hacks to lengthen the width have failed.  Please see the image below for an example.

http://envnet.ucdavis.edu/images/uploads/ddls.gif

Secondly: I realize this is getting picky, but is it possible to add a <color separator="true" /> or another indicator that would restrict the number of columns in the color dialogue? The color palette that I'm working with is 8 columns wide.

http://envnet.ucdavis.edu/images/uploads/colors.gif

Thanks!

[Rumen]

Hi Derek,

Straight to the points:

1. You can resize the dropdown headers using the solution provided in this help article: Resizing The Dropdown Header And Pop Up Size.
2. You can also learn how to resize the colorpicker dropdown popup is the help article above.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Derek Hunziker]

Thanks Rumen!

That worked great for the dropdownlists! As for the less important issue, it appears that the editor's color picker will render with 10 columns regardless of the popup width.

I would fill the extra two cells with dummy colors and then remove the cells using javascript, but the table isn't rendered initally. It only appears after clicking the ForeColor menu item, and that doesn't appear to have an associated clientside event.  Moreover, the table itself does't have a class or id, which would make it hard to target.

Any ideas on this?

-Derek

[Rumen]

Hi Derek,

Here is an example how to set the desired items per row count on the client:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
   var oTool = editor.getToolByName("ForeColor"); //get a reference to the desired tool
   oTool.set_itemsperrow(8);
}
</script>
<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
   <Tools>
       <telerik:EditorToolGroup>
           <telerik:EditorTool Name="ForeColor"  />
       </telerik:EditorToolGroup>
   </Tools>
</telerik:radeditor>


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Derek Hunziker]

This worked beautifully, Thank you!

[Rumen]

Hi Derek,

This is a follow-up!

I want to share two easy ways to set the ItemsPerRow attribute:

1. via the codebehind:
   
   RadEditor1.FindTool("ForeColor").Attributes["itemsperrow"] = "8";
   
2. via the inline inner-tag tool declaration:
   
   <telerik:radeditor runat="server" ID="RadEditor1" >
      <Tools>
          <telerik:EditorToolGroup>
              <telerik:EditorTool Name="ForeColor"  itemsperrow="8" />
          </telerik:EditorToolGroup>
      </Tools>
   </telerik:radeditor>

Greetings,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Atiq Ur Rehman]

hi I have the same width issue and I have the latest version. However I can't find any width attribute associated with EditorTool of Editor. Can you help me with this. It doesn't make any difference even if i put width in EditorTool, it would still show the same width.

Thanks
Atiq

[Rumen]

Hi Atiq,

You can only resize the dropdown tools of RadEditor, but not the buttons. Could you please, specify which editor's tool you want to resize?

If you are unable to resize a dropdown header or a dropdown popup,  then please, open a support ticket and send a sample working project that demonstrates the problem.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Atiq Ur Rehman]

Hi I am trying to resize button. How to resize them? The problem is that the because of the button width the text is not shown, so if the text for button is 'Questions', it only shows 'Quest'. Whats the way around this?

Thanks
Atiq

[Tervel]

Hello Atiq,

We are not sure what you are trying to accomplish. My suggestion is to open a support ticket and send us a page as well as your toolsfile (or inline tools declaration) - so that we see your scenario and reproduce the behavior on our end. One other possibility would be to paste all relevant markup (XML, aspx) here in the forum thread for us to examine.


Sincerely yours,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Atiq Ur Rehman]

ok I can't open the support ticket for this one as its a big project and in DNN. This is the Editor code in ascx file;

<telerik:RadEditor ID="documentEditor" runat="server"

DialogHandlerUrl="/DesktopModules/TelerikWebUI/RadEditorProvider/Telerik.Web.UI.DialogHandler.aspx"

Height="500px" Language="en-GB"

onclientcommandexecuting="OnClientCommandExecuting" Width="100%">

<tools>

<telerik:EditorToolGroup Tag="editTag">

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="PasteAsHtml" />

<telerik:EditorTool Name="PasteFromWord" />

<telerik:EditorTool Name="Undo" />

<telerik:EditorTool Name="Redo" />

<telerik:EditorTool Name="FindAndReplace" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="fontOperationsTag">

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorTool Name="StrikeThrough" />

<telerik:EditorTool Name="Subscript" />

<telerik:EditorTool Name="Superscript" />

<telerik:EditorTool Name="FontName" />

<telerik:EditorTool Name="RealFontSize" />

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="paragraphTag">

<telerik:EditorTool Name="InsertParagraph" />

<telerik:EditorTool Name="InsertHorizontalRule" />

<telerik:EditorTool Name="InsertOrderedList" />

<telerik:EditorTool Name="InsertSnippet" />

<telerik:EditorTool Name="InsertSymbol" />

<telerik:EditorTool Name="InsertFormElement" />

<telerik:EditorTool Name="InsertUnorderedList" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="justifyTag">

<telerik:EditorTool Name="JustifyCenter" />

<telerik:EditorTool Name="JustifyFull" />

<telerik:EditorTool Name="JustifyLeft" />

<telerik:EditorTool Name="JustifyNone" />

<telerik:EditorTool Name="JustifyRight" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="tableTag">

<telerik:EditorTool Name="TableWizard" />

<telerik:EditorTool Name="DeleteTable" />

<telerik:EditorTool Name="DeleteCell" />

<telerik:EditorTool Name="DeleteColumn" />

<telerik:EditorTool Name="DeleteRow" />

<telerik:EditorTool Name="InsertColumnLeft" />

<telerik:EditorTool Name="InsertColumnRight" />

<telerik:EditorTool Name="InsertRowAbove" />

<telerik:EditorTool Name="InsertRowBelow" />

<telerik:EditorTool Name="InsertTable" />

<telerik:EditorTool Name="MergeColumns" />

<telerik:EditorTool Name="MergeRows" />

<telerik:EditorTool Name="SetCellProperties" />

<telerik:EditorTool Name="SetTableProperties" />

<telerik:EditorTool Name="SplitCell" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="spellTag">

<telerik:EditorTool Name="ConvertToLower" />

<telerik:EditorTool Name="ConvertToUpper" />

<telerik:EditorTool Name="AjaxSpellCheck" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="managersTag">

<telerik:EditorTool Name="TemplateManager" />

<telerik:EditorTool Name="ImageManager" />

<telerik:EditorTool Name="SetImageProperties" />

<telerik:EditorTool Name="AbsolutePosition" />

<telerik:EditorTool Name="LinkManager" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup Tag="dynamicTag">

<telerik:EditorTool Name="ToggleScreenMode" />

<telerik:EditorTool Name="PageBreak" />

</telerik:EditorToolGroup>

</tools>

<fontnames>

<telerik:EditorFont Value="Agency FB" />

<telerik:EditorFont Value="Algerian" />

<telerik:EditorFont Value="Arial" />

<telerik:EditorFont Value="Arial Black" />

<telerik:EditorFont Value="Arial Narrow" />

<telerik:EditorFont Value="Arial Rounded MT Bold" />

<telerik:EditorFont Value="Arial Unicode MS" />

<telerik:EditorFont Value="Baskerville Old Face" />

<telerik:EditorFont Value="Batang" />

<telerik:EditorFont Value="Bauhaus 93" />

<telerik:EditorFont Value="Bell MT" />

<telerik:EditorFont Value="Berlin Sans FB" />

<telerik:EditorFont Value="Berlin Sans FB Demi" />

<telerik:EditorFont Value="Bernard MT Condensed" />

<telerik:EditorFont Value="Blackadder ITC" />

<telerik:EditorFont Value="Bodoni MT" />

<telerik:EditorFont Value="Bodoni MT Black" />

<telerik:EditorFont Value="Bodoni MT Condensed" />

<telerik:EditorFont Value="Bodoni MT Poster Compressed" />

<telerik:EditorFont Value="Book Antiqua" />

<telerik:EditorFont Value="Bookman Old Style" />

<telerik:EditorFont Value="Bookshelf Symbol 1" />

<telerik:EditorFont Value="Bradley Hand ITC" />

<telerik:EditorFont Value="Britannic Bold" />

<telerik:EditorFont Value="Broadway" />

<telerik:EditorFont Value="Brush Script MT" />

<telerik:EditorFont Value="Calibri" />

<telerik:EditorFont Value="Californian FB" />

<telerik:EditorFont Value="Calisto MT" />

<telerik:EditorFont Value="Cambria" />

<telerik:EditorFont Value="Candara" />

<telerik:EditorFont Value="Castellar" />

<telerik:EditorFont Value="Centaur" />

<telerik:EditorFont Value="Century" />

<telerik:EditorFont Value="Century Gothic" />

<telerik:EditorFont Value="Century Schoolbook" />

<telerik:EditorFont Value="Chiller" />

<telerik:EditorFont Value="Colonna MT" />

<telerik:EditorFont Value="Comic Sans MS" />

<telerik:EditorFont Value="Consolas" />

<telerik:EditorFont Value="Constantia" />

<telerik:EditorFont Value="Cooper Black" />

<telerik:EditorFont Value="Copperplate Gothic Light" />

<telerik:EditorFont Value="Corbel" />

<telerik:EditorFont Value="Courier New" />

<telerik:EditorFont Value="Curlz MT" />

<telerik:EditorFont Value="Elephant" />

<telerik:EditorFont Value="Engravers MT" />

<telerik:EditorFont Value="Eras Bold ITC" />

<telerik:EditorFont Value="Eras Light ITC" />

<telerik:EditorFont Value="Eras Medium ITC" />

<telerik:EditorFont Value="Estrangelo Edessa" />

<telerik:EditorFont Value="Footlight MT Light" />

<telerik:EditorFont Value="Franklin Gothic Book" />

<telerik:EditorFont Value="Garamond" />

<telerik:EditorFont Value="Georgia" />

<telerik:EditorFont Value="High Tower Text" />

<telerik:EditorFont Value="Kartika" />

<telerik:EditorFont Value="Lucida Sans" />

<telerik:EditorFont Value="Microsoft Sans Serif" />

<telerik:EditorFont Value="Mangal" />

<telerik:EditorFont Value="Symbol" />

<telerik:EditorFont Value="Tahoma" />

<telerik:EditorFont Value="Times New Roman" />

<telerik:EditorFont Value="Verdana" />

<telerik:EditorFont Value="Webdings" />

</fontnames>

<languages>

<telerik:SpellCheckerLanguage Code="en-GB" Title="English (UK)" />

<telerik:SpellCheckerLanguage Code="en-US" Title="English(US)" />

<telerik:SpellCheckerLanguage Code="en-AU" Title="English (AU)" />

<telerik:SpellCheckerLanguage Code="de-DE" Title="German" />

<telerik:SpellCheckerLanguage Code="fr-FR" Title="French" />

<telerik:SpellCheckerLanguage Code="es-ES" Title="Spanish" />

<telerik:SpellCheckerLanguage Code="it-IT" Title="Italian" />

</languages>

<imagemanager deletepaths="/Images/editorImages/imageManager"

maxuploadfilesize="500000" uploadpaths="/Images/editorImages/imageManager"

viewpaths="/Images/editorImages/imageManager" />

<documentmanager deletepaths="/Images/editorImages/documentManager"

uploadpaths="/Images/editorImages/documentManager"

viewpaths="/Images/editorImages/documentManager" />

<content>

</content>

<flashmanager deletepaths="/Images/editorImages/flashManager"

uploadpaths="/Images/editorImages/flashManager"

viewpaths="/Images/editorImages/flashManager" />

<mediamanager deletepaths="/Images/editorImages/mediaManager"

uploadpaths="/Images/editorImages/mediaManager"

viewpaths="/Images/editorImages/mediaManager" />

<templatemanager deletepaths="/images/editorImages/templateManager"

uploadpaths="/images/editorImages/templateManager"

viewpaths="/images/editorImages/templateManager" />

</telerik:RadEditor>

Here is the .vb code

Try

'add a new Toolbar dynamically

Dim dynamicToolbar As New EditorToolGroup()

documentEditor.Tools.Insert(0, dynamicToolbar)

'add a custom dropdown and set its items and dimension attributes

'-----------------------------------------------------

'START OF QUOTES TABLE DROPDOWNLIST FOR THE DOCUMENT '

Dim quotesDD As New EditorDropDown("QuotesTableDDL")

quotesDD.Text =

"- Quotes Table -"

'Set the popup width and height

quotesDD.Attributes(

"width") = "150px"

'ddn.Attributes("popupwidth") = "240px"

'ddn.Attributes("popupheight") = "100px

quotesDD.Items.Add(

"Quote ID", "{0}")

'Add tool to toolbar

dynamicToolbar.Tools.Add(quotesDD)

'END

'-----------------------------------------------------

'START OF MISC DROPDOWNLIST

Dim mescDD As New EditorDropDown("QuotesTableDDL")

mescDD.Text =

"- Misc -"

mescDD.Items.Add(

"Date", "{0}")

dynamicToolbar.Tools.Add(mescDD)

'END

'-----------------------------------------------------

'START OF USERS TABLE DROPDOWNLIST

Dim usersDD As New EditorDropDown("QuotesTableDDL")

usersDD.Attributes(

"width") = "150px"

usersDD.Text =

"- Users Table -"

usersDD.Items.Add(

"Telephone", "{0}")

dynamicToolbar.Tools.Add(usersDD)

'END

'-----------------------------------------------------

'START OF QUESTIONS DROPDOWNLIST

Dim qTitle As New RadTreeNode("Sections", "")

qTitle.ExpandMode = TreeNodeExpandMode.ServerSideCallBack

rdQuestions.Nodes.Add(qTitle)

Dim questionsCD As New EditorTool

questionsCD.Text =

"Questions"

questionsCD.Name =

"TreeviewDropdown"

questionsCD.ShowIcon =

False

questionsCD.ShowText =

True

'questionsCD.Attributes("width") = "50px"

dynamicToolbar.Tools.Add(questionsCD)

'END

'-----------------------------------------------------

'START OF RATEFACTORS DROPDOWN

Dim sectionsNode As New RadTreeNode("Sections", "")

sectionsNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack

rdRateFactors.Nodes.Add(sectionsNode)

Dim ratefactorsCD As New EditorTool

ratefactorsCD.Text =

"Rate Factors"

ratefactorsCD.Name =

"rfTreeviewDropdown"

ratefactorsCD.ShowIcon =

False

ratefactorsCD.ShowText =

True

dynamicToolbar.Tools.Add(ratefactorsCD)

documentEditor.ContentFilters = EditorFilters.MakeUrlsAbsolute

The problem is that it should show Question for Questions Editor Tool and Rate Factors for ratefactorsCD EditorTool, instead it shows Quest, Rate F.

I hope you understand the problem now?

[Rumen]

Hi Atiq,

You can fix the problem with the following class:

    <style type="text/css">
    .rade_button_text
    {
        width: auto !important;
    }
    </style>

Thus the button text will be displayed properly inside the custom button.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Leslie Shkolnik]

I have a similar problem.  I want to show text next to the InsertSnippet tool:

<

tools name="CustomToolbar">

<

tool name="InsertSnippet" showtext="true" Text="InsertTag"/>

<

tool name="InsertCustomLink" showtoolstext="true"/>

</

tools>

Instead of the toolbar increasing it's size, the text and arrow wrap to a second and third line which causes other icons in the file to show.

I have tried setting width: auto on both the text itself, which has no effect, or on the rade_tool_text or rad_splitbutton, but that just causes the width of the toolbar to be the whole width of the screen.  I started with the "Telerik" skin, although I have made style changes to it.

How do I get the toolbar to expand its size and not wrap when showing text for the InsertSnippet?

Thanks,

Leslie

[Leslie Shkolnik]

Also, if I try to set the width in the tools file, it sets the width of the icon area (and shows other icons in the file), and the text and the arrow still wrap to new lines insteaad of increasing the width of the toolbar itself:

<tools name="CustomToolbar">
<tool name="InsertSnippet" showtext="true" Text="InsertTag" width="90px"/>
<tool name="InsertCustomLink" showtoolstext="true"/>
</tools>

[Rumen]

Hi Leslie,

You can try the following class

    <style type="text/css">
    .rad_splitbutton
    {
        width: 85px !important;
    }
    </style>

 to resize the InsertSnippet split button text.

You can also resize the Insert Custom Links dropdown header by setting the width attribute like this:

        <telerik:radeditor runat="server"  ID="RadEditor1" >
            <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool name="InsertSnippet" showtext="true" Text="InsertTag" />
                <telerik:EditorTool name="InsertCustomLink" Text="Insert Custom Links" width="120px" showtext="true"/>
            </telerik:EditorToolGroup>
            </Tools>
        </telerik:radeditor>


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vladislav Kuznetsov]

hi

I have problem, please help

After moving to 2009.01.0527.20 version of Telerik our toolbars are looking bad. All tools with dropdowns not usual as they was, but have width 100% of editor's width .
I changed nothing in the code, just changed dll of telerik

<

telerik:radeditor runat="server" ID="txtBody" Height="400px" Width="500px" Skin="Vista" ToolsFile="~/admin/Tools.xml" >

 

 

 

<SpellCheckSettings SpellCheckProvider="PhoneticProvider" WordIgnoreOptions="None" />

 

 

<Content>

 

 

</Content>

 

 

</telerik:radeditor>

 

[Rumen]

Hi Vladislav,

Could you please, open a support ticket and send a sample working project that demonstrates the reported problem.  Please, also attach a screenshot of the problem and specify the browser where the problem exists.


Kind regards,
Rumen
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.