在bootstrap模式弹出和htmleditor上出现奇怪的显示问题

时间:2016-07-26 08:29:23

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

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

请帮忙。 感谢。

1 个答案:

答案 0 :(得分:0)

您可以通过更改两种样式的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>