Flexgrid Content NOT Visible

[Smee]

Now that I have a breather, I'll take the time to show what is the problem with the flex grid.

When I downloaded your example, it works perfectly. When I place a flex grid on the page (using either the default configuration, choosing a template, or building from scratch) I get one of two things. Sometimes I get a page that only Picasso could understand, or I get absolutely nothing.

I posted one example a couple days ago. To refresh:

This is how it looked in WWB:

And this is how it looked in browser:

Currently experimenting with this file: http://www.ahgweb.com/wwb_14/flexgrid_notworking.wbs

When previewed in Firefox and Edge nothing in the flex grid appears.

If I try it in Internet explorer, I at least get something ableit the page is not usable.

Been through the tutorial a couple of times, but must be missing a step somewhere.

[Pablo]

First note that Internet Explorer does not support CSS layout grid, so it will not work in IE.

Also:
- flex grids do not work with master pages with layers combined.
- you have added breakpoints, but the flex grid layouts in the breakpoints do not have anything in common with the default view. So, therefor nothing will show in breakpoints.

To make your project work:
- remove the layers from the master page, make sure all content is 'flexible' (layer are mainly for absolute positioned content)
- remove the breakpoints or make sure the settings make sense.
- do not use 'center in browser', this makes the page width fixed
- remove fixed content like Title1, Description1, because it affects the view port size in smaller views.

Tip: Do not use too much difference layout method on the same page (layer, layout grid, flex grid, master pages, absolute positioned objects). Not everything can be mixed together.

[Smee]

First note that Internet Explorer does not support CSS layout grid, so it will not work in IE.

I knew that, that is why I tried as I was getting nothing in the browsers that are supposed to support it.

Also:
- flex grids do not work with master pages.

THAT is likely where the problem is then. Looked in tutorial and could not find that information. Now I know.

Does that then mean that this is best used for single page sites ... as reconstruction of the header on large sites could become quite time consuming?

Thanks.

[Pablo]

To make your project work:
- remove the layers from the master page, make sure all content is 'flexible' (layer are mainly for absolute positioned content)
- remove the breakpoints or make sure the settings make sense.
- do not use 'center in browser', this makes the page width fixed
- remove fixed content like Title1, Description1, because it affects the view port size in smaller views.

Tip: Do not use too much difference layout method on the same page (layer, layout grid, flex grid, master pages, absolute positioned objects). Not everything can be mixed together.

[Smee]

I do use layers as a spacer to keep the first layer off of the absolute top of a page. and the absolute bottom of a page. Inside of layers though, I usually use a transparent shape as a spacer.

[Pablo]

Why not use margin?

[Smee]

Why not use margin?

I've been looking for "page" property, didn't think to look at object arrange. Thanks.

Sometimes figuring out where to look is half the battle.

[Pablo]

Margin is also available in the context menu (right click) or via the Property Inspector.

[charles m]

Hi Pablo


Just following on from this thread.
We are building a website using Flexgrids - one of the main selling points for WYSIWG - to create a flexible website between different browsers and screens sizes.
Am I right in saying this will now not work on IE at all?.... If so is this a problem on other browsers and is there a solution?

[Pablo]

You are correct. Flex grid will not work with IE. IE is no longer maintained by Microsoft so it does not support newer HTML/CSS functionality.
https://caniuse.com/#feat=css-grid

[mckonen]

Yes, I strugled with this issue yesterday and today also.. until I found this post..

There should an extra note for that...

The layout with layout grids should be easier to edit / handle if possible, it is very hard to mofify the content afterwards, so the fastest way is the make a new page and copy the content.

In my opinion, This is the biggest fail comparing to other WYSIWYG softwares. E.g in WP you can edit the layout grids and the content freely without this kind features.

I just wonder, is there possible to handle the hight of the grid otherwise than to add, for example, text with the some padding value the on top of an image to control the height of the grid?

But anyways, this a is a great program, but not the easiest one to learn all this kind of tricks.

[Pablo]

First note that this posy is very old. In the meantime, IE is not used any more. Also, I think the help and tutorials clearly indicate that IE is not supported.
This is not a issue of the software, Flex grid is a standard HTML feature.

You can rearrange items in a layout grid using the Arrange tools (e.g., Move Up, Move Down) or by simply using the numpad "+" and "-" keys. This is the first time I’ve received feedback that someone finds editing layout grids difficult, so it’s not a common concern. But the next version will have some improved related to moving things around.

The height of a grid starts at zero and expands dynamically as content is added. Setting a fixed height is not recommended, as it makes the grid non-responsive and less adaptable to different content or screen sizes.
Note that this also is not a WWB specific feature.