Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadEditor with PageLayout - iPhone

5 Answers 114 Views
Editor
This is a migrated thread and some comments may be shown as answers.
DogBizPro
Top achievements
Rank 1
DogBizPro asked on 03 Sep 2016, 12:35 PM
2016-09-03_7-28-54.png
When using the RadEditor and the RadPageLayout together things do not render correctly. As you can see from the image the editor does not push the buttons down far enough and they are in the editor box area. How do we fix this?

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 06 Sep 2016, 11:44 AM
Hello,

I tried to repro the problem on my end but without success (screen1, screen2). The problem is most likely due to some CSS style that positions the buttons over the editor.

If you are unable to locate it, could you please provide a live URL or a simple runnable project where we can examine the markup and the CSS of the page? This will be the fast way to provide a solution for this rendering problem.

Have you also tried to increase or decrease the height of the editor through its Height property?

Best regards,
Rumen
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
DogBizPro
Top achievements
Rank 1
answered on 06 Sep 2016, 01:13 PM
The only css we have on the buttons is "float:right" and the editor has a height=100% that was when this was noticed. But if we have a static height on the editor then it overlays things below it on the iphone displays. Every other display looks fine.
0
Rumen
Telerik team
answered on 08 Sep 2016, 02:25 PM
Hi,

I tried to reproduce the problem with code like this

<telerik:RadEditor runat="server" ID="reContent" RenderMode="Mobile" Height="100%" Width="250px">
    <Content>
    </Content>
</telerik:RadEditor>
<div style="float: right">
    <button runat="server" >Save</button>
    <button runat="server" >Delete</button>
</div>

and this

<telerik:RadEditor runat="server" ID="reContent" RenderMode="Mobile" Height="100%" Width="250px">
    <Content>
    </Content>
</telerik:RadEditor>
 <button runat="server" style="float: right">Save</button>
 <button runat="server" style="float: right">Delete</button>

but I wasn't able to replicate the issue.

Can you please provide a code snippet or an aspx page that I can run and reproduce the problem?

Since the problem is most likely due to the float: right css setting, you can try to replace it with align="right" or style="text-align: right", i.e.

<div style="text-align: right">
    <button runat="server" >Save</button>
    <button runat="server" >Delete</button>
</div>


Best regards,
Rumen
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
DogBizPro
Top achievements
Rank 1
answered on 08 Sep 2016, 03:33 PM

