This is a migrated thread and some comments may be shown as answers.

Rad Editor - Numbered Bullet list is not changing Size

12 Answers 98 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Venkadesh Babu
Top achievements
Rank 1
Venkadesh Babu asked on 20 May 2011, 02:32 PM
Hi All,

I am using Telerik Rad Editor and facing an issue in bulleted number list font size. The bulleted numbers font size is not changing while change the font of size of text.

For example see the bulleted number font size is not matched with the text.
  1. line 1
  2. line 2
  3. line 3

Suggest me to solve this issue. Thanks in advance.

- BABU

12 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 24 May 2011, 11:06 AM
Hello Babu,

You can use the code below to inspect the current selection and apply the font size to the selected <li> tag:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <ul>
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
        </ul>
    </Content>
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        //The command name  
        var commandName = args.get_commandName();
 
        if (commandName == "RealFontSize" || commandName == "FontSize") {
            var selElem = editor.getSelectedElement(); //get the selected element  
 
            var parentElem = selElem.parentNode;
            alert(parentElem);
            if (selElem.tagName == "LI") //if the select elem is LI tag  
            {
 
                selElem.style.fontSize = args.get_value();
 
            }
            args.set_cancel(true);
        }
    
</script>

This is a base code that you can further enhance to cover your custom scenario.

Kind regards,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Venkadesh Babu
Top achievements
Rank 1
answered on 30 May 2011, 02:44 PM
Hi Rumen,

Thank you for your response,

As per your base code i have reproduced that in my application but its not working !.Instead of changing the all <LI> items it changes last <LI> item in the editor.for your refernce ..

Used

ToolsFile

 

 

="~/ToolFile/Mytools.xml"
and
<tools name="DropdownToolbar"><tool name="FontSize" />

 

 

 

 

 

Step : 1(FontSize:3)

  1. Line1
  2. Line2
  3. Line3
  4. Line4
  5. Line5

Now im changing the fontsize to 7 it does not reflected in the radeditor

Step : 2(FontSize:7)

  1. Line1
  2. Line2
  3. Line3
  4. Line4
  5. Line5

Suggest me to solve this issue. Thanks in advance.

- BABU

0
Dobromir
Telerik team
answered on 02 Jun 2011, 11:34 AM
Hi Venkadesh,

The provided sample code provided by Rumen modifies the behavior of the RealFontSize and FontSize tool to apply the value to the LI element instead. If I understand you correctly, you want to be able to apply font-size to the specific LI and to the whole UL / OL as well. To achieve this you need to further extend the function.

Also, since the mouse selection is not very accurate I would recommend you instruct the users to use the RadEditor's DOM Inspector module to properly select the required element.

The following is the modified funtion:
function OnClientCommandExecuting(editor, args)
{
    //The command name 
    var commandName = args.get_commandName();
 
    if (commandName == "RealFontSize" || commandName == "FontSize")
    {
        var selElem = editor.getSelectedElement(); //get the selected element 
 
        var parentElem = selElem.parentNode;
        alert(parentElem);
        if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL")
        {
                selElem.style.fontSize = args.get_value();
        }
        args.set_cancel(true);
    }
}

In addition, the following video demonstrates the usage of DOM Inspector module:
http://screencast.com/t/tgLFnkUQJ

Kind regards,
Dobromir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Venkadesh Babu
Top achievements
Rank 1
answered on 03 Jun 2011, 02:58 PM
Hi Rumen,

Thank you for your response,

But when i tested your code on Firefox,chrome browsers its not working!,due to getSelectedElement(); not  selecting element..

var selElem = editor.getSelectedElement();
if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL")
        {
                selElem.style.fontSize = args.get_value();
        }

where selElem returns only body not LI tag.

Suggest me to solve this issue. Thanks in advance.

- BABU
0
Rumen
Telerik team
answered on 08 Jun 2011, 01:05 PM
Hello Babu,

I tested the solution provided by Dobromir and it works as expected on my end in IE, Firefox and Chrome. You can see my test in the following video: http://screencast.com/t/MeD4js06s3FK.

What am I missing?

Greetings,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Venkadesh Babu
Top achievements
Rank 1
answered on 09 Jun 2011, 05:50 AM
Hi Rumen,

Thank you for your response,

I have tested again your base code,working great in chrome.But when i tested same in IE 8 and Firefox 4 numbered bullet list is not changing Size .Please refer the link for issue reproducing.

http://www.2shared.com/video/ihT4cYAG/RadError.html

Suggest me to solve this issue. Thanks in advance.

- BABU

0
Rumen
Telerik team
answered on 14 Jun 2011, 01:26 PM
Hello Venkadesh Babu,

