.largedialog-class?

Hi! I'm creating a new sheet with CSS Grid and Flexbox and after transferring the HTML document into the character sheet it seems that some additional classes are applied. E.g. if you look at the input element with the red box: <a href="https://abload.de/img/screen82ksi.png" rel="nofollow">https://abload.de/img/screen82ksi.png</a> It somehow gets the styling from a class called .largedialog that I don't use. In fact it just overwrites my own class (blue box) that would set the width to 40% instead of 100%. Where does the class come from and how can I disable the changes? Also I've noticed that there are some other classes unknown to me that you can see in the screenshot (.ui-dialog .characterviewer, .dialog) that seem to change some styles. What can I do against that? This is how it should look like (I hope the link is working): <a href="https://jsfiddle.net/2068cavz/#&amp;togetherjs=8pA3kQuQdu" rel="nofollow">https://jsfiddle.net/2068cavz/#&amp;togetherjs=8pA3kQuQdu</a> Greetings! PS: Also - why did the yellow space in the top and in the bottom disappear?

Character sheets are nested in the existing html/CSS of the Roll20 site. The entire character sheet (bio/info tab, character sheet tab, and attributes/abilities tab) are in an iframe. This means that there's several levels of elements above what is in your character sheet code. The .largedialog is not being added to your element. The CSS there is .largedialog label which means any label contained within the .largedialog &nbsp;is given that styling. To override this styling, you just need to utilize something with equal or greater&nbsp; CSS specificity . You can find information on doing this in the wiki . My personal preference is to wrap the whole sheet in a container (usually a main &nbsp;element), give the container a class (or even an ID if you really want to not have to worry about specificity), and then prepend all your declarations with that or use all:unset &nbsp;on elements. .main label{ &nbsp;&nbsp;&nbsp;&nbsp;width:50%; } OR .main label{ &nbsp;&nbsp;&nbsp;&nbsp;all:unset; } EDIT: For the yellow on the top bottom, it's most likely due to the wrapping divs as well. There's a fair bit of padding/margin that is added from those. EDIT2: Also, I'd really recommend writing your code in an IDE (e.g. VScode or sublime text) and then use the sheet sandbox feature to upload your code to Roll20 to test. This is much quicker than using the custom sheet editor, and allows you to see how things are interacting with the existing Roll20 code.

Thanks, I'll try the sandbox! :)