Avoiding carriage returns

I have a self-changing button that insists on having a line all to itself instead of sitting neatly between other things. Here's the code: &lt;fieldset class="repeating_repF"&gt; &lt;input name="attr_FR" type="number" style="width:50px; background-color:rgba(0, 0, 0, 0.0); border-color:rgba(0, 0, 0, 0.0);" value="1" min="0" max=2 /&gt; &lt;input class="sheet-th sheet-th0" type="checkbox" name="attr_FR" value="0"&gt;&lt;!-- TH0 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th1" type="checkbox" name="attr_FR" value="1"&gt;&lt;!-- TH1 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th2" type="checkbox" name="attr_FR" value="2"&gt;&lt;!-- TH2 --&gt; &lt;div class="sheet-thshow-TH0"&gt;&lt;button type="action" type="number" name="act_frup"&gt;&lt;img src="<a href="https://i.imgur.com/pEcetrP.png&quot;&gt;&lt;/button" rel="nofollow">https://i.imgur.com/pEcetrP.png"&gt;&lt;/button</a>&gt;&nbsp; &lt;/div&gt; &lt;div class="sheet-thshow-TH1"&gt;&lt;button type="action" type="number" name="act_frup"&gt;&lt;img src="<a href="https://i.imgur.com/KJBcKiT.png&quot;&gt;&lt;/button" rel="nofollow">https://i.imgur.com/KJBcKiT.png"&gt;&lt;/button</a>&gt;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;div class="sheet-thshow-TH2"&gt;&lt;button type="action" type="number" name="act_frup"&gt;&lt;img src="<a href="https://i.imgur.com/X5w0cGn.png&quot;&gt;&lt;/button" rel="nofollow">https://i.imgur.com/X5w0cGn.png"&gt;&lt;/button</a>&gt;&nbsp; &lt;/div&gt; Whatever &lt;/fieldset&gt; &lt;script type="text/worker"&gt; on('clicked:repeating_repF:frup', function() { &nbsp; &nbsp; getAttrs(['repeating_repF_FR'], function(values) { &nbsp; &nbsp; &nbsp; &nbsp; const repeating_repF_FRnew = +values.repeating_repF_FR || 0; &nbsp; &nbsp; &nbsp; &nbsp; setAttrs({ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"repeating_repF_FR": (repeating_repF_FRnew + 1) % 3 &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp;}); }); &lt;/script&gt; /*----------- Three Display Setup -------------*/ /*this hides the contents of each section by default*/ .charsheet div[class^="sheet-thshow"] { &nbsp; display: none; } /*this shows the tw content when the appropriate input field is selected*/ .charsheet input.sheet-th0:checked ~ div.sheet-thshow-TH0, .charsheet input.sheet-th1:checked ~ div.sheet-thshow-TH1, .charsheet input.sheet-th2:checked ~ div.sheet-thshow-TH2 { &nbsp; display: block; } /*this hides the button*/ .charsheet input.sheet-th { &nbsp; width: 0px; &nbsp; height: 0px; &nbsp; opacity: 0; &nbsp; display: none; } /*----------- End Three Display Setup -----------*/ This produces: The '0' is a number attribute (attr_FR) that can only be set to 0, 1 or 2. The white circle is a button. When the button is clicked the sheetworker increases the value of the attribute by 1 but within mod 3 (so 0 changes to 1, 1 changes to 2 and 2 changes to 0). There are three instances of the button (each with a different image) and the attribute value with the CSS controls which is displayed. I.e. Clicking on the white circle increases FR to 1 which then displays the button as a green circle. Clicking the green circle changes FR to 2 which displays a red circle. Clicking the red circle changes FR back to 0 and displays the white circle again. This is all working fine, but what I need to do is display the attribute, the button and the 'Whatever' text all on the same line. I can't use tables (at least not the old &lt;tr&gt; &lt;td&gt; way) because it's all in a repeating section and that would stop the sheetworker doing its thing. Tried columns (i.e. &lt;div class="2colrow"&gt;) but they don't work here - just puts everything in the first column. Any ideas on how I cane make them all sit on the same line? Would CSS Grid work? Or is there a different way to achieve this button effect that would avoid the carriage return issue?

