FoxInCloud
Button group alignment
Gravatar is a globally recognized avatar based on your email address. Button group alignment
  Vincent H.
  All
  Oct 1, 2022 @ 12:06am

Hi Thierry,

Button groups no longer align according to property of wBScolAlign

In the attached example, this property is "R" for the [Valider] and [Annuler] buttons

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  FoxInCloud Support - Thierry N.
  Vincent H.
  Oct 2, 2022 @ 03:23am

Hi Vincent,

Can you reproduce in every similar case?

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  FoxInCloud Support - Thierry N.
  Oct 2, 2022 @ 08:28am

Difficult, I'll try to sort it out and get back to you

However, it seems to me that the behavior of the buttons is different when one of them is a class

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  FoxInCloud Support - Thierry N.
  Oct 2, 2022 @ 10:03am

Can you remind us of the principle please ?

If one of the buttons has an alignment directive, the group follows this directive or for a left alignment you have to mark the left button and the same on the right ?

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  Vincent H.
  Oct 3, 2022 @ 02:09am

However, it seems to me that the behavior of the buttons is different when one of them is a class

For example, in this screen [Fermer] is a class with a wBScolAlign = "R" that does not appear

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  Vincent H.
  Oct 3, 2022 @ 02:29am

When the button is a class, the container must contain:

margin-left: auto

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  FoxInCloud Support - Thierry N.
  Vincent H.
  Oct 4, 2022 @ 02:10am

Hi Vincent,

Thanks for these details

I understand that, based on the VFP buttons width, FoxInCloud has assigned a .col-lg-2 class, obviously too tight for the buttons rendered in Bootstrap.

You can confirm this in the browser dev tools by changing in the class attribute:

  1. offset-lg-5 to offset-lg-4
  2. col-lg-2 to col-lg-3

To make FoxInCloud assign these classes, you can just make your VFP buttons larger, either at design time or in .Init().

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  FoxInCloud Support - Thierry N.
  Oct 4, 2022 @ 07:29am

OK, thank you Thierry

There remains the wBScolAlign which is not interpreted when the button is a class

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  FoxInCloud Support - Thierry N.
  Vincent H.
  Oct 5, 2022 @ 01:41am

Hi Vincent,

All controls are based on a class, FoxIncloud makes no difference on that.

On the various screenshots you provide, I see some buttons aligned right OK, some not; so it happens only in some cases; we need to find out which ones and why.

On the listparties.scx screenshot you shared, I see the buttons are not wrapped in a Bootstrap column (<div … class="col-xx-99…"…>), reason why valider and annuler are stacked under ajout clients.

I'll try to reproduce based one your source code you shared privately.

Please try to identify all the forms where this happens.

TIA

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  FoxInCloud Support - Thierry N.
  Vincent H.
  Oct 5, 2022 @ 02:58am

Hi Vincent,

Can't reproduce with the code you shared… because of this error when running snoTest.prg:

Application could not start: "Method or procedure menuappli(): error #12 ("Variable 'INFOSMAJ' is not found") at code line #75 ("IF FDATE (Mchemin + "Fichiers\Infos_MAJ.Html", 1) > InfosMaj")"

TIA

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  FoxInCloud Support - Thierry N.
  Oct 5, 2022 @ 05:44am

OK Thierry, I synchronize ...

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  FoxInCloud Support - Thierry N.
  Vincent H.
  Oct 6, 2022 @ 01:42am

Hi Vincent,

I had to do this change to start the server :

modify command c:\…\menuappli.prg
&& replace
IF FDATE (Mchemin + "Fichiers\Infos_MAJ.Html", 1) > InfosMaj
&& by
IF !lDevMode() and FDATE (Mchemin + "Fichiers\Infos_MAJ.Html", 1) > InfosMaj

I think checking the data structure is useful in production mode only.

do c:\…\snotest.prg with "listeparties.scx" yields the following errors :

"Error:         94
   Message: Must specify additional parameters.
      Code: LPARAMETERS oForm, oGrid, formWidth
   Program: ajustegrid
   Line No:        161"
"Error:       1734
   Message: Property WZOOM is not found.
      Code: * oForm.Width_ correspond à la taille d'origine (vhecr.vcx)
   Program: ajustegrid
   Line No:        165"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:         94
   Message: Must specify additional parameters.
      Code: LPARAMETERS oForm, oGrid, formWidth
   Program: ajustegrid
   Line No:        161"
