TScrollbox does not show scrollbars when scrollbox is a container element of a new large created form.

Mario_P_Frigerio · March 8, 2022, 7:05am

TScrollbox does not show scrollbars when the scroll box is an element container for a newly created form that is sized beyond the dimensions of the scrollbox.
In fact, in examples TWebPanel is always used as a container, however, this element does not have scrollbars for when we have many elements/fields in a form.
Even the sources automatically generated through the TMS XData Web Application, when there is a greater amount of fields to be edited, it is not possible to access them because there is not a scrollbar in webpanel (container).

Maybe go through the list of elements of the newly created form and transfer each them to the ScrollBox ?

Any suggestions on how to access only the elements of a specific form?

Any suggestions for having/wakeup a scrollbar from Scrollbox ?
Thank you !

brunofierens · March 9, 2022, 9:01pm

I suspect this is simply because the form takes the size of the container. The container so to speak becomes with element that is the form.
If you need a scrollbar, I would suggest to add a TWebPanel to a scrollbox, set the webpanel to the desired size of the form and make the webpanel the container for the form.

Mario_P_Frigerio · March 14, 2022, 11:14pm

Perfect Bruno!
It works !
I tried your suggestion using the TMS demo: TMSWeb_Formhosting.dpr

I dragged in a new twebscrollbox that embedded the old existing webpanel, which will then host the dynamically created form and the scrollbar worked perfectly.

A more complex usage however didn't work, specifically using tms web application generator (CRUD), when we have multiple entity fields (Aurelius) that cannot be displayed completely in a visible container.

I used the same suggested strategy, but the scrollbar is not present, or if so without effect.

Looking at the html structure via the browser, there is a cascade of CSS commands that disable the scrollbar (overflow: hidden; overflow-y: hidden and so on), at several layers of divs.

The TMS Web Core Application generator is a fantastic tool, if it were possible to adjust this, it would be extremely useful.

I'm no html/css expert, but I've spent many days trying to tweak it without success.

Again, any suggestions to work around this situation in TMS Application Generator CRUD with too many database fields to edit and no scroll bar?

Thank you !!!

wlandgraf · March 15, 2022, 9:09pm

@Mario_P_Frigerio Could you please provide the screenshots and the model (entities) that cause the issue, so we can reproduce at our side here?

Mario_P_Frigerio · March 16, 2022, 4:51am

Dear Wagner Landgraf, I am your fan !

To reproduze it, just use an entity with more than 10 or 11 fields in database.

You can see in my print, in fact it depends of the your screen resolution for more or less fields, but the fact is the same:

we do not have a vertical scrollbar on webpanel (of the module View.Crud.Container.pas) that became a host of a created form to Edit any entities (module View.[name of entity].Edit.pas).

The same occurs when I list the records of an entity , via form View.[name of entitie].List.pas
which form is injected in the same webpanel (in module View.Crud.Container.pas).

I tried embeded cited webpanel embeded in a twebscrollbox and then change the webpanel size to desired form size, but without success.

unit View.USUARIOS.Edit;

interface

uses
System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Forms, WEBLib.Dialogs,
Vcl.Controls, Vcl.StdCtrls, WEBLib.StdCtrls,

Bcl.Rtti.Common, XData.Web.Client, Data.DB, WEBLib.CDS,
WEBLib.DBCtrls, XData.Web.JsonDataset, XData.Web.Dataset, JS,

App.Types, Crud.Utils, WEBLib.DB, WEBLib.Controls, WEBLib.ExtCtrls;

