CSS Calc Problem

I noticed when I set the width property of a HTML element directly on the style attribute (instead use a class) the widths were I used "calc" are ignored (they shows as having blank value on inspection). Source:                        < label style = " width: calc(2 * (100% / 3) - 6px);margin: 0px 1px 0px 5px" > Unit </ label >                        < label style = " width: calc(100% / 3 - 6px);margin: 0px 1px 0px 5px" > Class </ label > Inspect: Does anyone experienced that and know how to solve it? (I mean, besides creating a different CSS class for each single-used width size). I really rather avoid creating a class for each of those widths...

Its probably because of the limited DOM we have access to as sheet makes. Roll20 has locked down a lot of features for security reasons - no jquery style scripting, for instance. In any case, you should really be using CSS in place of style in every instance.  With your example code, I'd create 3 classes .sheet-twothirds {    width: calc(2 * (100% / 3) - 6px); } .sheet-onethirds {    width: calc(100% / 3 - 6px); } .sheet-thirdsmargin {    margin: 0px 1px 0px 5px; } then use them <label style="twothirds thirdsmargin">Unit</label> <label class="onethirds thirdsmargin">Class</label> I probably wouldnt use those class names, but you get the idea.

Yeah.. "calc" is just pure css, but I understand. I'll create a single class for each width; thanks!

Sidenote; as a rule of thumb, try to only include an inline style as a last resort.  Sidenote 2; same goes for using "!important" in css. Both cause headaches down the road when you or someone else needs to make style changes.

Sidenote 3, for some reason I've found the input types of number get overridden (at least for the width) by the .charsheet styling, so for numbers I've always had to either use inline styling or !important in the css for any number fields.

@Finderski&nbsp; That's interesting.&nbsp; Seems that you could just add more specificity (I love saying that...) to override anything that roll20's css might be affecting. e.g.&nbsp; .charsheet&nbsp; input[type="number"].sheet-my-style-rules-all { ... } hmm. Is it OK to include .charsheet in our sheet css? cool tool to check&nbsp; specificity&nbsp; <a href="https://codepen.io/certainlyakey/pen/ycEAh" rel="nofollow">https://codepen.io/certainlyakey/pen/ycEAh</a> I think I recall needing to use !important on some of the repcontrol elements or similar roll20-specific html/css. I do abuse the heck out of !important with the stylus extension. Sorry for hi-jacking your thread Rago. ;-(

@Finderski can you provide an example ? I almost never use inline styles or !important for inputs. Are you doing input[type="number"] ? Doing just input may result in the inherent style overriding your option. @Rago Inline styles are a bad practice. They cause a cascading override issue and often create unnecessary excess code.A better solution if you want to avoid making multiple classes is to use CSS Selectors . In particular nth-of-type() can be really useful for this. In this example all of your labels will use the same margin. Label 1 will have a different width than label 2. HTML: &lt;div class="example"&gt; &nbsp; &nbsp; &lt;label&gt;1&lt;/label&gt; &nbsp; &nbsp; &lt;label&gt;2&lt;/label&gt; &lt;/div&gt; CSS: div.sheet-example label { &nbsp;&nbsp;&nbsp;margin: 0px 1px 0px 5px; &nbsp;} div.sheet-example label:nth-of-type(1) &nbsp;{&nbsp; &nbsp; &nbsp; width: calc(2 * (100% / 3) - 6px); } div.sheet-example label:nth-of-type(2) &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width: calc(100% / 3 - 6px); }

@Cassie, CSS selectors can't solve the problem this time; it's really a bunch of 1 or 2 elements of same size (for many sizes...); in the end I created a CSS for all of them. @Vince, I'm well aware of both practices, I was just trying to avoid create too many css classes. Also, speaking about Roll20 charsheet, it is nearly&nbsp; impossible avoid !important (that's kinda bad, I know) - the default css has too many weird element style preset (like margins and padding, arg!). I do abuse of !important on Character sheets. I think this specific point is one strong factor that make a large number of premade character sheets visually unappealing. (that was in fact exactly what made me subscribe to pro... the ability to create my own character sheets.... very aligned character sheets).

