Visual LANSA Forum

Community Forum for Visual LANSA
https://forum.developer.lansa.com/

VL-web layout mobile (SOLVED)

https://forum.developer.lansa.com/viewtopic.php?t=2132

Page 1 of 1

VL-web layout mobile (SOLVED)

Posted: Fri Jul 19, 2019 10:56 pm
by kno_dk
Hi.

is it possible to hide the url address line at the top and the navigation line at the bottom in the browser on a mobile phone from a VL-WEB application?

/Klaus

Re: VL-web layout mobile

Posted: Mon Jul 22, 2019 9:13 am
by MarkD
What happens if you make the URL a launchable shortcut from the phone's home screen?

Re: VL-web layout mobile

Posted: Mon Jul 22, 2019 6:35 pm
by kno_dk
Hi.

Then the url and the navigation bar is gone - thanks.

My application is with 3 rows. Top, Main and Bottom. I would like that the top and bottom row is fixed. Right now It starts to fille the entire screen just as I want it to, but it is possible to slide that application up and down on the screen. Can I avoid that?

/Klaus

Re: VL-web layout mobile

Posted: Tue Jul 23, 2019 4:51 pm
by JamesDuignan
Hi Claus,

if you are using a table layout on your webpage make the top and bottom rows units to be pixels and the content area to be proportion.

for example:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')

Evtroutine Handling(#Com_owner.Initialize)

Endroutine

End_Com
Regards,
James

Re: VL-web layout mobile

Posted: Tue Jul 23, 2019 10:32 pm
by kno_dk
Hi James.

If I create your example and then added it to the homescreen on the iphone it will act the same way as my application. You are able to move the entire application up and down by swipping up and down with your finger.

I want the top and bottom bar to be fixed at all time in the top and in the bottom.

/Klaus

Re: VL-web layout mobile

Posted: Wed Jul 24, 2019 9:32 am
by MarkD
In you web form's definition what is this option set to?
Capture.PNG
Capture.PNG (7.13 KiB) Viewed 23458 times
If yes, try setting it to no and recompile.

Re: VL-web layout mobile

Posted: Wed Jul 24, 2019 5:13 pm
by kno_dk
Hi.

The allow zoom was yes and I have changed it to no. It did not help. The problem is only on my Iphone. On an android it works as it should.

Here is my test web page.

I have a small issue more. I have a order web application where
I want the top and bottom bar to be fixes and everything in the middel to be dynamic and be able to scroll. In this application I have a list,and there should be some information at the top and at the bottom. If I scroll it should be the entire middel section (#PanelMidt) not only in the list. I have tried a lot of things but I can not get it to scroll the way I want.

What am I missing?


Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 3:36 pm
by MarkD
I know this is a VLF guide, but VLF applications are just VL-Web applications.

https://docs.lansa.com/14/en/lansa048/i ... 8_8315.htm

Does doing that alter the behavior?

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 4:36 pm
by kno_dk
Hi.

If i remove these 2 lines i get the statusbar and navigation - even on the shortcust from the homescreen. and that i dont want. I want to get rid of them.

/klaus

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 6:55 pm
by MarcusLancaster
Hi Klaus

Is this version of your program closer to what you need to see?

Cheers for now.

Marcus.

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem2) Manage(#Label1) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Sizing(ContentHeightFitToWidth) Column(#LayoutColumn2) Alignment(TopLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')

Define_Com Class(#prim_PANL) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Layoutmanager(#LayoutGroupboxMidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(2) Layoutmanager(#LayoutList) Left(0) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1200) Parent(#GroupBoxMidt)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1166)
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Label1') Displayposition(1) Ellipses(Word) Height(17) Left(0) Parent(#GroupBoxMidt) Tabposition(2) Tabstop(False) Top(0) Verticalalignment(Center) Width(1200)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#label1.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#label1.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 7:39 pm
by kno_dk
Hi.
No. I have created in a different way where i calculate the heigt of the panel based on the number of entries in the list. I dont know if this is the only way to do it.
Here is the source:
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#LayoutRow2.MinHeight := 48
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height #List.Height #LayoutRow2.MinHeight += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 7:51 pm
by MarcusLancaster
Ah ha - you want groupbox top and groupbox bottom to scroll up/down too. Got it. Sorry misunderstood the requirement :-(

Try this... no calculations... just using layout managers...

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Width(1200) Caption('GRPBOX top') Height(75)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt) Height(216)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(291) Width(1200) Caption('GRPBOX Bottom') Height(80)
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
Endroutine

Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
Endroutine

End_Com

Re: VL-web layout mobile

Posted: Thu Jul 25, 2019 8:49 pm
by kno_dk
Thanks.

it worked.

/klaus
All times are UTC+11:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited