How to enlarge the size of text editor in modal

Posted by Community Admin on 17-Feb-2016 00:00

When adding a news item, the modal window containing the text editor is opened at a narrow width.

We are using 1920 px wide screen. We would like to use the text editor spaciously. I couldn't find a way to overwrite the witdh of .sfContentBlocksDesignerWrp class which is stated in the dynamically created Telerik Library CSS file.

The page containing the text editor seems to be /Sitefinity/Dialog/PropertyEditor page. Where is this file, that I can write a media style rule in this file to overwrite the width of that class. Or where can I find a CSS file that I can write a rule to overwrite the style again. There is no CSS file referred in this PropertyEditor page.

Regards.

Posted by Community Admin on 22-Feb-2016 00:00

Hello,

One option for achieving this behavior would be to override the default template of the HtmlField and use some jQuery to change the size of the whole iFrame.

Adding the following code at the bottom of the template should do the trick:

<script>

setTimeout(function ()

$('iframe').attr('style', 'width: 1500px; height: 439px; margin: 0px; padding: 0px;');

, 100)

</script>

The default template for your version of Sitefinity can be found here: https://github.com/Sitefinity-SDK/SitefinityResources/releases

To instruct Sitefinity to use the custom template instead of the default one navigate to Administration -> Settings -> Advanced -> Controls -> View Map -> Create new:

HostType: Telerik.Sitefinity.Web.UI.Fields.HtmlField, Telerik.Sitefinity
LayoutTemplatePath: ~/CustomHtmlField.ascx (Relative path to the custom template)

Regards,
Velizar Bishurov
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 24-Feb-2016 00:00

Hi Velizar,

Thank you for your explanations. I have done it by writing CSS rules in the HtmlField.ascx files like below:

<style type="text/css">

.sfNewContentForm

width: 1150px;

body.sfreContentArea

max-width:initial;

.sfNewContentForm .sfTxt

width:100%;

</style>

Of course it would be better to write it in media rules for the proper size.

I dont't think it is a proper way to make this by javascript. CSS is more convenient.

On the other hand, it was a bit hard to complete the procedures beacuse I didn't know which ascx file to edit. I have found it by searching it and spent so much time for this.

Best regards.

Erhan Saydam

This thread is closed

All Replies