Form Layout

[JohanR]

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

[Alberto]

Hi, as I see you need to add spanrows to the field on the right.
Regards

[JohanR]

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]

Hi

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

Johan

[Alberto]

You need to use "Table" for the span to work.
Regards

[osquiabro]

the problem with the table format is that it does not responsive

[JohanR]

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

[Alberto]

May be using Grid and absolute property to position it where you want , conbined with @media for the phone position.
Good luck!

[Bruce]

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]

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]

>> 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]

Hi Bruce

Thanks!

Johan

[Jane]

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]

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]

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