type
TFViewUSUARIOSEdit = class(TWebForm)
pnlMessage: TWebPanel;
lbMessage: TWebLabel;
btCloseMessage: TWebButton;
DataSource: TWebDatasource;
btCancel: TWebButton;
btSave: TWebButton;
btDelete: TWebButton;
lbID_USUARIO: TWebLabel;
edID_USUARIO: TWebDBEdit;
lbCRIADO_POR_ENTIDADE_MEDICA: TWebLabel;
edCRIADO_POR_ENTIDADE_MEDICA: TWebDBEdit;
lbNOME: TWebLabel;
edNOME: TWebDBEdit;
lbSENHA: TWebLabel;
edSENHA: TWebDBEdit;
lbEMAIL: TWebLabel;
edEMAIL: TWebDBEdit;
lbUSUARIO: TWebLabel;
edUSUARIO: TWebDBEdit;
lbCRM: TWebLabel;
edCRM: TWebDBEdit;
lbCPF: TWebLabel;
edCPF: TWebDBEdit;
lbDOCUMENTO: TWebLabel;
edDOCUMENTO: TWebDBEdit;
lbTIPO_DOCUMENTO: TWebLabel;
edTIPO_DOCUMENTO: TWebDBEdit;
lbNOME_MAE: TWebLabel;
edNOME_MAE: TWebDBEdit;
lbNOME_PAI: TWebLabel;
edNOME_PAI: TWebDBEdit;
lbDATA_NASCIMENTO: TWebLabel;
edDATA_NASCIMENTO: TWebDBEdit;
lbNATURALIDADE: TWebLabel;
edNATURALIDADE: TWebDBEdit;
lbORGAO_EMISSOR: TWebLabel;
edORGAO_EMISSOR: TWebDBEdit;
lbTELEFONE_RECADO1: TWebLabel;
edTELEFONE_RECADO1: TWebDBEdit;
lbTELEFONE_RECADO2: TWebLabel;
edTELEFONE_RECADO2: TWebDBEdit;
lbTELEFONE_RECADO3: TWebLabel;
edTELEFONE_RECADO3: TWebDBEdit;
lbCONTATO_EMERGENCIA1: TWebLabel;
edCONTATO_EMERGENCIA1: TWebDBEdit;
lbTELEFONE_EMERGENCIA1: TWebLabel;
edTELEFONE_EMERGENCIA1: TWebDBEdit;
lbCONTATO_EMERGENCIA2: TWebLabel;
edCONTATO_EMERGENCIA2: TWebDBEdit;
lbTELEFONE_EMERGENCIA2: TWebLabel;
edTELEFONE_EMERGENCIA2: TWebDBEdit;
lbCONTATO_EMERGENCIA3: TWebLabel;
edCONTATO_EMERGENCIA3: TWebDBEdit;
lbTELEFONE_EMERGENCIA3: TWebLabel;
edTELEFONE_EMERGENCIA3: TWebDBEdit;
XDataClientUSUARIOSGet: TXDataWebClient;
XDataClientUSUARIOSDelete: TXDataWebClient;
USUARIOSDataset: TXDataWebDataSet;
USUARIOSDatasetID_USUARIO: TLargeIntField;
USUARIOSDatasetCRIADO_POR_ENTIDADE_MEDICA: TIntegerField;
USUARIOSDatasetNOME: TStringField;
USUARIOSDatasetSENHA: TStringField;
USUARIOSDatasetEMAIL: TStringField;
USUARIOSDatasetUSUARIO: TStringField;
USUARIOSDatasetCRM: TStringField;
USUARIOSDatasetCPF: TLargeIntField;
USUARIOSDatasetDOCUMENTO: TStringField;
USUARIOSDatasetTIPO_DOCUMENTO: TIntegerField;
USUARIOSDatasetNOME_MAE: TStringField;
USUARIOSDatasetNOME_PAI: TStringField;
USUARIOSDatasetDATA_NASCIMENTO: TDateTimeField;
USUARIOSDatasetNATURALIDADE: TIntegerField;
USUARIOSDatasetORGAO_EMISSOR: TStringField;
USUARIOSDatasetTELEFONE_RECADO1: TStringField;
USUARIOSDatasetTELEFONE_RECADO2: TStringField;
USUARIOSDatasetTELEFONE_RECADO3: TStringField;
USUARIOSDatasetCONTATO_EMERGENCIA1: TStringField;
USUARIOSDatasetTELEFONE_EMERGENCIA1: TStringField;
USUARIOSDatasetCONTATO_EMERGENCIA2: TStringField;
USUARIOSDatasetTELEFONE_EMERGENCIA2: TStringField;
USUARIOSDatasetCONTATO_EMERGENCIA3: TStringField;
USUARIOSDatasetTELEFONE_EMERGENCIA3: TStringField;
procedure btCloseMessageClick(Sender: TObject);
procedure btCancelClick(Sender: TObject);
procedure btSaveClick(Sender: TObject);
procedure btDeleteClick(Sender: TObject);
procedure XDataClientUSUARIOSGetLoad(Response: TXDataClientResponse);
procedure XDataClientUSUARIOSDeleteLoad(Response: TXDataClientResponse);
procedure XDataClientUSUARIOSDeleteError(Error: TXDataClientError);
procedure USUARIOSDatasetAfterApplyUpdates(Sender: TDataSet;
Info: TResolveResults);
procedure WebFormCreate(Sender: TObject);
private
FId: JSValue;
FShowListProc: TListProc;
procedure InsertEntity;
procedure LoadEntity;
procedure ShowNotification(Notification: string);
procedure HiddenNotification;
class function InternalCreateForm(AElementID: string;
AShowListProc: TListProc; AInserting: Boolean; AId: JSValue): TWebForm; overload;
protected
FInserting: Boolean;
public
class function CreateForm(AElementID: string;
AShowListProc: TListProc; AId: JSValue): TWebForm; overload;
end;

var
FViewUSUARIOSEdit: TFViewUSUARIOSEdit;

implementation
...

wlandgraf · March 21, 2022, 7:35pm

Hi @Mario_P_Frigerio, thank you for the kind words, and sorry for the delay in response.
We detected that this was a small issue in TMS Web Core itself. Our team have fixed this issue internally, and the next Web Core update will include the fix for the scrolling issue in the XData Web Application generator.