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

This extra space is driving me buggy!

1525216073

Edited 1525216465
DXWarlock
Pro
Sheet Author
API Scripter
This is probably something simple..just I am by far NOT a html/css expert :) Is there a way to remove the extra space between objects on a page that is created when not coding all on one line? For example: <input type='checkbox' checked='true' name='attr_OCCRBL' value='1'><button float="left" type='roll' value='!rb 1d100 [[@{OCCTr}]] 0 @{OCCRBL} @{OCCRSK}' name='roll_SkillCheck2' /></button> Gives me this (notice the space between the checkbox and the button): And this exact same code but on 2 lines: <input type='checkbox' checked='true' name='attr_OCCSBL' value='1'> <button float="left" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button> Gives me this(bigger space between them): This is what I can get if I just jam all the elements on the same line (the first 4 of them) they all get closer together: But the code is horrible to read or look at: <input type='checkbox' checked='true' name='attr_OCCRBL' value='1'><button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCTr}]] 0 @{OCCRBL} @{OCCRSK}' name='roll_SkillCheck2' /></button><input float="left" type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCRSKLV" value=1><input float="left" style="width:42%;" type="text" name="attr_OCCRSK" value=SkillName> How do I do fix these compounding extra spaces (they eat up more of my limited row space as I add more items in that row) without coding 1/4 of my character sheet as one long line of HTML code?
1525219953
Scott C.
Forum Champion
Sheet Author
API Scripter
what css do you have for those?
1525220501

Edited 1525220682
DXWarlock
Pro
Sheet Author
API Scripter
here is the HTML of the first 4 in the row that show it: <table class="sheet-Table1" width="100%;"> <tr> <fieldset class="repeating_occsk"> <input type='checkbox' checked='true' 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:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"> <input float="left" style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" value=SkillName> </fieldset> </tr> </table> and all the relevant CSS i believe: table.sheet-Table1 {     background-color: #DBDBDB;     border: 1px solid black;     width: 100%; } input[type=checkbox] {   zoom: 1.7; } th {     background-color: #586DCC;     color: white;     height: 10px;     border: 1px;     border: none; font-size: 18px; } table {     border: 1px solid #666666; } td {     font-size: 11px;     font-weight: bold;     padding: 0px;     margin: 0px; } button[type=roll].sheet-blank {     font-size: 15px;     background: #ebf1f6;     background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0);     border: 1px solid #424242;     border-radius: 5px;     margin: 0;     padding: 0em;     width: 20px;     height: 20px;     color: #616161; } button[type=roll].sheet-blank:hover {     color: #ACD2F2;     background: #ACD2F2;     border: 1px solid #424242;     margin: 0;     padding: 0em;     border-radius: 6px; }
1525221431

Edited 1525221622
Vince
Pro
Sheet Author
I've experienced this before and had to just settle on combioning elements on the same line when the whitespace was a bother. ;-( Some info here: <a href="https://stackoverflow.com/questions/5078239/how-do" rel="nofollow">https://stackoverflow.com/questions/5078239/how-do</a>... Following the advice from the link above, you should add font-size:0 to the parent element example; try adding this to your css fieldset.repeating_occsk {font-size:0;}
1525223702

Edited 1525224111
DXWarlock
Pro
Sheet Author
API Scripter
That didn't work, but the suggestion of add comments on that link does... &lt;fieldset class="repeating_occsk"&gt; &lt;input type='checkbox' checked='true' name='attr_OCCSBL' value='1'&gt;&lt;!-- --&gt;&lt;button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'&gt;&lt;/button&gt;&lt;!-- --&gt;&lt;input float="left" type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"&gt;&lt;!-- --&gt;&lt;input float="left" style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" value=SkillName&gt; &lt;/fieldset&gt; That fixes it, but thats very very strange I think... Im fighting for every pixel I can get horizontally, so time to add TONS of comment markers (err tags) :\
1525224039

Edited 1525224134
Vince
Pro
Sheet Author
fieldset.repeating_occsk {font-size:0;} worked in a quick jsfiddle test, but I think roll20 may sanitize fieldset and/or repeating_foo.&nbsp; Not sure. "comment markers" interesting.&nbsp; Glad you got it figured out.&nbsp; I may revisit the old problems I noticed.&nbsp; ;-)&nbsp;
1525238829

Edited 1525243708
Jakob
Pro
Sheet Author
API Scripter
Use CSS grid or flex instead of inline-boxes if you don't want to care about whitespace anymore. (Vince' solution also works, but luckily it's not 2002 anymore). EDIT: To be more precise, for this particular thing my suggestion would be to wrap everything in a div like this: &lt;fieldset class="repeating_occsk"&gt; &lt;div class="sheet-flex&gt; &lt;input type='checkbox' checked='checked' name='attr_OCCSBL' value='1'&gt; &lt;button" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'&gt;&lt;/button&gt; &lt;input type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"&gt; &lt;input style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" placeholder="SkillName"&gt; &lt;/div&gt; &lt;/fieldset&gt; (deleted all the useless float=left stuff!) and use .sheet-flex { display: flex } You could also set the display property directly on the .repitem, but it's more reusable if you do it this way. If you want to go further with what flexbox allows you to do, you can also set .sheet-skill { flex-grow: 1 } to have the text input grow dynamically to be as large as the container allows.
1525253085

Edited 1525253115
Natha
Roll20 Production Team
Sheet Author
API Scripter
Even with flex, it perhaps won't look equally distant because the native checkbox has some sort of "white space"/inner margin: Perhaps with some negative margin&nbsp; (like "margin-right: -Xpx;") on the checkbox ? Or maybe use&nbsp; pseudo check box (you'll be in more in control of how they look) ?
Refer to W3School CSS topics, one will help you out to resolve your issue