Hello Thierry,

I worked on the issue of resizing windows, modal or not, to enlarge them or even display them in full screen. Unless I'm wrong, wBSwidth no longer has any effect beyond 2.

Fortunately, since Bootstrap 4, there is a fullscreen class that works perfectly.

As a reminder, we can also rely on the relative units vw and vh (width and height of the current screen).

So I added two properties to my screen class, wlFullScreen and wZoom and put this code in wcHTMLgen():

IF VARTYPE (toHTMLgen) = "O"
   * WindowState = 2 unusable?
   WITH THIS
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");]))
         CASE .wlFullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");]))
         CASE .wZoom > 0
            * After FullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').css("max-width", "<<.wZoom>>%");]))
      ENDCASE
   ENDWITH
ENDIF

Finally, little effort for a very satisfactory result.

Another demonstration of all the power and all the clairvoyance of FiC ...

Hi Vincent,

thanks for sharing this great work

maybe sharing a screenshot of the same form with and without full screen could help understand the benefit

what about adding support for xxxFrm.wBSsize='FS' in FoxinCloud?

That would be a very good thing!

Do you think a zoom factor is of interest? It could also be included in this variable.

Otherwise, what would be really nice is to graphically reproduce the MaxButton in the title bar of the windows for a fullscreen on demand ...

I will publish as you suggest one or two examples of rendering of the screens thus zoomed.

Here are as promised some examples of screens after and before a full screen display.

It is all the more well managed by Bootstrap as my screen is a very wide 16/9!

Do you think a zoom factor is of interest?

Well, your implementation is more a width relative to the parent (form or viewport) than a zoom factor relative to the form itself.

Besides I prefer use Bootstrap classes than relying on CSS alteration that a future version may break.

Bootstrap offers classes setting relative width or height. That could be a way to go, albeit it only offers a limited set of dimensions (25%, 50%, 75%, 100%).

We stick to fullscreen then.

Do you plan to integrate it in an upcoming beta ?

Do you plan to integrate it in an upcoming beta?

Sure

Hi Vincent,

Implemented on FoxInCloud Live Tutorial : when the shift key is depressed while clicking a button, the child form is full-screen.

See also video on https://youtu.be/PJqCSaS5Lv4

Hi Thierry and Vincent,

Merci beaucoup..

Amicalement Gilles

Thanks Thierry.

How do you do it, because I don't see a modal-fullscreen class ?

Also, what about a square next to the cross in the title bar of the window ?

Hi Vincent

How do you do it, because I don't see a modal-fullscreen class ?

.wBSwidth changed dynamically:

define class ficFrm
…
procedure Load
…
this.AddProperty('wBSwidth_', this.wBSwidth)
wcPropSaveNotEdit(this, 'wBSwidth_')
…
procedure Init
if !m.this.wlInitFirst
  this.wBSwidth = Iif(this.wnShift > 0, 'fs', this.wBSwidth_)
endif

Also, what about a square next to the cross in the title bar of the window ?

Not sure what you mean.

Not sure what you mean

Add this to modal screen, like controlBox

Never saw that in Bootstrap…

Yes, I know, yet it's probably the most appropriate place, isn't it ?

Bootstrap may copy you 😉

Something like this:

Thierry,

I continued in the direction of my last messages, to allow on request a zoom of the screens (which is done for a video)

Not knowing where you are with fullscreen integration, I share the wcHTMLgen() code of my screens class:

What do you think ?

