bootstrap modal with summernote wisywig ASP.NET

404 views
Skip to first unread message

Alem Bišćan

unread,
Aug 27, 2014, 4:20:36 AM8/27/14
to bootstr...@googlegroups.com
Hello community,

I am assigned to fix a horrible CMS like web site written in ASP.NET web forms. One request was to implement respnsive layout using twitter bootstrap. I'm currently stuck with displaying sumernote wisywig component inside bootstrap modal. It does work, however I wish to make fullscreen mode available, or resize the modal based on content in the wisywig. The problem is that content is kinda squezed in the modal.

Here is my code.


<div class="EditHtml" id="EditHtml" visible="false" runat="server">
<a href="#" id="LinkButtonEditHtml" class="btn btn-lg btn-success" data-toggle="modal" data-target=<%= string.Format("'#{0}'", htmlEditorModal.ClientID ) %>>EditHtml</a>
</div>

<div id="htmlHolder" class="HtmlHolder" runat="server">
<asp:Literal ID="ItemContent" runat="server"></asp:Literal>
</div>

<div class="modal fade" id="htmlEditorModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit HTML</h4>
</div>
<div class="modal-body">
<textarea id="textBoxHtml" class="HTMLEditor" runat="server"></textarea>
</div>
<div class="modal-footer">
<asp:Button ID="Button1" CssClass="btn btn-primary" runat="server" Text="Spremi" OnClick="ButtonSpremi_Click" />
<input type="button" class="btn btn-default" data-dismiss="modal" value="Odustani" />
<asp:HiddenField ID="HiddenFieldModulId" runat="server" />
</div>
</div>
</div>
</div>


And here is jQuery used to fill summernote wisywig with content.

<script type="text/javascript">
$(document).ready(function () {
$( <%= string.Format("'#{0}'", textBoxHtml.ClientID) %>)
.html($( <%= string.Format("'#{0}'", htmlHolder.ClientID ) %>)
.html());
});
</script>

Modal and wisywig are operating with default css and get bugged when I press fullscreen mode in summernote... How could I make this a good user experience. Perhaps resize the modal based on content inside or something else ? I have also noticed problems when editing links or images ... modal gets stuck in the middle of the screen, and screen's vertical scroll disabled ...

Please help...

Thank you in advance...
Alem

Reply all
Reply to author
Forward
0 new messages