I can't think about your problem right now, but I notice two big problems. First, event lines of workers (the first line) must be entirely lower case. This on('clicked:repeating_rep F :frup', function() { should be on('clicked:repeating_rep f :frup', function() { It might not cause a problem all the time, but it will at some point and you'll have no idea why the button isnt working. Secondly, checkboxes cant have a value of 0. &lt;input class="sheet-th sheet-th0" type="checkbox" name="attr_FR" value="0"&gt;&lt;!-- TH0 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th1" type="checkbox" name="attr_FR" value="1"&gt;&lt;!-- TH1 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th2" type="checkbox" name="attr_FR" value="2"&gt;&lt;!-- TH2 --&gt; That first checkbox wont do anything. A value of 0 is the same as being unchecked. You might want these boxes to be a radio button, like: &lt;input class="sheet-th sheet-th0" type="radio" name="attr_FR" value="0"&gt;&lt;!-- TH0 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th1" type="radio" name="attr_FR" value="1"&gt;&lt;!-- TH1 --&gt;&nbsp; &nbsp;&nbsp; &lt;input class="sheet-th sheet-th2" type="radio" name="attr_FR" value="2"&gt;&lt;!-- TH2 --&gt;

button issue; try changing from display:block to display:inline .charsheet input.sheet-th0:checked ~ div.sheet-thshow-TH0, .charsheet input.sheet-th1:checked ~ div.sheet-thshow-TH1, .charsheet input.sheet-th2:checked ~ div.sheet-thshow-TH2 { display: inline; }

First, event lines of workers (the first line) must be entirely lower case. Thanks for the tip. That might explain another issue I've been having! Secondly, checkboxes cant have a value of 0.&nbsp; That first checkbox wont do anything. &nbsp;A value of 0 is the same as being unchecked. I honestly don't really know how this trick works. I guess an unchecked checkbox is just another state to work with? Maybe some day I'll get my head around it, but probably needs a much better grounding in html than I've gleaned so far!

vÍnce said: button issue; try changing from display:block to display:inline .charsheet input.sheet-th0:checked ~ div.sheet-thshow-TH0, .charsheet input.sheet-th1:checked ~ div.sheet-thshow-TH1, .charsheet input.sheet-th2:checked ~ div.sheet-thshow-TH2 { display: inline; } Amazing. Thank you!!

Aero said: I honestly don't really know how this trick works. I guess an unchecked checkbox is just another state to work with? Maybe some day I'll get my head around it, but probably needs a much better grounding in html than I've gleaned so far! I'm not sure what you'e asking here, but checkbixes have two states: unchecked, where they have a value of 0, and checked, where by default, they have a value of "On". You can manually set a checkbox value, with value="1" (or whatever value you want). You can set it to any value, but if you set it to "0", you are giving the checkbox the same value when unchecked or checked, which means the checkbox always acts as if unchecked. Another thing: since checkboxes can only have 2 values (the checked value, and unchecked value which is always zero), there is no point hacing 3 checkboxes with different values like you have in your code. Only one of those chekboxes can ever be true. (Interestingly, there are situations on roll20 to do this, but it's kind of anadvanced technique, and you don't want to be doing it unless you know what you're doing.) On the other hand, you can have multiple radio boxes with the same name. In fact, you have to. With a radio box, you are defining all the possible values that can be selected, and must include a radio input for each possible value.

GiGs said: Aero said: I honestly don't really know how this trick works. I guess an unchecked checkbox is just another state to work with? Maybe some day I'll get my head around it, but probably needs a much better grounding in html than I've gleaned so far! I'm not sure what you'e asking here, but checkbixes have two states: unchecked, where they have a value of 0, and checked, where by default, they have a value of "On". You can manually set a checkbox value, with value="1" (or whatever value you want). You can set it to any value, but if you set it to "0", you are giving the checkbox the same value when unchecked or checked, which means the checkbox always acts as if unchecked. Another thing: since checkboxes can only have 2 values (the checked value, and unchecked value which is always zero), there is no point hacing 3 checkboxes with different values like you have in your code. Only one of those chekboxes can ever be true. (Interestingly, there are situations on roll20 to do this, but it's kind of anadvanced technique, and you don't want to be doing it unless you know what you're doing.) On the other hand, you can have multiple radio boxes with the same name. In fact, you have to. With a radio box, you are defining all the possible values that can be selected, and must include a radio input for each possible value. Oh I wasn't asking about the checkbox set-up – that bit works fine. I couldn't possibly doubt anything you've said here. All I know is that somehow it works!