I created a button using custom element.
I set it to "width: 100%".
From some reason the button is 100% on preview mode but on the live site it behaves as if it was "width: auto".
Before I look the issue, does anyone have a guess what it can be?
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
Follow the wix example https://support.wix.com/en/article/velo-example-coding-a-more-robust-custom-element
you know where I can find an example about it? thanks a lot
Of course. You need to implement the attribute using functions attributeChangedCallback(name, oldValue, newValue) and observedAttributes() You set the attribute using Velo, both above functions do the job on Custom side.
The element on wix is only the mount point to react/Custom element. You can style the element. I.E class ActionBar extends HTMLElement { constructor() { super(); //this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot' this.width = '100vw'; this.height = '100vh'; this.style.position = 'fixed'; this.style.left = '0' this.style.bottom = '0'; .....
Force the Custom width to 100vw. 100% is the width of its parent. You can try to set margin to 0 too. Use shadowRoot for styling isolation.
Hello JD, you were able to solve the issue of the size of the custom elements?
hello J. D.!!! :-) .Will you please help me in adding dark mode to my website... I will be very grateful.Reply ASAP
Hey J.D.,
The layout for custom elements might appear differently when viewing in the Editor, when previewing, and on the live site after publishing. Consider creating a release candidate to check how the custom element will look on the site after publishing.
Hope this helps!
Dara | Corvid Team