Roll20 compendium wizard update#

Roll20 compendium wizard update#

Text inputs, number inputs, and textareas will not update the backing attribute until they lose focus, for example when you click elsewhere on the sheet or hit the key. So, an element named 'attr_example' will be stored in the attribute 'example'. The value of the form element will be stored as the value of an attribute with the same name as the form element, except the 'attr_' prefix will be removed. Width: 100% /* Inputs match the width of the parent element as defined by the spans */Ĭreate one of: (with a type attribute of 'text', 'number', 'checkbox', 'radio', or 'hidden'),, or, and set the element's name attribute to a value beginning with 'attr_' Position: absolute /* removes the input from the DOM flow, allowing the span to exist in the same space */ Padding: 0 8px /* Matching my input's padding so that the widths are correct */

Height: 20px /* Prevent the span from defining the height of the input container which can't be multiline */ Width: fit-content /* Will fit the width to the contents without going outside itself or collapsing smaller than its content, though we will be using min-width in the case where there's no content. Min-width: 50px /* Whatever feels good to you, prevents a new span from collapsing to 0. Position: relative /* Allows the input's absolute positioning to be relative to this parent div */ Overflow: hidden /* hides overflow that is caused by the span */ Here is the CSS with comments about what the properties are doing for you:

The html baseline is a simple parent container with your input and span inside: See more: box-sizingĮxplicitly adding a box-sizing to my textarea css, seen below, fixed the problem.īy stacking your input with an attribute-backed span that defines the dimensions of the parent, you can create inputs that resize themselves to fit their text.

This leads the default textarea to more easily take more space than it should, overflowing it parent element, while inputs more rarely do. Tips for styling many of the basic elements of a sheetįor some reason, the default for the input elements is box-sizing: border-box, while the default for the textarea was box-sizing: content-box. This article and some of the tips originate from the old CSS Wizardry-thread in the Character Sheets forum, but have over the years expanded beyond that as the framework matured with changes like CSE and newer CSS features like Flexbox or CSS Grid Some tips don't necessarily involve CSS at all, but are quirks in the sheet system. This page gives a number of examples for creative way to use CSS within the limits of the Roll20 Character Sheet Framework.