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

Custom CSS Classes

7 Answers 40 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Neil
Top achievements
Rank 1
Neil asked on 19 Jan 2011, 09:18 PM
I have the following in my tools file XML, when I remove a class, it is removed from the editor.  However, when I add a class entry and associated .class definition in the style sheet, I do not get the class in the styles drop-down in the editor.

<classes>
    <class name="Photo (Left)" value=".photo-left"></class>
    <class name="Photo (Right)" value=".photo-right"></class>
 </classes>


7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Jan 2011, 03:13 PM
Hi Neil,

If your page does not contain any css classes and you try set an item in the dropdown with the CssClasses. class declaration , e.g.

<class name="Photo (Left)" value=".photo-left"></class>

then the Photo (Left) item will be not populated, because the .photo-left class does not exist on the page.


The CssClasses collection does not add classes, it restrict the existing classes to be loaded in the Apply Class dropdown.

What you should also do is to make sure that the .photo-left class exists on the page with RadEditor or in an external CSS file which is exported through the CssFiles property.

Best 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
Neil
Top achievements
Rank 1
answered on 20 Jan 2011, 03:43 PM
Thanks Rumen.  

My two examples Photo (left) and photo (right) are working great, when I add a third style to the <classesblock in the tools file and add the associated css definitions in the style sheet (right below the photo classes) they are not being displayed in the Apply Class drop down.
0
Rumen
Telerik team
answered on 21 Jan 2011, 06:08 PM
Hello Neil,

Is the third (newly added) class defined on the page with RadEditor? Can you please isolate the problem in a sample working project and send it for examination by opening a support ticket?

Best 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
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 10 Mar 2021, 12:06 PM

Hi Rumen,

 

I don't know if the procedure for population of the Class dropdown has changed, but I discover the following behavior:

 

In toolsfile I have:

 

  <classes>
    <class name="Not working" value=".mt-0" />

<class name="Working" value=".lead" />

</classes>

 

In RadEditor I have as content:

 

<a href="#" target="_blank">Lorem</a>

 

Class dropdown shows as captured.

What I can find is that all classes which are defined as:

.mt-0,mx-0{} in the linked CSS are not shown.

 

On the other hand class defined as:

 

.lead{} are shown correctly.

 

Can you reproduce this behavior?

 

Marc

 

 

0
Rumen
Telerik team
answered on 10 Mar 2021, 01:22 PM

Hi Marc,

I tested the reported scenario and I wasn't able to reproduce it.

For your convenience, I recorded a short video demonstrating my test. Am I missing something?

I have also attached my proj files.

Regards,
Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 10 Mar 2021, 01:55 PM

The clue lies herein that you define:

 

    <style>
        .mt-0 {
            color: red;
        }

        .lead {
            background-color: blue;
        }
    </style>

 

But in almost all CSS cases the syntax is more like:

    <style>
        .mt-0,.mx-0 {
            color: red;
        }

        .lead {
            background-color: blue;
        }
    </style>

 

Watch the concatenated styles seperated by comma.

I tested and those particular styles are not picked up by the dropdown.

 

Hope you can reproduce now, Marc

0
Rumen
Telerik team
answered on 10 Mar 2021, 04:59 PM

Hi Marc,

This is by design. If RadEditor starts to parse the class strings after the comma, this will drastically decrease the editor and ApplyClass dropdown performance. If you want you can write your own parsing mechanism and populate the classes in your own custom dropdown. After that you can apply the selected class to the selected content by using the editor.Fire("ApplyClass", oTool) method.

 

Regards,
Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor
Asked by
Neil
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Neil
Top achievements
Rank 1
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or