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?
1 Like
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
Thanks (I’m wondering what I should make in order to have this button width set to 100% though).
hello J. D.!!! 
.Will you please help me in adding dark mode to my website… I will be very grateful.Reply ASAP
Hello JD, you were able to solve the issue of the size of the custom elements?
@jonatandor35 Hello JD, you were able to solve the issue of the size of the custom elements?
You shouldn’t rely on the custom element size as appear in the editor but define it explicitly using CSS string on the custom element page.
P.S. the preview mode doesn’t reflect the way it’ll be displayed on the live site (as it;s wrapped in an iframe when it is in preview mode),
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.
@jonatandor35 Yes, it is what I had feared, what happens is that the customElement creates a width: auto, this does not take the size as it should be, if only you could change the style of that custom element could work, because if I do by console works
how can i force the custom size of the custom element, since it does not allow me to access its style properties?
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’ ;
…
there is a way that the style change can be done on wix and not on the custom element directly? since it is a requirement.
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.
you know where I can find an example about it? thanks a lot
Follow the wix example