Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

This extra space is driving me buggy!

May 01 (6 years ago)

Edited May 01 (6 years ago)
DXWarlock
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?

May 02 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
what css do you have for those?
May 02 (6 years ago)

Edited May 02 (6 years ago)
DXWarlock
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;
}

May 02 (6 years ago)

Edited May 02 (6 years ago)
vÍnce
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: https://stackoverflow.com/questions/5078239/how-do...
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;}
May 02 (6 years ago)

Edited May 02 (6 years ago)
DXWarlock
Sheet Author
API Scripter
That didn't work, but the suggestion of add comments on that link does...

      <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>
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) :\
May 02 (6 years ago)

Edited May 02 (6 years ago)
vÍnce
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.  Not sure.
"comment markers" interesting.  Glad you got it figured out.  I may revisit the old problems I noticed.  ;-) 
May 02 (6 years ago)

Edited May 02 (6 years ago)
Jakob
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:
      <fieldset class="repeating_occsk">
         <div class="sheet-flex>
           <input type='checkbox' checked='checked' name='attr_OCCSBL' value='1'>
	   <button" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button>
           <input type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1">
           <input style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" placeholder="SkillName">
         </div>
      </fieldset>
(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.
May 02 (6 years ago)

Edited May 02 (6 years ago)
Natha
KS Backer
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  (like "margin-right: -Xpx;") on the checkbox ?
Or maybe use 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