IF VARTYPE (toHTMLgen) = "O"
   WITH THIS
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");]))
         CASE .wlFullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");]))
         CASE .wZoom > 0
            * After FullScreen
            toHTMLgen.cScriptJSAdd(TEXTMERGE ([jQuery('#modal-<<.wcID>> > div').css("max-width", "<<.wZoom>>%");]))
         CASE .Width > 480
            * Agrandissement à la demande - MaxButton semble inutilisable
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               event = jQuery.event.fix(event);
               var srce = event.target, srceTag = srce.tagName.toLowerCase(), eventType = event.type;
               if (srceTag === 'option'
               || true
               && srceTag === 'select'
               && ['mouseenter','mouseover', 'mousemove', 'mouseleave','mouseout'].indexOf(eventType) > -1
               && event.relatedTarget
               && (event.relatedTarget === srce || event.relatedTarget.tagName.toLowerCase() === 'option')
               ) {event.stopPropagation(); event.preventDefault(); return;}
               if (false
               || event.eventPhase === 2
               || eventType === 'dragstart'
               || eventType.indexOf('key')===0
               || srceTag === 'select'
               || (eventType === 'click' || eventType.indexOf('mouse')===0) && ['label', 'span', 'a', 'i', 'b', 'strong', 'img', 'div'].indexOf(srceTag) > -1
               ) {
               event.stopPropagation();
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               }
               });
            ENDTEXT
            toHTMLgen.cScriptJSadd (m.cScript)
      ENDCASE
   ENDWITH
ENDIF

More precise (if the window title has already been overridden):

...
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }

Something like this (fullscreen toggle icon)…

I hate to say no, however in this case I could not even figure out how the cross in aligned right in the title bar… Adding another button would be too painful compared to the potential usage.

Hi Vincent,

The problem is which markup you use for your added button to make it sit to the left of the standard close button (cross).

I would rather use a class and define the CSS markup in xxx.css:

jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize tb-fs"></span>');

span.tb-fs {
 float: right;
 margin-top: 5px;
}

This block of code is useless in this case, you can remove it:

event = jQuery.event.fix(event);
               var srce = event.target, srceTag = srce.tagName.toLowerCase(), eventType = event.type;
               if (srceTag === 'option'
               || true
               && srceTag === 'select'
               && ['mouseenter','mouseover', 'mousemove', 'mouseleave','mouseout'].indexOf(eventType) > -1
               && event.relatedTarget
               && (event.relatedTarget === srce || event.relatedTarget.tagName.toLowerCase() === 'option')
               ) {event.stopPropagation(); event.preventDefault(); return;}
               if (false
               || event.eventPhase === 2
               || eventType === 'dragstart'
               || eventType.indexOf('key')===0
               || srceTag === 'select'
               || (eventType === 'click' || eventType.indexOf('mouse')===0) && ['label', 'span', 'a', 'i', 'b', 'strong', 'img', 'div'].indexOf(srceTag) > -1
               ) {
               event.stopPropagation();

Thank you Thierry,

I had completely forgotten that in my applications, the cross to close windows was always disabled ... 😦

But it works (I also removed the useless code block) !

I still have a problem filling the background color of the title (not obvious)

xxx.css

.modal-header .modal-title {
  background: #6E777E;
  margin: -1rem;
  padding: 1rem;
  color: #FFF;
  width: 110%;
}

It remains to process the grids, of which only the last column is automatically widened in fullscreen mode.

No pie ...

I still have a problem filling the background color of the title (not obvious)

Try moving the background directive up to the parent container…

// xxx.css

.modal-header {
  background: #6E777E;
}
.modal-header .modal-title {
/*background: #6E777E;*/
  margin: -1rem;
  padding: 1rem;
  color: #FFF;
  width: 110%;
}

Try moving the background directive up to the parent container…

Perfect, thanks.

I also modified:

  width: 110%;
to
  width: 100vw;

But, il you have the X to close, this value must be reduced

grids : only the last column is automatically widened in fullscreen mode

Very difficult to understand how ActiveWidget's .setColumnWidth(<width in px>, <column index>) method works; it creates some CSS directive like #aw36 .aw-column-1 {width: 112px;} but we don't know how to override it using regular CSS file.

Only re-executing .setColumnWidth(<width in px>, <column index>) when toggling to/from fullscreen should work reliably.

The problem is to know which px values you want to set.

Yes, I already spent quite a bit of time there when I recolored the grids ...

Resizing the columns should be possible, but in which method to catch the event, because I'm not sure that Resize() reacts ?

jQuery('#<<thisform.wcID>>_fs').click() / jQuery('.bootstrap .modal .tb-fs').click() is the only event you need.

You can implement several handlers on any event; handlers execute in the same order they were defined; return false in any event handler stops propagation to the subsequent handlers.

You can try this code:

procedure grd.wcHTMLgen && executes before xxxfrm.wcHTMLgen()
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
jQuery('#<<thisForm.wcID>>_fs').click(function(event){
  var oGrid = jQuery('#<<this.wcID>>').prop('oGrid')
  , fs = jQuery('#modal-<<thisForm.wcID>> > div').hasClass("modal-fullscreen"); // script generated by xxxfrm.wcHTMLgen() has executed before.
  oGrid.setColumnWidth(fs ? 999:99, 0); // adjust column width in px // ?: is equivalent to iif()
  oGrid.setColumnWidth(fs ? 999:99, 1); // adjust column width in px
  …
  oGrid.setColumnWidth(fs ? 999:99, n); // adjust column width in px
};
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript, .F.) && .F. appends script (add AFTER the rest)
…

procedure xxxfrm.wcHTMLgen
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
   jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
   jQuery('#<<.wcID>>_fs').click(function(event){
   if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
      jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
   } else {
      jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
   }
   });
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript, .T.) && .T. prepends script (add BEFORE the rest) so that it executes first

