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

【问题标题】：Getting weird display issue on bootstrap modal pop up and htmleditor在引导模式弹出和 htmleditor 上出现奇怪的显示问题
【发布时间】：2016-11-29 19:09:37
【问题描述】：

在 bootstrap 的模态弹出窗口中使用 ajax htmleditorextender 时，我遇到了一个奇怪的显示问题。每当我删除 html 编辑器时，显示工作正常。那么，bootstrap 与 htmleditorextender 不兼容吗？请帮忙。这是屏幕截图。

When using html editor

If I remove html editor

代码：

        <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>

请帮忙。谢谢。

【问题讨论】：

没人回答..来吧...

标签： html css asp.net ajax twitter-bootstrap

【解决方案1】：

您的问题通过更改两种样式的 ajax 来解决，您必须将它们放在网站的开头。

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

【讨论】：