Invisible Content Area Modal

Support
#1

Hello,

I currently set up a page with 17 content area modal (It’s a list of people with information about them when clicked), but only the first and last 4 work properly. The others “open” but the actual content is invisible. This is super strange because in cornerstone the problem does not exist–everything works flawlessly.

Is there a cap on how many of these you are allowed to have? I don’t think it’s an issue with how i set them up since they are all a duplicate of each other–but I could be wrong.

Any pointers would be appreciated!

#2

Hi Carlos,

Thanks for the very detailed post information. Are you referring to the Board of Directors page in your site? I have checked the page and it turns out that you have inserted invalid html codes like this one:

<div style="padding: 10px; line-height: 0; text-align: center;">
<img src="http://www.dreamproject-va.org/wp-content/uploads/2019/04/emma.png" class="thumbnail">
<p></p>

<p><b>Emma Violand-Sanchez</b></p>
<pb>Founder & Chair, Dream Project</p>
</div>

The correct code should be this:

<div style="padding: 10px; line-height: 0; text-align: center;">
<p><img src="http://www.dreamproject-va.org/wp-content/uploads/2019/04/emma.png" class="thumbnail"></p>

<p><b>Emma Violand-Sanchez</b></p>
<p>Founder & Chair, Dream Project</p>
</div>

Please ensure that all of the contents you have inserted in the content area modal is valid html. Any incorrect or unclosed html will result to a conflict which is why you are having this issue right now.

Hope this helps. Please let us know how it goes.

#3

Yes I am referring to that page. For the example you have given the item works fine. I’ve tried double checking the code in one of the problematic ones (eg. Dawn) but the issue persists.

Edit: I can’t imagine the issue would be related to the html code, as the ones that work and the ones that don’t share nearly identical code. If that was the issue, i’d image they would all be failing

Edit2: I went ahead and made sure that the code is correct for all items; that didn’t help. Something to note, if I were to change Emma’s Content Area Modal with Dawn’s–Dawn’s would start working, and Emma’s would stop working. I think it might have something to do with the layout but i’m not sure.

#4

Hi Carlos,

In this case of HTML issue, the culprit is always the one before the affected content. Example, if the 4th content area is affected, then the 3rd is probably the cause. And fixing one may not fix another if the same issue exist multiple times.

The 3rd still has this content

<p><b>Mark Habeeb</b></p>
<pb>Secretary, Dream Project</p>
<pb>Georgetown University</p>

As you can see, it has similar issue as the previous content provided by Nel, I assume you have copy pasted it to other content modal and just edited. Which means, this issue is present on every of your content modal element and it has to be fixed one at a time, like I said, fixing one will not fix them all.

Thanks!

#5

If that would have been the issue, none of them would be working. Nevertheless, I went ahead and fixed all the issues and the problem persists. I can’t find any other issues with the code.

#6

Hello Carlos,

Could you please provide us access to your site so that we can inspect your content are modal contents in the preview area? You can create a secure note in your next reply and place the WP credentials in the secure note.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#7

Here it is

#8

Hello Carlos,

I have inspected your page and I found out that even in the first content area, you inserted an invalid content already:

<div style="padding: 10px; line-height: 0; text-align: center;">
<p><img src="http://www.dreamproject-va.org/wp-content/uploads/2019/04/emma.png" class="thumbnail">
</p>

<p><b>Emma Violand-Sanchez</b></p>
<p style="color:grey">Founder & Chair, Dream Project</p>
</div>

<div style="padding: 10px; line-height: 1.4; text-align: left; text-indent: 50px;">

<p> Dr. Emma Violand-Sánchez was a former Chair and member of the Arlington Public Schools Board from 2008 to 2016. Since 1998 Dr. Violand was an adjunct faculty at Georgetown University in the Linguistics Department. She retired in July 2007 as the Supervisor, English for Speakers of Other Languages/High Intensity Language Training (ESOL/HILT) Office, PK-12, Arlington Public Schools, Arlington, VA. She received her B.S. and M.S. from Radford University and her doctorate degree in education from the George Washington University. Dr. Violand has expertise in education policy, curriculum development, family involvement, multicultural education, language minority education, and learning styles. She has several publications on these topics.</p>

<p> Dr. Violand is an active community member and civic leader. For eight years she was a member of the Northern Virginia Community College Board, representing Arlington County. Dr. Violand is founder and President of the Board of Dream Project.She was responsible for initiating Project Family, the bilingual GED and various programs that benefit the Latino community. She received a senior scholar Fulbright Award as a consultant for the Educational Reform in Bolivia. She is also the recipient of the James Hunter III Human Rights Award, Mexican American Legal Defense Fund -Community Service Award,Recipient of the Virginia Community College System Award for College Board Exemplary Service, Notable Woman of Arlington,and American Association of University Fellow.On January 2017 she was named Washingtonian of the Year.</div>

The correct code should be:

<div style="padding: 10px; line-height: 0; text-align: center;">
    <p><img src="http://www.dreamproject-va.org/wp-content/uploads/2019/04/emma.png" class="thumbnail"></p>
    <p><b>Emma Violand-Sanchez</b></p>
    <p style="color:grey">Founder & Chair, Dream Project</p>
</div>

<div style="padding: 10px; line-height: 1.4; text-align: left; text-indent: 50px;">
    <p>Dr. Emma Violand-Sánchez was a former Chair and member of the Arlington Public Schools Board from 2008 to 2016. Since 1998 Dr. Violand was an adjunct faculty at Georgetown University in the Linguistics Department. She retired in July 2007 as the Supervisor, English for Speakers of Other Languages/High Intensity Language Training (ESOL/HILT) Office, PK-12, Arlington Public Schools, Arlington, VA. She received her B.S. and M.S. from Radford University and her doctorate degree in education from the George Washington University. Dr. Violand has expertise in education policy, curriculum development, family involvement, multicultural education, language minority education, and learning styles. She has several publications on these topics.</p>
    <p>Dr. Violand is an active community member and civic leader. For eight years she was a member of the Northern Virginia Community College Board, representing Arlington County. Dr. Violand is founder and President of the Board of Dream Project.She was responsible for initiating Project Family, the bilingual GED and various programs that benefit the Latino community. She received a senior scholar Fulbright Award as a consultant for the Educational Reform in Bolivia. She is also the recipient of the James Hunter III Human Rights Award, Mexican American Legal Defense Fund -Community Service Award,Recipient of the Virginia Community College System Award for College Board Exemplary Service, Notable Woman of Arlington,and American Association of University Fellow.On January 2017 she was named Washingtonian of the Year.</p>
</div>

I also found out that in one of the text element, you inserted this:

Please be advised that any unclosed html tag or invalid html code will accumulate and affect the remaining elements of the page. Please check all your content area modal contents and your text element. You can make use of this site: https://htmlhint.io/ to make sure that you have inserted the correct html format and valid code to avoid any further conflicts with the rest of the elements of the page.

Hope this explains your issue thoroughly.

#9

I went through every single element and double triple checked the html. You were right, now everything works! Thanks for the help!

#10

You’re welcome!
Thanks for letting us know that it has worked for you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.