JQuery stripping Grid styling

[SDG]

Hi,

I’m using a bit of JQuery to link a cell from the new grid on this page - http://staging.urban-hygiene.flywheelsites.com/:

jQuery("#product-category").wrap("<a href='http://staging.urban-hygiene.flywheelsites.com/product-categories/'></a>");

However, it seems to be stripping the flexbox settings already present on the existing cells. Is there a way to stop this from happening, please?

Screenshots attached

[alexander]

Hi @SixIT,

Thanks for reaching out.

I’ve tried checking your URL, but looks like it is password protected. You could add logins in a secure note which would help us check the site. Is it safe to assume product-category is an ID applied to a cell? If that’s the case, I can advise on what is happening here. Because you’re adding a wrapping element, the original element is no longer a descendant of the Grid. This means the styling of the cell is no longer in relation to the grid.

To keep the grid intact, you will need to add your link to the contents of the cell instead of the cell itself. You could try using jQuery wrapInner. For example:

jQuery("#product-category").wrapInner("<a href='http://staging.urban-hygiene.flywheelsites.com/product-categories/'></a>");

You may want to enable flexbox on the Cell at that point and make the anchor stretch to fill the space. If you’re already using flexbox positioning for the content inside the cell, you would need to set that up as custom CSS. You could add something to the Element CSS (under customize) like this:

$el > a {
  display: flex;
  /* more flexbox styles */
}

Also, have you tried the Creative CTA element? You could make this fill the entire cell. This might work with your design if you turn off the graphic and turn on secondary text.

[SDG]

The .wrapInner has worked perfectly, thank you so much!

[jade]

You’re most welcome, SmartChimp.