It's very interesting, thank you.

But the implementation is a big project, insofar as it would be necessary to do a selective resizing, distinguishing the small columns (not to be enlarged) and the larger ones...

Yes, you'd need to:

1. identify the resizable columns, ie use a custom grid column class (define class xxxGrc as awGrc and xxxGrd.memberClass = 'xxxGrc') with a custom property
2. store the jQuery('.Window_???_scx').width() with and without fullscreen
3. calculate column expansion based on window width variation

You can implement several handlers on any event ...

Thierry,

This opens up possibilities that I have difficulties to exploit. Two basic questions:

1. How to know the size of the current window, from VFP?
2. In jQuery, can we execute a form method ? For example, from the click on the "button" to enlarge the window, how to execute the code contained in Resize()?

Thanks in advance for your lights

You can implement this code :

procedure xxxfrm.wcHTMLgen
…
TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
   jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px"></span>');
   jQuery('#<<.wcID>>_fs').click(function(event){
    if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
      jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-restore").addClass("fa-window-maximize");
    } else {
      jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
      jQuery('#<<.wcID>>_caption > span').removeClass("fa-window-maximize").addClass("fa-window-restore");
    }
   FoxInCloud.MethExec.bind(FoxInCloud)(
    event /* {en} event or event source object {fr} événement ou son objet source */
  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
  , 'Resize' /* {en} method {fr} méthode */
  , jQuery('.Window_<<.wcID>>').width() /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
   );
   });
ENDTEXT
toHTMLgen.cScriptJSadd (m.cScript)
…

procedure xxxfrm.Resize
lparameters nBSformWidthPx && width of Bootstrap Modal
…

I get that:

- awajax.lSuccess(.f.): Erreur détectée à la ligne n° 14,451 de la méthode 'awajax.useraction'
"FoxInCloud n'a pas pu traiter cette requête :
Awajax.useraction() - Erreur dans l'exécution de la méthode 'nomclients_scx.Resize(m.this.uValue)' : L'événement .Resize() attend un objet dimensions au lieu de 2560
nomclients_scx.wUserAction_Post("nomclients_scx.Resize()", .F.) a retourné .F., l'action utilisateur est ignorée.
Paramètres reçus :
-	Valeur : 2560
-	Objet : Formulaire
  > Événement : aucun
  > Méthode : Resize
  > Propriété : aucun"
Call stack: 01 snotest (23) > 02 awserverstart (142) > 03 awstart (105) > 04 snotestserver.tmrfiletimer.timer (39) > 05 snotestserver.processhit (561) > 06 snotestserver.process (960) > 07 snotestserver.routerequest (979) > 08 snoprocess.process (2855) > 09 wwprocess.process (272) > 10 snoprocess.methexec (4845) > 11 snoprocess.ajaxformrequest (4856) > 12 awajax.formrequest (9623) > 13 awajax.useraction (14452)

