NetTalk Central

Author Topic: Form Layout  (Read 535 times)

JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Form Layout
« on: December 13, 2021, 09:01:15 AM »
Hi,

I am trying to achieve the layout as in the attached image file.
It's the classic multiple vertical fields on the left with one large media field on the right.
For some reason I cannot get the fields on the left to align on the left underneath one another.
The first field always defaults to the size of the height of the media PDF on the right.

I have tried the last on line, cell and span rows settings as per webinar of 12 sept 2019

Hoping there is another example app or webinar that explains form layout?

thanks in advance for any tips or guidance

Johan

michelis

  • Hero Member
  • *****
  • Posts: 1754
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Form Layout
« Reply #1 on: December 13, 2021, 11:02:02 AM »
Hi, as I see you need to add spanrows to the field on the right.
Regards
-----------
Regards
Alberto

JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #2 on: December 13, 2021, 08:58:22 PM »
Hi Alberto

Have tried that
It has no effect.
Must be something overriding it or changing the behavior

I am also using the display grid tool in Chrome to illustrate this.

I used the media example and changed the form layout to div grid and switched the popup off.
Attached are the screenshots

thanks for any further tips

Johan



JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #3 on: December 13, 2021, 09:09:45 PM »
Hi

I missed the CSS grid layout
The media field does not seem to span the rows

Johan

michelis

  • Hero Member
  • *****
  • Posts: 1754
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Form Layout
« Reply #4 on: December 14, 2021, 03:37:40 AM »
You need to use "Table" for the span to work.
Regards
-----------
Regards
Alberto

osquiabro

  • Hero Member
  • *****
  • Posts: 528
    • View Profile
    • Email
Re: Form Layout
« Reply #5 on: December 14, 2021, 04:45:06 AM »
the problem with the table format is that it does not responsive

JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #6 on: December 14, 2021, 08:45:42 AM »
Hi,

Seems as if the Table layout is the only way currently.

Seems impossible on a mobile, but will have to re-think the layout on a phone then
Will look at a way to use the DIV grid layout and place the fields in a different position, will give it some thought

Thanks for the help, this had me going in circles for a bit  :)

Johan

michelis

  • Hero Member
  • *****
  • Posts: 1754
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: Form Layout
« Reply #7 on: December 14, 2021, 09:04:02 AM »
May be using Grid and absolute property to position it where you want , conbined with @media for the phone position.
Good luck!
-----------
Regards
Alberto

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 10636
    • View Profile
Re: Form Layout
« Reply #8 on: December 15, 2021, 04:02:20 AM »
post a small example app of your best effort, in table or grid mode, and I can take a look to see what is needed.

cheers
Bruce

JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #9 on: December 15, 2021, 11:22:05 PM »
Hi Bruce

If you change the shipped media example app from table layout to grid layout, it will ignore the span rows.
The screenshots I posted earlier in this thread show the effect.

cheers,

Johan

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 10636
    • View Profile
Re: Form Layout
« Reply #10 on: December 16, 2021, 09:16:26 PM »
>> You need to use "Table" for the span to work.

Grid mode fixed for build 12.32.
For best results you can specify start column, start row, span cols, span rows. In your case
start col 2, span rows 4.

JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #11 on: December 16, 2021, 10:24:06 PM »
Hi Bruce

Thanks!

Johan


Jane

  • Full Member
  • ***
  • Posts: 220
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: Form Layout
« Reply #12 on: December 17, 2021, 04:38:50 PM »
Johan,
Does it work for you?

I'm apparently missing something.  Installed 12.32.   Switched to Div Grid.  Set Start Column at 2 and left Span Rows at 4 as they were.  Does not span.
Switch to Table mode and it does span.

Does it span correctly for you in Div Grid mode?

Jane


JohanR

  • Sr. Member
  • ****
  • Posts: 259
    • View Profile
    • Email
Re: Form Layout
« Reply #13 on: December 19, 2021, 06:51:19 AM »
Hi Jane

Just checked,
No, it does not.
See attached, I added the grid lines

The other intriguing thing is the FLEX tags showing up.
I don't know enough yet.

Perhaps we're missing a trick

regards

Johan

Jane

  • Full Member
  • ***
  • Posts: 220
  • Expert on nothing with opinions on everything.
    • View Profile
    • Email
Re: Form Layout
« Reply #14 on: December 23, 2021, 11:11:46 AM »
I hoped maybe it would work with 12.33, Johan.

But web74 example still not working for me with Div Grid mode.

Can you confirm?

Cheers,

Jane