I was unable to download the RadError video file because the provided site always throws the following error message:
User downloading session limit is reached. Please try again in few minutes.
regardless of elapsed time.

Could you please send the file to clientservice@telerik.com and notify me here when you send it?

Kind regards,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
arnaud
Top achievements
Rank 1
answered on 17 Jun 2011, 12:40 PM
Hi,

Same problem here but with the bullet point size.
The size of the bullet point does not change as you can see on the attached screenshots.

Example is based on :

UL
{
   
    padding-left: 30px;
    color: #413344;
    font: 12px Arial, Helvetica, sans-serif;
}

but can be reproduced on your 'First Look' démo
0
Venkadesh Babu
Top achievements
Rank 1
answered on 17 Jun 2011, 01:51 PM
Hi Rumen,

Thank you for your response,

I have send you a mail along with video,kindly have a glance.

Suggest me to solve this issue. Thanks in advance.

- BABU

0
Rumen
Telerik team
answered on 22 Jun 2011, 01:34 PM
Hi guys,

Babu,

I was able to fix the IE8 problem by updating the code, e.g.
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        //The command name
        var commandName = args.get_commandName();
 
        if (commandName == "RealFontSize" || commandName == "FontSize") {
            var selElem = editor.getSelectedElement(); //get the selected element
 
            var parentElem = selElem.parentNode;
 
            if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL") {
                if ($telerik.isIE7 || $telerik.isIE8) {
                    selElem.parentNode.style.fontSize = args.get_value();
                }
                else selElem.style.fontSize = args.get_value();
            }
            args.set_cancel(true);
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" runat="server">
    <Content>
        <ol>
            <li>dasdd</li>
            <li>dasdas</li>
            <li>dasasd</li>
        </ol>
    </Content>
</telerik:RadEditor>

Here is a video demonstrating my test in the different browsers: http://screencast.com/t/suaTsIwxW.


Arnaud,
This is a browser behavior of Firefox, which is not reproducible in IE. The behavior is not reproducible with an editable DIV in Firefox too as shown in the following video http://screencast.com/t/3Ete7ahM. If this is a showstopper for you can configure the content area of RadEditor to be rendered as an editable DIV by setting ContentAreaMode="Div".

Greetings,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Venkadesh Babu
Top achievements
Rank 1
answered on 23 Jun 2011, 02:11 PM
Hi Rumen,

Thank you so much,

I have tested again your base code,its working awesome in chrome, IE 8.I noticed that your using

<tool name="RealFontSize" />

 but as per my requirement im using 

<tool name="FontSize" />

When i use this numbering bullet size not reproducing as like realfontsize.

And also when i tested same in Firefox 4 numbered bullet list is not changing Size .

Kindly suggest me to solve this issue.

Thanks in advance.

- BABU


 
0
Dobromir
Telerik team
answered on 28 Jun 2011, 04:42 PM
Hi Babu,

The problem comes from the fact that FontSize tool's value is number between 1 and 7 (standard font-size values for <font> element), and when applied as CSS property it is passed as pixels which is causing incorrect display. In order to use the FontSize tool with the customization provided by Rumen you need to convert the value returned by the tool into pixels.

For your convenience I have implemented such converter. Here is the new code:
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args)
    {
        //The command name
        var commandName = args.get_commandName();
 
        if (commandName == "RealFontSize" || commandName == "FontSize")
        {
            var selElem = editor.getSelectedElement(); //get the selected element
 
            var parentElem = selElem.parentNode;
 
            if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL")
            {
                if ($telerik.isIE7 || $telerik.isIE8)
                {
                    selElem.parentNode.style.fontSize = fontSizeIntoPixels(args.get_value());
                }
                else selElem.style.fontSize = fontSizeIntoPixels(args.get_value());
            }
            args.set_cancel(true);
        }
    }
 
    function fontSizeIntoPixels(fsValue)
    {
        switch (fsValue)
        {
            case 1:
                return "10px";
                break;
            case 2:
                return "13px";
                break;
            case 3:
                return "16px";
                break;
            case 4:
                return "18px";
                break;
            case 5:
                return "24px";
                break;
            case 6:
                return "32px";
                break;
            case 7:
                return "48px";
                break;
        }
    }
</script>
<telerik:RadEditor ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting" runat="server">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="FontSize" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        <ol>
            <li>dasdd</li>
            <li>dasdas</li>
            <li>dasasd</li>
        </ol>
    </Content>
</telerik:RadEditor>


Greetings,
Dobromir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
Editor
Asked by
Venkadesh Babu
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Venkadesh Babu
Top achievements
Rank 1
Dobromir
Telerik team
arnaud
Top achievements
Rank 1
Share this question
or