content align in edit breaks

[Christian]

I have a problem where the content in the editor breaks its formatting when its Enabled (in edit mode) i have a parent div with the class "center" that sets the text alignment and the editor shows the content correctly when Enabled is set to False (view mode), but as soon as its in edit mode it aligns the content to the Left.

Any help is appreciated,

Christian

 

.center{
    text-align:center !important;
}

 

<section class="blue darken-4 white-text padding bgMonster">
    <div class="wrapper center padding">



        <telerik:RadEditor ID="edSLPDesc" runat="server" Enabled="False" Width="100%" ContentAreaMode="Div" AutoResizeHeight="True" NewLineMode="Br" BorderStyle="None" data-page="Default" data-section="slpDesc" EditType="Inline" ToolbarMode="ShowOnFocus" EditModes="Design, Html">
            <Content>
                <h4><em>text goes here...</em></h4>
            </Content>
        </telerik:RadEditor>



    </div>
</section>

[Marin Bratanov]

Hi Christian,

Can you confirm this is the exact setup you have? I am asking this because it works fine for me and this is expected (I am attaching here a short video). In the current declaration, the ContentAreaMode is set to DIV, so the content is part of the main page and thus CSS rules apply to it as well.

In case the ContentAreaMode is left to its default value (iframe), the content will be in another context and will not automatically inherit the rules from its parent node. In such cases, you can add the custom styling that will be in place in the publish location to a stylesheet that you can load in the CssFiles collection of the editor. The editor will load this stylesheet in its content area so the content will look like it will in the final place. For example, you could use a rule like this: body { text-align: center; }. You can read more about this collection and how to style the content in the following article: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/content-area-appearance/contentareacssfile-vs-cssfiles.

On a side note—I advise that you use NewLineMode=P (the default value) because block commands (like list management) are designed to work with block elements like paragraphs.

Regards,

Marin Bratanov
Telerik by Progress

[Christian]

Hi Marin,

 

Thank you for the quick feedback, appreciate that very much. i think i found the issue but need some help explaining why it would differ from your solution and how to get around it. if you look at my screenshot i have a text-align on the td, th element on the reContentCell that is causing the issue, if i disable that alignment it all works as intended.

 

 

[Christian]

Never mind, answered my own question and noticed it was inherited from a external .css file.

I blame it on being first day back from a long vacation, terribly sorry.