NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: JohanR 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
-
Hi, as I see you need to add spanrows to the field on the right.
Regards
-
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
-
Hi
I missed the CSS grid layout
The media field does not seem to span the rows
Johan
-
You need to use "Table" for the span to work.
Regards
-
the problem with the table format is that it does not responsive
-
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
-
May be using Grid and absolute property to position it where you want , conbined with @media for the phone position.
Good luck!
-
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
-
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
-
>> 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.
-
Hi Bruce
Thanks!
Johan
-
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
-
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
-
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
-
Hi Jane
Yes, can confirm
Grid still not working, if I switch back to table, then it works.
Perhaps there is an additional settings that we're missing.
Not sure
Currently bogged down with some other stuff, when I have more time to fiddle with the layout will investigate further.
Unfortunately my CSS experience is very basic.
When I tried last time make it work I found this feature in ChomeDevTools
https://umaar.com/dev-tips/243-css-grid-flexbox-editor/
Seems very handy
Johan
-
This is what I tried;
a) Add jfiles global extension
b) globally I set Browse and Form to Grid mode. also set default HTML Editor to None.
c) In UpdateMedia form procedure
MED:Description : Last on Line on
Media: Last on Line on
Start Row (Grid mode): 1
Span Rows : 4
Start Column(Grid mode): 2
Span Columns: 1
Cheers
Bruce
-
Thanks, Bruce.
Global set Browse to Grid mode - no change
HTML editor to none - no change
MEDIA:
Last on line - was already on
Span rows: 4 - was already set that way
Start Column (Grid mode): 2 - was already set that way
Start row (Grid mode):1 - was blank - no change
Span columns: 1 - was blank - no change
MED:Description - switch to Last on Line (was Last in Cell) <<--THIS DOES IT
It's still not completely responsive.
I guess ??
(This coming from someone who finally switched from a flip phone to a Pixel just two months ago...)
When I narrow the window in the browser, the media item does not collapse below the data fields. (Maybe need to force with a @media element??).
But it's certainly usable now.
Cheers,
Jane
-
Hi Jane
Sorry only managed to check now.
Still no luck my side
Will post if I discover anything
Johan
-
Hi Jane
Just tried with the latest version 12.35
Still cannot get it working correctly.
Think I also need a refresher on exactly how the grids work and what options cause and generate what layout in NTWS.
perhaps will try to attend one of the NT user group session and ask for some guidance.
cheers,
Johan
-
Hi, Johan,
I just installed 12.35.
Last I looked at this was a month ago with my previous post.
This time I found I needed to do the settings Bruce mentioned in his post.
Attached is Web74 as tweaked. Works on my machine.
Cheers,
Jane
-
Hi Jane/Bruce
doh! need to up the strength of my glasses.
I missed the second page of this post, so was unaware of the answer to the problem
Posted a few replies, but could not see them anywhere, so thought they went missing :)
cheers,
Johan