We use Cookies to help personalize and improve Roll20. For more information on our use of non-essential Cookies, visit our Privacy Policy here.
Accept
Advertisement Create a free account

Space in fieldset depending on HTML layout.

1486503529

Edited 1486503974
DXWarlock
Pro
Sheet Author
API Scripter
it was driving me nuts why my sub-100% sum total width would not fit on the sheet without wrapping a part of it. Seems the fieldset cares about the HTML layout on the 'whitespace' between elements of it. For example: <fieldset class="repeating_occsk">   <input type='checkbox' checked='true' style="width:5%;" name='attr_OCCSBL' value='1'>   <button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button>   <input float="left" type="text" style="width:15px; background:#777; color:#fff;" name="attr_OCCSKLV" value=1>   <input float="left" style="width:50%;" class="sheet-skill" type="text" name="attr_OCCSK" value = SkillName>   <input float="left" style="width:10%;" class="sheet-baseinputbox" type="number" name="attr_OCCSKP" value = 0>   <input float="left" style="width:10%;" class="sheet-perinputbox" type="number" name="attr_OCCSKPL" value = 0>   <input disabled="true" type="hidden" type="number" name="attr_min_OCCs" value="@{min_IQ}+@{OCCSKP}+(@{OCCSKPL}*(@{LEVEL}-@{OCCSKLV}))">   <input disabled="true" type="hidden" type="number" name="attr_min_OCCt" value="(((@{min_OCCs} + 98) - abs(@{min_OCCs} - 98) ) / 2)">   <input float="left" style="width:11%;" class="sheet-sdinputbox" type="text" name="attr_OCCT" value="@{min_OCCt}" disabled="true"/> </fieldset> produces this: While this (the same data just in one long string): <fieldset class="repeating_occsk">   <input type='checkbox' checked='true' style="width:5%;" name='attr_OCCSBL' value='1'><button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button><input float="left" type="text" style="width:15px; background:#777; color:#fff;" name="attr_OCCSKLV" value=1><input float="left" style="width:50%;" class="sheet-skill" type="text" name="attr_OCCSK" value=S killName><input float="left" style="width:10%;" class="sheet-baseinputbox" type="number" name="attr_OCCSKP" value=0><input float="left" style="width:10%;" class="sheet-perinputbox" type="number" name="attr_OCCSKPL" value=0><input disabled="true" type="hidden" type="number" name="attr_min_OCCs" value="@{min_IQ}+@{OCCSKP}+(@{OCCSKPL}*(@{LEVEL}-@{OCCSKLV}))"><input disabled="true" type="hidden" type="number" name="attr_min_OCCt" value="(((@{min_OCCs} + 98) - abs(@{min_OCCs} - 98) ) / 2)"><input float="left" style="width:11%;" class="sheet-sdinputbox" type="text" name="attr_OCCT" value="@{min_OCCt}" disabled="true" /> </fieldset> Produces this: Putting an entry on a new HTML line adds margin. Shouldn't it not care about returns much like all other HTML elements, or am I confused on it?
1486515402

Edited 1486516369
Brian
Sheet Author
API Scripter
Newlines in your source shouldn't  matter (except in between <textarea> tags and elements containing text with white-space:pre). However, it's worth noting that the HTML in your fieldset isn't actually what's rendered in your browser; the HTML you write is copied by the VTT into a new parent, and it ends up looking like: <fieldset class="repeating_occsk" style="display: none;"> <!-- contents of your fieldset --> </fieldset> <div class="repcontainer" data-groupname="repeating_occsk"> <div class="repitem" data-repid="-Abc123"> <div class="itemcontrol"> <button class="btn btn-danger pictos repcontrol_del">#</button> <a class="btn repcontrol_move">≡</a> </div> <!-- contents of your fieldset --> </div> </div> <div class="repcontrol" data-groupname="repeating_occsk"> <button class="btn repcontrol_edit">Modify</button> <button class="btn repcontrol_add">+Add</button> </div> It's possible there exists a corner-case bug in there. It's also worth noting that having a bunch of elements all floating can cause unexpected layout issues, especially when it comes to interactions with elements you didn't supply the syle for (eg, the .repcontainer, .repitem, and .itemcontrol). You seem to simply want everything in a row; is there any particular reason you've got everything floating to the left?
1486515975

Edited 1486516153
DXWarlock
Pro
Sheet Author
API Scripter
Ah that could explain it. Was driving me crazy. Not a HUGE deal, I can put it all into one line, just a pain to edit that way scrolling around. And I had the floats trying to see if I could force it. Trying floats, and display:inline/block/inline-block etc. Because my HTML/CSS expertise level is equal to "Average 1997 angelfire homepage user, then google the rest, and smash it with a big hammer of results until it works". :) My scripts and my character sheets are like DisneyWorld park props. They look good from the outside, inside they are just a mismash of chickenwire and LOTS of zipties.