Sure. Here you go.

 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
        <telerik:LayoutRow RowType="Container">
            <Rows>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <asp:Literal runat="server" ID="litOptType" Visible="false" />
                            <asp:ValidationSummary runat="server" ID="vldSum" CssClass="err" DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" ValidationGroup="SignUpOption" />            
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <div class="barHD">Option Details</div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            Name:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="8" SpanSm="9" SpanXs="12">
                            <asp:TextBox runat="server" ID="txtName" CssClass="req" Width="100%" MaxLength="45" />
                            <asp:RequiredFieldValidator runat="server" ID="reqName" ControlToValidate="txtName" Text="*" ErrorMessage="Enter the Name" Display="None" ValidationGroup="SignUpOption" />                
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="2" SpanSm="12" SpanXs="12">
                            <asp:CheckBox runat="server" ID="cbPublic" Text="Public" />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow> 
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            Cost: (<%=System.Globalization.CultureInfo.CurrentCulture.NumberFormat.CurrencySymbol%>)
                            <asp:RequiredFieldValidator runat="server" ID="reqCost" ControlToValidate="txtCost" Display="None" Text="*" ErrorMessage="Enter valid cost" ValidationGroup="SignUpOption" />
                            <asp:RangeValidator runat="server" ID="rngCost" ControlToValidate="txtCost" Display="None" Text="*" ErrorMessage="Enter valid cost" Type="Currency" MinimumValue="0" MaximumValue="999999" ValidationGroup="SignUpOption" />                            
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            <asp:TextBox runat="server" ID="txtCost" CssClass="req" Width="100%" />                        
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="1" SpanSm="3" SpanXs="12">                          
                            Color:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            <asp:TextBox runat="server" ID="txtColor" Width="100%" MaxLength="150" Text="000000" CssClass="req"  />
                            <ajaxToolkit:ColorPickerExtender runat="server" ID="ColorPickerExtender1" TargetControlID="txtColor" OnClientColorSelectionChanged="colorChanged" />
                            <asp:RequiredFieldValidator runat="server" ID="reqColor" ControlToValidate="txtColor" Text="*" ErrorMessage="Enter the Payment Method Name" Display="None" ValidationGroup="EventType" />                        
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow> 
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            Duration:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="2" SpanSm="9" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlDurationDays" CssClass="req" Width="100%" />
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="1" SpanSm="12" SpanXs="12">
                            Hours:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="2" SpanSm="9" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlDuration" CssClass="req" Width="100%" /> 
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow> 
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanSm="3" SpanXs="12">
                            Description:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanSm="9" SpanXs="12">
                            <div style="height:400px;">
                                <telerik:RadEditor runat="server" ID="txtDescription" Height="100%" Width="100%" NewLineMode="Br" SkinID="Signature" Enabled="true" ContentFilters="DefaultFilters,MakeUrlsAbsolute">
                                    
                                </telerik:RadEditor>
                            </div>
                            <br />
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <div class="barHD">Registration Forms</div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Client Form:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlClientForm" Width="90%" AppendDataBoundItems="true" TabIndex="8" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1921504-custom-registration-forms" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Dog Form:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlDogForm" Width="90%" AppendDataBoundItems="true" TabIndex="9" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1921504-custom-registration-forms" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <div class="barHD">Waiver</div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Waiver:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlWaiver" Width="90%" AppendDataBoundItems="true" TabIndex="10" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1445505-client-waivers" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <div class="barHD">Auto-Responders</div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Registration:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlRegAR" TabIndex="11" Width="90%" AppendDataBoundItems="true" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1323640" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Confirmation:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlConfAR" Width="90%" AppendDataBoundItems="true" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1323640" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow HiddenXl="true" HiddenLg="true" HiddenMd="true" HiddenSm="true" HiddenXs="true">
                    <Columns>
                        <telerik:LayoutColumn Span="2" SpanXs="12">
                            Waiting List:
                        </telerik:LayoutColumn>
                        <telerik:LayoutColumn Span="10" SpanXs="12">
                            <asp:DropDownList runat="server" ID="ddlWaitAR" Width="90%" AppendDataBoundItems="true" />
                            <a href="http://support.dogbizpro.com/customer/portal/articles/1323640" target="_blank"><img src="/Secure/Images/help.png" /></a>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            &nbsp;
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
                <telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
                    <Columns>
                        <telerik:LayoutColumn Span="12">
                            <div style="float:right;">
                                <telerik:RadButton SingleClick="true" SingleClickText="Deleting..." ButtonType="LinkButton" runat="server" ID="btnDelete" CssClass="btnN" Visible="false" Width="90" Text="Delete" OnClick="btnDelete_Click" ToolTip="Delete Client Transaction" CommandArgument='<%#Eval("ID")%>' OnClientClick="ConfirmDelete" /> 
                                <telerik:RadButton SingleClick="true" SingleClickText="Activating..." ButtonType="LinkButton" runat="server" ID="btnReactivate" CssClass="btnN" Visible="false" Width="90" OnClick="btnReactivate_Click" Text="Activate" ToolTip="Activate" TabIndex="-1" CommandArgument='<%#Eval("ID")%>' />
                                <telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" CssClass="btnY" Width="90" ToolTip="Save" Text="Save" OnClick="btnSave_Click" TabIndex="6" ValidationGroup="SignUpOption" CommandArgument="0" />
                            </div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
            </Rows>
        </telerik:LayoutRow>
    </telerik:RadPageLayout>
                      
</asp:Content>

0
Rumen
Telerik team
answered on 13 Sep 2016, 12:50 PM
Hi Stephanie,

I tested the provided markup and was not able to reproduce the issue again. For your convenience I have recorded my test in the following video: http://screencast.com/t/zu50obojE. Please, check it out and let me know if I am missing something.

I noticed the the buttons are not directly placed (as in your screenshot) under the editor, but below some dropdowns. Are you sure that you have provided the right code version. 

It would be better if you provide a fully working demo or a live URL where we can observe the issue, so that we can experiment with your custom CSS styles and see which one is causing the issue.

Best regards,
Rumen
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Editor
Asked by
DogBizPro
Top achievements
Rank 1
Answers by
Rumen
Telerik team
DogBizPro
Top achievements
Rank 1
Share this question
or