WB19 Layout Grid Properties

[LJLachance]

I am using a layout grid, setting properties as I have always done in prior versions. Specifically using layout grid properties, "flexbox"; layout "fluid"; gutter width "15"; breakpoint "480"; column height "auto"; position, "floating; Semantic tag, <div>; all settings I have used in previous WB17 version throughout the pages.

The issue now -

I have an image in a column of a 2-column layout grid. I want the image to be "center" BOTH Horizontal AND Vertical AND I want a text object to appear below the image, centered to match the image. The only way I can get the text below the image is to set the Horizontal to "center"...and Vertical to "top".

If I have both settings as "center" then the text disappears (centered) behind the image.

What am I missing? As an aside, previous version WB17 used jquery-1.12.4.min.js and I changed it to the most recent jquery-3.7.1.min.js. Not sure if this may be the reason??

[crispy68]

An image will center horizontally automatically if you set the full width = true for the image in the image properties. For the text, all you need to do is highlight the text and set the orientation to center. When you drag it into the grid, it should sit below the image. To center both vertically, you will need to set the grid column to center vertically.

[LJLachance]

I have exactly what you have written. Yet when I set the grid column vertical to "middle", the text goes behind the image. IF I set the vertical setting to top, the text appears below the image BUT, the image and text are both at the TOP of the column when viewed. IF the height of the adjacent column is higher than the image and text combined, then both the image and text appear at the top of the column when I want them to be centered in the middle of the column. Hope that makes sense.

[crispy68]

Have you tried it on a fresh project/page to see if you get the same result? If so, then would need a simple demo project to look at. You know where to send it.

[LJLachance]

Not sure why this is happening... Please refer to the project demo located at www.lachance.org/kinfolk/kinfiles.html (PW to get the file is "Pablo2024wb19".

Project is a zip file at the bottom ...

No Index in project - Look in Pompton folder

Bottom left of page is a photo of a Navy Seaman. Text underneath reads “Photo from Ancestry family-tree…etc”

This is Layoutgrid10 and you will see the grid is configured so that both columns are set to Horizontally “Center” and Vertically “Top”.
To reproduce my issue, you will need to try to set the column with the image to Horizontally - "Center" and Vertically "MIDDLE". The text block will be centered but behind the image.

I want to set both columns to Horizontally “Center” and Vertically “Middle” HOWEVER… when I do this, the text below the Navy photo moves behind the image in the center.

IF I change the size of the column from it’s current 3 and 9 to 4 and 8, nothing changes BUT if I change the column size to 5 and 7 or 6 and 6, the correct positioning occurs.

Not sure what is going on.

The project was imported from a WB17 project into WB19 following installation.

I renamed it and saved it to a different folder. The positioning worked correctly in WB17.
Please let me know once you have the project file in order that I may delete it.

[crispy68]

I can confirm with his project as well as a fresh project (using latest update V19), there is an issue with layout grid in the workspace.

In my simple demo below, there is a grid with an image, and 2 text boxes. When the grid is set to 6x6 it looks correct:



When the grid is changed to 4x8, the text now appears outside and below the grid and there is spacing between the image and text.

[LJLachance]

I will add to Crispy68 description that when I do this,

When the grid is changed to 4x8, the text now appears outside and below the grid and there is spacing between the image and text.

my text appears behind the image but still in the grid.

[Pablo]

I am unable to download the project. It also requires a username?

Not sure if the issue is related to Crispy68's description, because this behavior has always existed.

[LJLachance]

humble apologies ... user name "wb"

[Pablo]

Thanks for the project.
It looks like it is the same issue as described by crispy68.

Note however that this is not specific to WB19. it works the same as in any previsions version. It is related to amount of free space (eg the number of columns).
Anyway, will improve this functionality in the next update.

[LJLachance]

Many thanks Pablo, I now realize this is a workspace issue and when previewed or published, the positioning is correct.