[CLOSED] MessageBox doesn't show

  1. #1

    [CLOSED] MessageBox doesn't show

    Please take a look at this.
    View Index.cshtml:
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    @Html.X().ResourceManager()
    
    @(
        Html.X().Panel().Loader(Html.X().ComponentLoader().Url(Url.Action("RenderDocument")).LoadMask(lm => lm.ShowMask = true)).Height(500)
        .TopBar
        (
            Html.X().Toolbar()
            .Items
            (
                Html.X().Button().Icon(Icon.CommentAdd).ToolTip("Add comment").OnClientClick("Ext.MessageBox.show({title: 'Comment', msg: 'Text:',width: 300,buttons: Ext.MessageBox.OKCANCEL,multiline: true});")
            )
        )
    )
    View ContentView.cshtml
    @model string
    
    <iframe src="@Model" width="100%" height="100%" />
    Controler:
    public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult RenderDocument(string objectId)
            {
                return PartialView("ContentView", "/Test.pdf");
            }
    On button click MessageBox does not show in IE, but page gets grayed as if it is shown. If You put anything else except pdf, it works.
    Remark:
    For PDF viewer I am using Adobe Plugin. I saw some threads and tried some things, but I could not resolve this problem.
    Last edited by Daniil; Jan 20, 2016 at 11:35 AM. Reason: [CLOSED]
  2. #2
    Hi @ingbabic,

    I am afraid there is no solution. At least, as far as I can know. IE puts a pdf (internally, it is an ActiveX object) on top of all and we cannot affect it. Seems there are some helpful tricks (StackOverflow thread), but I am not aware of any solid solution.
  3. #3
    I'm sorry to hear that. Anyway thanks.
  4. #4
    Daniil
    Combining samples that you proposed and some more I've come to this solution:
    ContentView.cshtml
    @model string
    
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
    
            #content {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0px;
            }
            #divElement{
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
                width: 310px;
                height: 190px;
                background-color: transparent;
                z-index:20;
            }
        </style>
    </head>
    <body>
        <div id="divElement">
            <iframe id="Iframe1" frameborder="0" height="100%" width="100%"></iframe>
        </div>
    
        <div style="position:absolute;z-index:10" id="content">
            <iframe height="100%" width="100%" frameborder="0" src="@Model" />
        </div>
    </body>
    Index.cshtml:
    @{
        var X = Html.X();
    }
    
    <script type="text/javascript">
    
        function hideElement(hide) {
    
            var elem = document.getElementById("Iframe1");
    
            if (!hide){
                elem.style.display="block"
            }
            else{
                elem.style.display="none"
            }
        }
    
        function addComment(btn, text) {
            hideElement(true);
        };
    </script>
    
    @(
        X.Panel().Loader(X.ComponentLoader().Url(Url.Action("RenderDocument")).LoadMask(lm => lm.ShowMask = true))
        .TopBar
        (
            X.Toolbar()
            .Items
            (
                X.Button().Icon(Icon.CommentAdd).ToolTip("Add comment").OnClientClick("hideElement(false);var msg = Ext.MessageBox.show({title: 'Comment', msg: 'Text:',width: 300,buttons: Ext.MessageBox.OKCANCEL,multiline: true,fn: addComment}); msg.alignTo(Ext.get('Iframe1'), 'c-c');")
            )
        )
    )
    Two bad things about this. I don't know how to hide IFrame1 initially (I've tried many things)
    Second, is it somehow possible to have IFrame1 "stretchable" that I can have about anything inside?
  5. #5
    I don't know how to hide IFrame1 initially (I've tried many things)
    Please clarify doesn't that help?
    <iframe id="Iframe1" ... style="display:none;"></iframe>
    Second, is it somehow possible to have IFrame1 "stretchable" that I can have about anything inside?
    I am not sure that I get how you use Iframe1 in the sample. Could you, please, clarify what is it for and what content it is going to hold?

    Though, I don't really know there is anything else except height="100%" and width="100%" which, probably, don't produce a desired result for you.

    Maybe, there is a possibility to determine the size on the iframe's content on the fly via JavaScript and then adjust the iframe's size also programmatically. But again, I am not sure about your scenario.
  6. #6
    Please clarify doesn't that help?
    <iframe id="Iframe1" ... style="display:none;"></iframe>
    Ah silly me :) I was trying on many ways to call hideElement function, on the beginning but none of them was ok. I even have set div that contains frame invisible but that brought very strange result :) Any way this was the right way thanks.

    I am not sure that I get how you use Iframe1 in the sample. Could you, please, clarify what is it for and what content it is going to hold?
    Well this thread is about how to bring something over PDF viewer in Internet explorer. With this trick it is possible. The only purpose of this IFrame is to float over PDF. And it's doing its job quite well. In this sample it is holding Ext.MessageBox. Only I don't know how to dynamically change size of this frame because for example instead of message box I would open Window. If I stretch size of a div 100% then I wouldn't see my pdf at all. Even in this sample frame is not 100% the same size as message box (I know that with try'n'error approach I could make it but then again it is only for this sample). Please try this sample, you'll see (you just need one sample pdf in your project dir). The right code for ContentView.cshtml is
    @model string
    
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
    
            #content {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0px;
            }
            #divElement{
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
                width: 310px;
                height: 190px;
                background-color: transparent;
                z-index:20;
            }
        </style>
    </head>
    <body>
        <div id="divElement">
            <iframe id="Iframe1" frameborder="0" height="100%" width="100%"style="display:none;"></iframe>
        </div>
    
        <div style="position:absolute;z-index:10" id="content">
            <iframe height="100%" width="100%" frameborder="0" src="@Model" />
        </div>
    </body>
  7. #7
    Only I don't know how to dynamically change size of this frame
    This should be working:
    Ext.get("Iframe1").setSize(400 /* width */, 400 /* height */);
  8. #8
    This works. For the sake of completeness I'll post how it is working for any window I want to put over pdf:
        function prepareForm(window) {
            if (Ext.isIE) {
                hideElement(false);
                Ext.get('Iframe1').setSize(window.getSize().width, window.getSize().height);
                Ext.get('Iframe1').setLocation(window.getPosition()[0], window.getPosition[1]);
                window.alignTo(Ext.get('Iframe1'), 'c-c');
            }
        }
    This method must be called in AfterLayout listener with some delay. On closing of window one must call
    hideElement(true);
    to hide frame floating over PDF.
    There are more to this, for example how to make this frame draggable, together with the window it holds, but for now I am satisfied.
    Thanks. Please take a look at http://forums.ext.net/showthread.php...822#post276822
  9. #9
    This post may be the solution to have PDF support cross-browser, cross-os, not dependent on plugins and able to be nicely fit in a panel/window/container.

    In other words, rendering the PDF with a JavaScript library.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 13
    Last Post: Feb 05, 2014, 2:59 AM
  2. Replies: 5
    Last Post: Jun 06, 2013, 5:41 AM
  3. EventMask doesn't show
    By vadym.f in forum 1.x Help
    Replies: 3
    Last Post: Jan 19, 2012, 5:19 PM
  4. StatusBarStatusConfig doesn't show icon
    By apre in forum 1.x Help
    Replies: 2
    Last Post: Oct 22, 2009, 9:15 AM
  5. MessageBox does't show till after method
    By jarremw in forum 1.x Help
    Replies: 3
    Last Post: Jun 23, 2009, 4:08 AM

Tags for this Thread

Posting Permissions