Rollover image in flex container or flexgrid

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Rollover image in flex container or flexgrid

Post by crispy68 » Sun Oct 14, 2018 11:56 pm

Hey Pablo,

Is it possible to use a rollover image in a flex container or flexgrid? If so, I am not able to get it to work.

Settings for Flexcontainer:

Flex directions: column
Flex wrap: no wrap
Justify content: center
Align items: center
Align content: center

If I place a rollover image in a flex container with height set to 'auto', the rollover image disappears on preview.

If I set the height to 'fixed', then it does appear but it pushes all the content within the flex container to the top of the container and even pushes some content it into the container above. See images below:

WORKSPACE - flex container is set to 'fixed'
Image

PREVIEW:
Image



WORKSPACE - flex container is set to 'auto'
Image

PREVIEW:
Image

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Mon Oct 15, 2018 6:10 am

I'm sorry, the rollover image was not designed to be used with flexbox.
Currently it supports fixed /absolute position and floating (layout grid).

Maybe in a future update, however it will be a lot of work because each animation (> 30!) generates different code.

User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Rollover image in flex container or flexgrid

Post by crispy68 » Mon Oct 15, 2018 6:11 pm

Thanks pablo.

With flexbox and flex grid being used more and more, it will be needed. Even if there is a way for the hover effect to at least work would be beneficial to start.

As for the effects, maybe just the most popular to start with (ex. Fade) with others down the road?

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Mon Oct 15, 2018 6:19 pm

I will investigate if this is possible.

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Tue Oct 16, 2018 7:41 am

I did some tests and it turns out that you will need to set the flexbox grow and shrink properties of the rollover to '1'.
The reason for this is that otherwise the height of the rollover image is undefined.

User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Rollover image in flex container or flexgrid

Post by crispy68 » Tue Oct 16, 2018 10:48 pm

Hey Pablo,

that does work and the rollover image works as it should.

The only issue i'm having is getting it to behave with the container. What I mean by this is I have the grid cell to be centered vertically and horizontally. When the rollover image is inserted it forces all the objects to the top of the container (as though i'm using flex-start) and everything is no longer vertically centered.

Even if the only object in the container is the rollover image, it still appears at the top vertically. I've tried all sorts of settings and I cant get it to center vertically and horizontally in the grid cell.

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Wed Oct 17, 2018 6:00 am

Can you please share a demo project so I can see all your settings?

User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Rollover image in flex container or flexgrid

Post by crispy68 » Wed Oct 17, 2018 11:48 pm

See project link: https://www.wizbangwebdesign.com/demo/flexGrid.zip

The 2 images used for the rollover image are included.

In the project, there is a flex grid with 1 row/2 columns (blue & orange). Both columns are set the same.

In the blue column, the rollover image has flexgrow & flexshrink set to 1. As you can see in the workspace both it and the text object are shoved to the top. This is how it looks when previewed.

In the orange column, the flexgrow & flexshrink are set to 0. Both the rollover image and text look centered vertically and horizontally in the workspace as I want. When previewed, both the rollover and text are not only shoved to the top but the text is shoved slightly out of the container.

What's also interesting is that when previewed, if you hover the mouse over the grid somewhere below the rollover (in the blank space below it) it triggers the rollover (in this case the fade effect) even though the mouse is not over the actual button.

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Thu Oct 18, 2018 7:32 am

The correct settings in this case are:
flex-shrink: 1
flex-grow: 0
flex-basis: 60px (= the height of the object)

Otherwise the rollover does have an undefined height and the items cannot be vertical aligned.
with flex-grow = 1 the height would be container height minus the height other object(s).

User avatar
crispy68
 
 
Posts: 426
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Rollover image in flex container or flexgrid

Post by crispy68 » Fri Oct 19, 2018 2:51 am

Thanks Pablo!

I understand most of flexbox but I have not yet grasped how flexgrow, flexshrink and flex basis affect everything just yet.

Is the flex basis the height of the object due to the fact that I have it set to column? If it was set to row, would it represent the width?

User avatar
Pablo
 
Posts: 14579
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Rollover image in flex container or flexgrid

Post by Pablo » Fri Oct 19, 2018 6:32 am

Is the flex basis the height of the object due to the fact that I have it set to column? If it was set to row, would it represent the width?
Correct.

Post Reply

Who is online

Users browsing this forum: No registered users and 10 guests