RadEditor with PageLayout - iPhone

6 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 03 Sep Link to this post

    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?
  2. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 06 Sep Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 06 Sep Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 08 Sep Link to this post

    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.
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 08 Sep in reply to Rumen Link to this post

    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>

  7. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 13 Sep Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017