I've never found a situation that needs !important. I have used it a few times till i figured out exactly what was needed to remove it - it can be very hard, but there's always a way. You just need to be extremely specific with the classes in some cases.

Finderski &nbsp;said: Sidenote 3, for some reason I've found the input types of number get overridden (at least for the width) by the .charsheet styling, so for numbers I've always had to either use inline styling or !important in the css for any number fields. As Vince says, you shouldnt need to do that. Either &nbsp; input[type="number"] or&nbsp; &nbsp; input[type="number"].sheet-some-style {} should override the sheet styling. I dont know if the first is enough, but the second should be. Edit: oops just noticed Cassie said the same thing. Vince said: hmm. Is it OK to include .charsheet in our sheet css? You can, but I'm not sure it does anything because I think its prepended to all user styles automatically, in the same way sheet- is added to class names. I could be wrong, I've never tested, but it's always there when i examine styles in Chrome Inspector. cool tool to check&nbsp; specificity&nbsp; <a href="https://codepen.io/certainlyakey/pen/ycEAh" rel="nofollow">https://codepen.io/certainlyakey/pen/ycEAh</a> That site looks interesting. I'll definitely be playing around with it.

@GiGs &nbsp; input[type="number"] This should not be enough, but the second option... &nbsp; input[type="number"].sheet-some-style {} ...should. CSS tries to prioritize by "how much specific" is your selector, and that's more specific than just a class. BUT increase the selector specificity on purpose just to override a style is arguably as bad as !important - but, at least "!important" exists exactly for that - override styles you don't have control over.

Cassie said: @Finderski can you provide an example ? I almost never use inline styles or !important for inputs. Are you doing input[type="number"] ? Doing just input may result in the inherent style overriding your option. @Rago Inline styles are a bad practice. They cause a cascading override issue and often create unnecessary excess code.A better solution if you want to avoid making multiple classes is to use CSS Selectors . In particular nth-of-type() can be really useful for this. In this example all of your labels will use the same margin. Label 1 will have a different width than label 2. HTML: &lt;div class="example"&gt; &nbsp; &nbsp; &lt;label&gt;1&lt;/label&gt; &nbsp; &nbsp; &lt;label&gt;2&lt;/label&gt; &lt;/div&gt; CSS: div.sheet-example label { &nbsp;&nbsp;&nbsp;margin: 0px 1px 0px 5px; &nbsp;} div.sheet-example label:nth-of-type(1) &nbsp;{&nbsp; &nbsp; &nbsp; width: calc(2 * (100% / 3) - 6px); } div.sheet-example label:nth-of-type(2) &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width: calc(100% / 3 - 6px); } Look at the current Savage Worlds Tabbed character sheet on the Vehicle tab...the left hand column of inputs have differently sized inputs (I think that changed when there were some updates that caused a lot of CSS havoc on character sheets a while back, because they were all sized the same initially). &nbsp;As I've been re-writing the sheet, I've had to use !important because I didn't think to use your method of input[type="number"].class (not an HTML guy...just picked up enough to do a character sheet or two). &nbsp;I realize it's about specificity and just found it frustrating that the roll20 class kept overriding my class. &nbsp;So...I'm lazy and just started using !important on number fields.

&nbsp;I realize it's about specificity and just found it frustrating that the roll20 class kept overriding my class. &nbsp;So...I'm lazy and just started using !important on number fields. Laziness is about to make short work now thinking less about the future updates. Settings style by element (instead of use classes) is laziness; even more then you know some children code will be influenced. I love Roll20, I'm a Pro subscriber for some time now and do not think about change that, but I really have a bad image about current sheet customization. When the parent CSS is out of your hand, already full of present and may change it is SAFER to enforce your style - not lazy. Nothing should be preset on the sheet character style.

Finderski said: Sidenote 3, for some reason I've found the input types of number get overridden (at least for the width) by the .charsheet styling, so for numbers I've always had to either use inline styling or !important in the css for any number fields. Using an CSS class often resolves the problem (which is real).