Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
IWModalWindow and templates
#1
Hi Alexandre,

I would like to show a bootstrap powered dialog template using TIWModalWindow. I can't get it positioned and sized correctly.
Attached a example showing the problem. DlgMsgBoxRegion.html contains the dialog I would like to show. TIWModalWindow may center it but it should let bootstrap handle size and resizing.

What to do?

PS: I forgot to turn off ClipRegion in the example but that doesn't make a big difference.


Attached Files
.zip   issue3151 - iwmodalwindow - 2.zip (Size: 29.96 KB / Downloads: 7)
Reply
#2
I'll check your project and get back to you ASAP

Cheers
Reply
#3
This issue is happening because your content element (DlgMsgBox region) doesn't have any size set (either in IW or in the template). You can fix this setting the size of the element in your template, example:

<div class="d-none">
{%DlgMsgBox style="width:600px; height:300px" %}
</div>

Of course you can also set the style in it's own class in a separate CSS file or included in the HTML, it is a personal preference...

It will work that way.
Reply
#4
(02-03-2023, 10:47 PM)Alexandre Machado Wrote: This issue is happening because your content element (DlgMsgBox region) doesn't have any size set (either in IW or in the template). You can fix this setting the size of the element in your template, example:

  <div class="d-none">
    {%DlgMsgBox style="width:600px; height:300px" %}
  </div>

Of course you can also set the style in it's own class in a separate CSS file or included in the HTML, it is a personal preference...

It will work that way.

Thanks for the suggestion but it is not exactly what I mean. When adding these style properties, bootstrap will not do it's resize magic.
The initial position and size on a desktop browser is ok but it also has to be ok on a handheld barcodescanner (small screen) and this is not the case.
The screen dimensions can be smaller and the user can turn the device from landscape to portrait.
The responsive nature of bootstrap makes sure the dialog is resized and in more complex situations the content can change based on the screen dimensions. By setting the width and height fixed, this is not the case.

This example is very basic to show the issue. The behaviour I am after is when opening DlgMsgBoxRegion.html in a browser. Resize the screen, turn it etc
Reply
#5
One work around is to use a native bootstrap modal dialog embedded in your page template, for example:

Code:
... 

  <div class="modal" id="mdCL" role="dialog">
    <div class="modal-dialog-centered modal-dialog-scrollable">
      <div class="modal-content mx-auto" style="width: 50%; max-width: 800px; min-width: 200px;">
        <div class="modal-header"><h4 class="modal-title">Chair Labels</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
        <div class="modal-body">
          <div class="row">
            <div class="form-group col-md-3">Date:{%edDate%}</div>
            <div class="form-group col-md-3">Time:{%edTime%}</div>
            <div class="form-group col-md-2">Chairs:{%edChairs%}</div>
            <div class="form-group col-md-2">Columns:{%edColumns%}</div>
            <div class="form-group col-md-2">Rows:{%edRows%}</div>
          </div>
        </div>
        <div class="modal-footer">{%btnPrint%}<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button></div>
      </div>
    </div>
  </div>
...

You can activate it using an async button click like this:

Code:
...
      WebApplication->CallBackResponse->AddJavaScriptToExecuteAsCDATA("$('#mdCL').modal('show');");
...

When displayed it will behave like this:

[Image: mdlg1.png]

or

[Image: mdlg2.png]

 depending on the screen size or orientation.
Reply
#6
I'll have a look what can be done in this case
Reply
#7
I could make it work with a minor modification in the IWModalWindow code, but it will require a new update. However, it won't be centered vertically within the body of the page because, in your template, that's not how it behaves.

I'll see if I can release it during this weekend.

Cheers,
Reply
#8
@Alexandre: That would be nice. The vertical centering (and horizontal) should be handled by the bootstrap template in my opinion in the case templates are involved.
No hurry. I am busy this and next week with other stuff.

@MSJ@msj.us: Thanks for the example. I use bootstrap modal dialogs already but then build with IWBS controls in Intraweb. The big drawback from that is building the form. Much better to use templates and all the online bootstrap form designers and examples on the net. I did in the past try to use a template with a bootstrap modal dialog in combination with IWModalWindow but that wasn't a success. At that time I didn't think about modal('show') myself. That would work.

Other reason to move away from IWBS and migrate to plain IW with templates is the use of RenderAsyncEnabled := True. I would like to implement the dialogs as a frame and create them at runtime when needed. This to prevent creating (and loading) a page with lots of invisible modals and div that only get used a few percent of the time the user interacts with page.
With IWBS I have this working.

And at the end find designers that do the layout and me for the rest of the work Wink
Reply
#9
>>This to prevent creating (and loading)
>>a page with lots of invisible modals
>>and div that only get used a few percent
>>of the time the user interacts with page.

Another way to do that is to use the 'OnBeforeProcess' event in the TIWTemplateProcessrHTML which gives you access to the template before it's applied to the page (it's called before each render).  In my case I insert bootstrap dialogs or add / remove other things to the template based on the need.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)