Nested Div Issue

  • Resolved elemenno

    (@elemenno)


    6 years, 5 months ago

    I’m trying to add the following code into the text area of the text block:

    <div class="wrap" style="text-align: center;"><a class="btn-11 ryv-popup" href="https://player.vimeo.com/video/140364516">
    <div class="ion-ios-videocam-outline" ></div>

</a>
</div>

    The end result is supposed to put the icon in the middle of the button, however, upon clicking “Save Changes”, everything past <...center;"> just disappears completely.

    Is there something that I need to add or is there some issue with nested divs?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Howdy_McGee

    (@howdy_mcgee)

    6 years, 5 months ago

    I think WordPress tries to clean up empty tags upon submission. Maybe try adding a nonbreaking space to the inner div:

    <div class="wrap" style="text-align: center;">
	<a class="btn-11 ryv-popup" href="https://player.vimeo.com/video/140364516">
		<div class="ion-ios-videocam-outline">&nbsp;</div>
	</a>
</div>
    Thread Starter elemenno

    (@elemenno)

    6 years, 5 months ago

    Interesting – I tried that option and upon saving changes, it cut it down to:

    <div class="wrap" style="text-align: center;">
<div class="ion-ios-videocam-outline"></div>
</div>
    Howdy_McGee

    (@howdy_mcgee)

    6 years, 5 months ago

    Could you change the inner div, ion, to a <span> instead?

    Thread Starter elemenno

    (@elemenno)

    6 years, 5 months ago

    I added that as well to enlarge the size of the icon needed, however, it’s still removing code – so it went from this:

    <div class="wrap" style="text-align: center;"><a class="btn-11 ryv-popup" href="https://player.vimeo.com/video/140364516">
    <span style="font-size:40px"><div class="ion-ios-videocam-outline"></div></span>

</a>
</div>

    To this upon saving changes:

    <div class="wrap" style="text-align: center;">

<a class="btn-11 ryv-popup" href="https://player.vimeo.com/video/140364516">
</a>
<div class="ion-ios-videocam-outline"></div>
&nbsp;

&nbsp;

</div>

    In this case, the icon does show up, but only underneath the button instead of inside of it.

    Howdy_McGee

    (@howdy_mcgee)

    6 years, 5 months ago

    I was thinking more along the lines of this, all one line maybe, no tabs no spaces ( besides the nbsp ), no real formatting:

    <div class="wrap" style="text-align: center;"><a class="btn-11 ryv-popup" href="https://player.vimeo.com/video/140364516"><span class="ion-ios-videocam-outline">&nbsp;</span></a></div>

    Thread Starter elemenno

    (@elemenno)

    6 years, 5 months ago

    Thanks so much! That one finally worked. I appreciate you staying on this, it was starting to get aggravating for such a little thing!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Nested Div Issue’ is closed to new replies.