Process ID: 17036
Client: 127.0.0.1
userID: 6F20W4X65_1
URL: http://localhost/snoTest/MethExec.sno?&MethAddr=Resize&ObjAddr=nomclients_scx&UserID=6F20W4X65&PageInit=&nReq=3&ValueType=number&Value=2560
Form variables:  nKeyCode=, nButton=1, nShiftAltCtrl=0, nXcoord=1798, nYcoord=-15, nRow=64, nCol=1814, ValueType=number, Value=2560, lastKey=0, version=3.0.1-beta.3, sync=false, vpw=2560, vph=927, userID=6F20W4X65, reqID=1703_6FD10Y915-001, nInet=0.000, nCli=0.010, tabID=1
FAS version: 3.0.1-beta.3 of 2022‑06‑29 02:00:00 PM GMT (il y a 3 mois)
Table New: '...\Temp\6F20W4X65_1\_6f20w4x65_1_nomclients_scx_New.DBF' can't be found

Will activating the Resize() method of the screen invoke the Resize() of other controls ?

   FoxInCloud.MethExec.bind(FoxInCloud)(
    event /* {en} event or event source object {fr} événement ou son objet source */
  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
  , 'Resize' /* {en} method {fr} méthode */
  , {width: jQuery('.Window_<<.wcID>>').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
   );
   });

Thank you Thierry

It works correctly. But Grid.Resize() doesn't seem to be called

Will activating the Resize() method of the screen invoke the Resize() of other controls ?

Yes, I missed this point, sorry.

Conversely to .Refresh() (which cascades down), .Resize() is an event, and as such fires only when any of the object’s dimension changes.

You can force grid.resize() to fire upon form.resize() by using grid.anchor.

You can force grid.resize() to fire upon form.resize() by using grid.anchor

Great !

I don't quite understand the operation of wViewPortWidth which I would like to use to dynamically adjust the size of the grids

.wViewPortWidth is the size of the browser view port (inside of the window tab), regardless of the size of the form it contains.

procedure xxxfrm.Resize
lparameters nBSformWidthPx && width of Bootstrap Modal
…

Thanks for the different answers. I thought it would be easier to retrieve the size of the enlarged window.

I implemented my screen class well with your code in Resize(), but nBSformWidthPx always returns me an empty value.

1. Why is the variable not initialized ?
2. Could we not, more simply, apply to the columns of the grid a width expressed in 99vw whose value can be easily calculated at launch ?

my bad… FoxInCloud stores the client form width in form.width; same for any class by the way.

Could we not, more simply, apply to the columns of the grid a width expressed in 99vw whose value can be easily calculated at launch?

fullscreen BS modal form width depends on the client browser window size…

Yes, but vw also no ?

Yes, but how to recover the real size of the screen then ?

Answered too quickly ...

In another method, e.g. Moved(), the code works and I recover the real size of the screen.

I tried adding Resize in Form.Moved(), but it doesn't trigger Grid.Resize

An idea ?

Yes, but vw also no ?

No idea what you think about; please provide details

Yes, but how to recover the real size of the screen then?

Depends on what you call 'screen'…:

• Browser view port: thisForm.wViewPortWidth
• BS modal form width (with this code on the client), for both normal and fullscreen: thisForm.width

Notes:

• FoxInCloud implements the .Resize event in 'classic' mode only (using a standard jQueryUI modal form event .resizeStop(), see the classic FoxinCloud Live Tutorial).
• As Bootstrap does not implement any kind of form resize event (not intended so), the solution I provided forces the .resize() event to execute using FoxInCloud.MethExec().
  As we provide the same parameter as if the event executed, form.width has the right value.
• If you also want the VFP grid to resize in proportion (and fire the grid.resize() event), you just need to implement .anchor in the container hierarchy from the form down to the grid.