"Error:       1734
   Message: Property WZOOM is not found.
      Code: * oForm.Width_ correspond à la taille d'origine (vhecr.vcx)
   Program: ajustegrid
   Line No:        165"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:         94
   Message: Must specify additional parameters.
      Code: LPARAMETERS oForm, oGrid, formWidth
   Program: ajustegrid
   Line No:        161"
"Error:       1734
   Message: Property WZOOM is not found.
      Code: * oForm.Width_ correspond à la taille d'origine (vhecr.vcx)
   Program: ajustegrid
   Line No:        165"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:         94
   Message: Must specify additional parameters.
      Code: LPARAMETERS oForm, oGrid, formWidth
   Program: ajustegrid
   Line No:        161"
"Error:       1734
   Message: Property WZOOM is not found.
      Code: * oForm.Width_ correspond à la taille d'origine (vhecr.vcx)
   Program: ajustegrid
   Line No:        165"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"
"Error:        107
   Message: Operator/operand type mismatch.
      Code: FOR EACH oGrc IN .Columns FOXOBJECT
   Program: ajustegrid
   Line No:        170"

Does not affect HTML generation, however could be useful to fix.

This layout falls into a caveat of the Bootstrap HTML generator.

I think I know why it happens, however it was one of the difficult situation the algorithm has to face… unsure we can fix it definitely.

Fortunately I could easily fix by wrapping all controls below the grid into a container:

<!-- Generated on 06/10/2022 10:32:05 in 0,84 sec. by FAS version 3.0.1-beta.4 of 31/07/2022 16:42:02 /-->
<div id="listeparties_scx" class="listeparties_scx form bootstrap" style="position:relative;">
	<span id="listeparties_scx-waitpic" class="fa fa-2x fa-spinner fa-pulse" aria-hidden="true" style="position:absolute;display:none;"></span>
	<div id="listeparties_scx-grid" class="listeparties_scx-grid needsclick bootstrap mb-3" title="Double clic pour valider votre choix">
	</div>
	<div id="listeparties_scx-vhccnt1" class="listeparties_scx-vhccnt1 position-relative">
		<div class="mb-3">
			<div class="form-check" id="listeparties_scx-vhccnt1-check1_div"><input type="checkbox" id="listeparties_scx-vhccnt1-check1" class="listeparties_scx-vhccnt1-check1 standard form-check-input" tabindex="3" accesskey="T" size="2" autocomplete="off"><label for="listeparties_scx-vhccnt1-check1" id="listeparties_scx-vhccnt1-check1_lbl" class="listeparties_scx-vhccnt1-check1 standard ChkOptLabel form-check-label" accesskey="T">Tous / Aucun</label></div>
		</div>
		<div class="row row-abandon1">
			<div class="col col-valider1 col-12 col-sm-5 col-md-4 col-lg-3 col-xl-2 text-start">
				<button type="button" id="listeparties_scx-vhccnt1-valider1" class="listeparties_scx-vhccnt1-valider1 doo-valider btn-outline-secondary btn" tabindex="4" accesskey="V"><span class="fa fa-check text-success fa-lg" aria-hidden="true"></span> Valider</button>
			</div>
			<div class="col col-ajoutclient1 col-12 col-sm-6 col-md-4 offset-lg-2 col-lg-3 offset-xl-3 text-center">
				<button type="button" id="listeparties_scx-vhccnt1-ajoutclient1" class="listeparties_scx-vhccnt1-ajoutclient1 btn-outline-secondary btn" tabindex="5"><span class="fa fa-user-plus text-primary" aria-hidden="true"></span> Ajout client</button>
			</div>
			<div class="col col-abandon1 col-12 col-md-4 offset-lg-1 col-lg-3 offset-xl-2 col-xl-2 text-end">
				<button type="button" id="listeparties_scx-vhccnt1-abandon1" class="listeparties_scx-vhccnt1-abandon1 floatRight btn-outline-secondary btn" tabindex="6" accesskey="A"><span class="fa fa-ban text-danger fa-lg" aria-hidden="true"></span> Annuler</button>
			</div>
		</div>
	</div>
</div>
<!--/ Generated on 06/10/2022 10:32:05 in 0,84 sec. by FAS version 3.0.1-beta.4 of 31/07/2022 16:42:02 -->

Now buttons are wrapped into Bootstrap <div … class="col-xx-99…"…> columns.

Here is the modified VFP form source code (listeParties.sc2)

