在引导模式弹出窗口和htmleditor上出现奇怪的显示问题

Question

I am having a weird display issue when using ajax htmleditorextender inside the modal popup of bootstrap. whenever i remove the html editor, the display works fine. so, does bootstrap not compatible with htmleditorextender? Help please. Here's the screenshot.

When using html editor

If I remove html editor

Code:

        <div id="popupModalViewDetails" class="modal fade" role="dialog">
            <div class="modal-dialog">
                 <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">View Report</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-4 col-lg-2">
                                <asp:Label ID="Label1" runat="server" Text="ID"></asp:Label>
                                <asp:TextBox ID="txtID" runat="server" ReadOnly="True" CssClass="form-control input-sm"></asp:TextBox>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-7 col-lg-4">
                                <asp:Label ID="Label20" runat="server" Text="Date Sent:"></asp:Label>
                                <asp:TextBox ID="txtDateSent" runat="server" MaxLength="50" TextMode="Email" ReadOnly="True" CssClass="form-control input-sm"></asp:TextBox>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <asp:Label ID="Label22" runat="server" Text="Title:"></asp:Label>

                                <asp:TextBox ID="txtTitle" runat="server" MaxLength="70" CssClass="form-control input-sm"></asp:TextBox>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <asp:Label ID="Label21" runat="server" Text="Subject:"></asp:Label>

                                <asp:TextBox ID="txtSubject" runat="server" CssClass="form-control input-group-sm" Height="150px" TextMode="MultiLine"></asp:TextBox>
                                <asp:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="txtSubject" EnableSanitization="false">
                                </asp:HtmlEditorExtender>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnResend" runat="server" Text="Send Report" OnClientClick="return confirm('Send this report?');" CssClass="btn btn-info" />
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this report?');" CssClass="btn btn-info" UseSubmitBehavior="false" data-dismiss="modal" />
                    </div>
                </div>
            </div>
        </div>

Please help. Thanks.

Answer 1

Your problem is solved by changing two styles of ajax, which you must place at the beginning of your website.

<style>
    .ajax__html_editor_extender_container
    {
        width: 100% !important;
        height: 100% !important;
    }
    .ajax__html_editor_extender_texteditor
    {
        width: 100% !important;
        height: 300px !important;
    }
</style>