Yes, but vw also no ?

I was talking about CSS relative units vh (not me 😉) and vw

BS modal form width (with this code on the client), for both normal and fullscreen: thisForm.width

I always get 615, even after fullscreen

Synthesis test:

1. Grid. Anchor = 15
2. Grid.Resize()

IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
   RETURN .T.
ENDIF
DO AjusteGrid IN \VHDev\Program\Resizecr WITH THISFORM, THIS

3. Form.wcHTMLgen()

...
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
					FoxInCloud.MethExec.bind(FoxInCloud)(
				      event /* {en} event or event source object {fr} événement ou son objet source */
					   , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
					   , 'Moved' /* {en} method {fr} méthode */
					   , jQuery('#modal-<<.wcID>> > div').width() /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
					   );
               });
            ENDTEXT
            toHTMLgen.cScriptJSadd (m.cScript, .T.) && .T. prepends script (add BEFORE the rest) so that it executes first
...

4. Form.Moved()

LPARAMETERS nBSformWidthPx   && width of Bootstrap Modal
IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
   RETURN .T.
ENDIF
WITH THISFORM
   .wZoom = nBSformWidthPx   && for me in AjusteGrid()
   IF VARTYPE (.Grid) = Cobjet   && Weakness of the method :-(
      .Grid.Resize
   ENDIF
ENDWITH

It works correctly (with a small delay effect as always with grids), but I have to trigger the resizing of the grid, in Moved(), by its name, which is of course not satisfactory

I always get 615, even after fullscreen

Your event handlers probably do not execute in the right order; please review the handler implementation earlier in this thread.

Not so sure ...

Expand on demand now works correctly ...

Except in production or when I dynamically change the title of the window where the added code (in the title bar) is erased

Code in Activate(), not in wcHTMLgen(), and it works

But in production, refresh problem with cSupportLinkHTML_JS()

Thierry,

I put the resizing code back in wcHTMLgen() and declared SupportLinkInFormCaption = Off

Form.width is indeed updated during Resize(), but after resizing the grid. Logical but not usable in my case.

Help please, thank you !

Hi Vincent,

I need details to help, same as usual:

• Screenshot, or better screencast of what you get,
• JS code involved in the process: what .wcHTMLgen() generates and what you get in screen_scx.js

TIA,

Alright, let me take it in order:

1. wcHTMLgen() in my screen class:

IF VARTYPE (toHTMLgen) = Cobjet
   WITH THISFORM
      LOCAL cScript
      DO CASE
         CASE .wlFullScreen .AND. .ShowWindow < 2
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-restore" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               FoxInCloud.MethExec.bind(FoxInCloud)(
                  event /* {en} event or event source object {fr} événement ou son objet source */
                  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
                  , 'Resize' /* {en} method {fr} méthode */
				  , {width: jQuery('.Window_<<.wcID>> > div').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
                  );
               });
            ENDTEXT
         CASE .wlFullScreen
            cScript = TEXTMERGE ([jQuery('#<<.wcID>>_body > div').addClass("modal-fullscreen");])
         CASE .Width > 480 .AND. .TitleBar = 1
            * Agrandissement à la demande - MaxButton semble inutilisable
            TEXT TO cScript TEXTMERGE NOSHOW FLAGS 1 PRETEXT 3
               jQuery('#<<.wcID>>_caption').append('<span id="<<.wcID>>_fs" class="fa fa-window-maximize" style="float: right;margin-top: 5px;color: darkgray" title="Agandir/Réduire"></span>');
               jQuery('#<<.wcID>>_fs').on('click', function(event){
               if (jQuery('#modal-<<.wcID>> > div').hasClass("modal-fullscreen") == true) {
                  jQuery('#modal-<<.wcID>> > div').removeClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-restore").addClass("fa-window-maximize");
               } else {
                  jQuery('#modal-<<.wcID>> > div').addClass("modal-fullscreen");
                  jQuery('#<<.wcID>>_fs').removeClass("fa-window-maximize").addClass("fa-window-restore");
               }
               FoxInCloud.MethExec.bind(FoxInCloud)(
                  event /* {en} event or event source object {fr} événement ou son objet source */
                  , '<<.wcID>>' /* {en} id of HTML object matching VFP object holding the method {fr} id HTML de l'objet VFP détenant la méthode */
                  , 'Resize' /* {en} method {fr} méthode */
				  , {width: jQuery('.Window_<<.wcID>> > div').width(), height: null} /* {en} Value to be passed as method parameter - undefined for none {fr} Valeur à passer en paramètre à la méthode - undefined n'en passe aucun */
                  );
               });
            ENDTEXT
      ENDCASE
      IF .NOT. EMPTY (m.cScript)
         toHTMLgen.cScriptJSadd (m.cScript)
      ENDIF
   ENDWITH