*--------------------------------------------------------------------------------------------------------------------------------------------------------
* (ES) AUTOGENERADO - ¡¡ATENCIÓN!! - ¡¡NO PENSADO PARA EJECUTAR!! USAR SOLAMENTE PARA INTEGRAR CAMBIOS Y ALMACENAR CON HERRAMIENTAS SCM!!
* (EN) AUTOGENERATED - ATTENTION!! - NOT INTENDED FOR EXECUTION!! USE ONLY FOR MERGING CHANGES AND STORING WITH SCM TOOLS!!
*--------------------------------------------------------------------------------------------------------------------------------------------------------
*< FOXBIN2PRG: Version="1.19" SourceFile="listeparties.scx" /> (Solo para binarios VFP 9 / Only for VFP 9 binaries)
*
*
#INCLUDE "..\..\..\fichiers\constant.h"

DEFINE CLASS dataenvironment AS dataenvironment 
 	*< CLASSDATA: Baseclass="dataenvironment" Timestamp="" Scale="" Uniqueid="" ClassIcon="1" />

	DataSource = .NULL.
	Height = 200
	Left = 1
	Name = "Dataenvironment"
	Top = 220
	Width = 520

ENDDEFINE

DEFINE CLASS listeparties AS vhecr OF "..\..\..\classes\vhecr.vcx" 
 	*< CLASSDATA: Baseclass="form" Timestamp="" Scale="" Uniqueid="" />

	*-- OBJECTDATA items order determines ZOrder / El orden de los items OBJECTDATA determina el ZOrder 
	*< OBJECTDATA: ObjPath="Grid" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Grid.Column1.Header1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Grid.Column1.Text1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Grid.Column1.CHECK1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Grid.Column2.Header1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Grid.Column2.Text1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Vhccnt1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Vhccnt1.Check1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Vhccnt1.Valider1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Vhccnt1.Ajoutclient1" UniqueID="" Timestamp="" />
	*< OBJECTDATA: ObjPath="Vhccnt1.Abandon1" UniqueID="" Timestamp="" />

	Caption = "Parties liées au dossier"
	DoCreate = .T.
	Name = "ListeParties"
	waitpic.Height = 20
	waitpic.Name = "waitpic"
	waitpic.Width = 20
	waitpic.ZOrderSet = 0

	ADD OBJECT 'Grid' AS gridlist WITH ;
		ColumnCount = 2, ;
		Height = 247, ;
		Left = 15, ;
		Name = "Grid", ;
		Panel = 1, ;
		RecordSource = "CParties", ;
		RowHeight = 20, ;
		TabIndex = 1, ;
		Top = 5, ;
		wcolsresize = 1.5, ;
		Width = 590, ;
		ZOrderSet = 1, ;
		Column1.Alignment = 2, ;
		Column1.ControlSource = "CParties.Selection", ;
		Column1.CurrentControl = "CHECK1", ;
		Column1.Name = "Column1", ;
		Column1.Sparse = .F., ;
		Column1.Width = 14, ;
		Column2.ControlSource = "CParties.Idinfos", ;
		Column2.Name = "Column2", ;
		Column2.ReadOnly = .T., ;
		Column2.Width = 542
		*< END OBJECT: ClassLib="..\..\..\classes\gridlist.vcx" BaseClass="grid" />

	ADD OBJECT 'Grid.Column1.CHECK1' AS vhcchk WITH ;
		Alignment = 0, ;
		Caption = "", ;
		Centered = .T., ;
		Name = "CHECK1"
		*< END OBJECT: ClassLib="..\..\..\classes\vhc.vcx" BaseClass="checkbox" />

	ADD OBJECT 'Grid.Column1.Header1' AS header WITH ;
		Caption = "", ;
		Name = "Header1"
		*< END OBJECT: BaseClass="header" />

	ADD OBJECT 'Grid.Column1.Text1' AS vhctxt WITH ;
		BackColor = 255,255,255, ;
		BorderStyle = 0, ;
		ForeColor = 0,0,0, ;
		Margin = 0, ;
		Name = "Text1"
		*< END OBJECT: ClassLib="..\..\..\classes\vhc.vcx" BaseClass="textbox" />

	ADD OBJECT 'Grid.Column2.Header1' AS header WITH ;
		Alignment = 2, ;
		Caption = "Identification des parties", ;
		FontSize = 10, ;
		Name = "Header1"
		*< END OBJECT: BaseClass="header" />

	ADD OBJECT 'Grid.Column2.Text1' AS vhctxt WITH ;
		BorderStyle = 0, ;
		Margin = 0, ;
		Name = "Text1", ;
		ReadOnly = .T.
		*< END OBJECT: ClassLib="..\..\..\classes\vhc.vcx" BaseClass="textbox" />

	ADD OBJECT 'Vhccnt1' AS vhccnt WITH ;
		BackStyle = 0, ;
		Height = 61, ;
		Left = 15, ;
		Name = "Vhccnt1", ;
		Top = 260, ;
		Width = 590
		*< END OBJECT: ClassLib="..\..\..\classes\vhc.vcx" BaseClass="container" />

	ADD OBJECT 'Vhccnt1.Abandon1' AS abandon WITH ;
		Height = 27, ;
		Left = 490, ;
		Name = "Abandon1", ;
		TabIndex = 5, ;
		Top = 30, ;
		ZOrderSet = 5
		*< END OBJECT: ClassLib="..\..\..\classes\abandon.vcx" BaseClass="commandbutton" />

	ADD OBJECT 'Vhccnt1.Ajoutclient1' AS ajoutclient WITH ;
		Left = 235, ;
		Name = "Ajoutclient1", ;
		TabIndex = 4, ;
		Top = 30, ;
		wbscolalign = C, ;
		ZOrderSet = 4
		*< END OBJECT: ClassLib="..\..\clients\ajoutclient.vcx" BaseClass="commandbutton" />

	ADD OBJECT 'Vhccnt1.Check1' AS vhcchk WITH ;
		Alignment = 0, ;
		Caption = "\<Tous / Aucun", ;
		Height = 17, ;
		Left = 6, ;
		Name = "Check1", ;
		TabIndex = 2, ;
		Top = 5, ;
		Value = .F., ;
		wbscolalign = C, ;
		Width = 89, ;
		ZOrderSet = 2
		*< END OBJECT: ClassLib="..\..\..\classes\vhc.vcx" BaseClass="checkbox" />

	ADD OBJECT 'Vhccnt1.Valider1' AS valider WITH ;
		Left = 5, ;
		Name = "Valider1", ;
		TabIndex = 3, ;
		Top = 31, ;
		ZOrderSet = 3
		*< END OBJECT: ClassLib="..\..\..\classes\valider.vcx" BaseClass="commandbutton" />
	
	PROCEDURE Init
		LPARAMETERS callBackMethod
		WITH THISFORM
		   IF .wlLAN .OR. .wlInitFirst
		      DODEFAULT()
		   ENDIF
		   IF .wlInitFirst
		      RETURN
		   ENDIF
		   .Grid.RecordSource = Vierge
		   eCard (A.Insert, .F., .F., .F., .T.)
		   .Grid.RecordSource = "CParties"
		ENDWITH
		DODEFAULT (m.callBackMethod)
	ENDPROC

	PROCEDURE Load
		lParameters reminder_in_your_subclass_call_DoDefault_after_opening_all_views_and_cursorAdapters && {en} see sample impl. in awFrm code {fr} voir exemples impl. dans code de awFrm
		DO CreateCparties IN \VHDev\Appli\Dossiers\Gesdoss
		RETURN DODEFAULT()
	ENDPROC

	PROCEDURE Vhccnt1.Ajoutclient1.Init
		THIS.Left = THIS.Left + 20
		RETURN DODEFAULT()
	ENDPROC

	PROCEDURE Vhccnt1.Check1.InteractiveChange
		LPARAMETERS Useless_Parm && Documentation d'implémentation : voir le code hérité de aw.vcx!aw???.Interactivechange() (cliquez 'Voir le code parent')
		IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
		   RETURN .T.
		ENDIF
		REPLACE ALL Selection WITH THIS.Value IN CParties
		THISFORM.Refresh
	ENDPROC

	PROCEDURE Vhccnt1.Valider1.Click
		LPARAMETERS nButton, nShift, nXcoord, nYcoord && Documentation d'implémentation : voir le code hérité de aw.vcx!aw???.Click() (cliquez 'Voir le code parent')
		IF (Type('m.thisForm.wlHTMLgen') == 'L' AND m.thisForm.wlHTMLgen)
		   RETURN .T.
		ENDIF
		DO AfterRel IN \VHDev\Program\Init
		DODEFAULT()
	ENDPROC

ENDDEFINE

Gravatar is a globally recognized avatar based on your email address. re: Button group alignment
  Vincent H.
  FoxInCloud Support - Thierry N.
  Oct 6, 2022 @ 03:43am

Thank you Thierry, I think it's time to switch to private support. I will contact you by e-mail to arrange a date.

© 1996-2024