How do I customize widget's configuration dialog in kentico 13?

Yeray Campos asked on October 19, 2022 09:41

Hi

I have been tasked to expand the widget's configuration dialog's size. In kentico 12 we could edit the style of the dialog by simply referencing to the kentico-modal-dialog class and its children with css: Image Text

Image Text

With kentico 13, I am unable to edit the width of the configuration dialog.

Image Text

The reason behind why I can't edit the div with ktc-modal-dialog class is that the div is inside a shadow dom and element's styles inside a shadow dom are independent from the light dom styles. Inserting the stylesheets in the slots doesn't work either, the div is the parent element of the slots and I can't reference anything outside of the slots tags if my styles or stylesheets are in a slot tag.

My only options here are either make a custom javascript to insert the styles with js as the first element of the shadow dom or change the root value of "width: 600px". My question is.

Is there any way to change the widget's configuration dialog's width? Is there any setting in the administration page that I can tweak in order to get the same result as the first image?

Best regards

Recent Answers


Trevor Fayas answered on October 25, 2022 03:32

Sean Wright did something with this...are you on the Kentico Community slack channel that you can send him a message?

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on October 25, 2022 03:41

Developing Modal Dialoges may be the route you'll need to take. A lot is done in React and shadow-dom with the editing interface so often if you want to customize it you have to develop your own dialoge.

0 votesVote for this answer Mark as a Correct answer

Yeray Campos answered on October 25, 2022 08:50

Thanks Trevor, I will contact him and ask him about this issue. If I find something I will update this post with the answer.

For now I am changing the modal with js and events. Not the best approach but it does the job until I find a better solution.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.