ENDIF```
2. Grid. Anchor = 15
3. Grid.Resize() resizes columns by applying form.width / 615 ratio

When I maximize my screen, Resize() cascades but when grid.resize() form.width is not yet implemented

I would need to be able to retrieve the screen size before the grid is resized

I understand now, thanks for the details

Looks like a VFP behavior… FoxinCloud just executes this code: m.loCntl.Width = m.luValue.Width, VFP handles the cascade and decides when form.width is actually updated.

By implementing .wUserAction_Ante(), you can catch m.luValue.Width and store it into some custom form.property:

procedure xxxFrm.load
…
this.addProperty('WidthInet', .null.)
wcPropSaveNotEdit(this, 'WidthInet')
…
procedure xxxFrm.wUserAction_Ante
lparameters tcAppHandler, tlPropAssign, luValue
…
this.WidthInet = iif(if vartype(m.luValue) == 'O' and type('m.luValue.width') == 'N' and m.luValue.width > 0;
  , m.luValue.width;
  , .null.;
  )
endif
…
procedure xxxGrd.Resize
…
formWidth = nvl(thisForm.WidthInet, thisForm.Width)
…

Simply outstanding, thank you !

I still have a problem, related to refreshing the window title, either from my code, or because of cSupportLinkHTML_JS()

What I add in Form.wcHTMLgen() is deleted

I made it !

Take the added expression out of the "h5" tag and insert a "z-index", like this:

...
jQuery('#modal-<<.wcID>> .modal-header:first').append('<span id="<<.wcID>>_fs" class="fa fa-window-restore" style="float: right;color: darkgray;z-index: 5;" title="Agandir/Réduire"></span>');
...

A clarification and a question:

1. The Anchor property of the grids must be activated, but also the enclosing ones like PageFrame or Container
2. After resizing the window, width and ViewPortWidth are updated. Where to find its original size ?

Congratulations!

You could use the markup of the standard close cross: <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" aria-hidden="true"></button>

The Anchor property of the grids must be activated, but also the enclosing ones like PageFrame or Container

Yes, like indicated in my earlier post

After resizing the window, width and ViewPortWidth are updated. Where to find its original size ?

VFP does not keep these previous values; you can store them in thisForm.wUserAction_Ante()

Procedure xxxFrm.load
…
this.addProperty('Width_', .null.)
this.addProperty('ViewPortWidth_', .null.)
wcPropSaveNotEdit(this, 'Width_, ViewPortWidth_')
…

Procedure xxxFrm.wUserAction_Ante
lparameters tcAppHandler, tlPropAssign, luValue
…
local lWidth
lWidth = vartype(m.luValue) == 'O' and type('m.luValue.width') == 'N' and m.luValue.width > 0
this.WidthInet = iif(m.lWidth, m.luValue.width, .null.)
this.Width_ = iif(m.lWidth, this.width, .null.)
this.ViewPortWidth_ = iif(m.lWidth, this.ViewPortWidth, .null.)
…

Thanks Thierry, I complete my code 😃

I store the screen size directly in Width_ like this: THIS.AddProperty ('Width_', THIS.Width)