SOLVED: Getting the duplicate outer wrapper in the nestable element

Bricks editor is adding the duplicate outer wrapper for child elements. This is making the messy design. Style from the Style tab of the parent element is applied to the child elements wrapper. See the image.

For this reason, the same style of the parent element is applied to the child elements wrapper.

Screenshot 2022-07-19 at 8.32.48 AM

I used this code

public static function render_builder() { ?>
	<script type="text/x-template" id="tmpl-bricks-element-bu-cart-counter">
		<component 
			:is="'div'"
		>
			
			//... some html code here

			<div 
				v-if="settings.cta == 'popup'"
				class="bu-cart-counter-popup"
			>
				<bricks-nestable :element="element" />
			</div>
		</component>
	</script>
<?php 
}

2nd Issue:

Child elements are not appending. I made the header template and added a nestable element there. When I am editing a page on builder editor and checking the preview of that nestable element there, child elements are not showing. It is totally blank.

Here is the video

Hi @bricksultimate,

Bricks 1.5-rc2 introduced a new Vue component to render the nestable element children that should be used instead of the bricks-nestable component:

<bricks-element-children :element="element"/>

More information: Nestable Elements (API) – Bricks Academy

You can download the latest RC2 from the account page.

Can you please let me know if that fixes the issue?

Best,
Thomas

3 Likes

Yes. RC2 resolved the issue. Thank you.