Pro 5 issue with Dynamic Content URL on Button within Modal within linked Cell

[connexxions]

Hi there,

I have a Looper Provider (Grid) that is pulling in a Custom Post Type (Team Member) into Cells, with basic info in the Cell. Within the Cell is a Modal which contains more of the Team Member info (pulling in ACF fields and featured image). The Modal has a Toggle Hash set up, and then the whole Cell (the Looper Consumer) has its HTML tag set to a and the link URL is set to the Toggle Hash of the Modal within it.

Also within the Modal Content is a Button, which has a URL from an ACF field. However, this link is not being applied to the Button, and it loses its a tag altogether (becoming a div instead).

When I set the Cell’s HTML tag to div, the Button within the Modal Content then works.

I understand that within HTML structure, you cannot have an a tag element within an a tag, which would be the case if the Button was directly within the Cell. However, in the outputted HTML of the page, the Button within the Modal Content is actually totally outside of the Cell’s HTML (since the Modal Content HTML is output after the rest of the page has been generated). Because the Modal Content HTML is completely separate from the Cell HTML, it should be possible to have an a tag within the Modal Content, even when the Cell itself is an a tag.

Is this a bug within Cornerstone? Or perhaps a filter that WordPress is applying to delayed output?

Cheers!

[ruenel]

Hello @arthurodb,

Thanks for writing in!

Yes, you are correct that the modal content is completely separate and rendered outside of the cell. On the other hand, the Toggle button is using the <a> tag and is added inside the Cell element. This is why you cannot use the HTML <a> tag in your cell.

In your case, you must have added a broken HTML code somewhere or have assigned HTML<a> tag inside the modal which may have caused why the button inside the modal content does not work. We would love to check your page where we can check your grid, modal, and button element. Please send us the URL of the page instead for inspection.

Best Regards.

[connexxions]

Hi, thanks for the response.

I have not added any HTML code anywhere, nor assigned an <a> tag within the modal, as everything has been built using Pro Elements. Here is the code of the modal itself:

The <div class="x-anchor ..."> which contains the highlighted <i> should be an <a> tag, rather than a <div>.

Here, you can see the HTML for the Cell which is within the <div class="x-main full" ...>, and has an <a> tag to enable it to open the modal when pressed. Then below the <footer> is where the modal content itself is placed, and within that, the <div class="x-anchor ..."> does not have an <a> tag:

This shows the structure of the elements in Cornerstone, A Cell (which has been set to an <a> tag with a # link to the modal), and then an Icon Button within the Modal, which then doesn’t work:

Finally, here is the setup of the Cell:

And then the setup of the Icon Button:

Are you able to replicate this bug on your end?

Cheers

[tristup]

Hi @arthurodb,

I have tried to replicate the structure you mentioned in the screenshots but was not been able to replicate the issue in my local environment. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific Page and specific section where you are having this issue
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[connexxions]

I have added a secure note to my previous reply.

I was able to replicate the issue on another site, in a very simple way:

1. Create a Grid or Row with a Column or Cell in it
2. Set the HTML Tag of the Column or Cell to <a>
3. Add a link to the URL for the Column or Cell that is the Toggle Hash for the Modal element
4. Add a Modal element to the Column or Cell
5. Set up a Toggle Hash for the Modal element
6. Add a Button into the Modal element
7. Add a URL for the Button

The whole Cell or Column will now open the Modal, but the Button within the Modal will not work.

[tristup]

Hi @arthurodb,

Thanks for explaining the steps, I went through those steps and was able to replicate the issue in my local environment. I suspect this could be a bug on the latest version theme and have reported it to the developers for further investigation.

Thanks

[connexxions]

Great, thanks

[tristup]

Hi @arthurodb,

You are most welcome.