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

Sheet: Rogue Trader Improved, need help with the new draggable roll buttons

September 09 (1 year ago)
Mago
Pro
Sheet Author

Hello forum, im one of the authors of the Rogue trader improved sheet 

https://wiki.roll20.net/Rogue_trader_improved

I have encountered a major issue and i don't know how to fix it 

It seems that some time ago Roll20 released an update that allows Roll buttons on the character sheets to be dragged down to the macro quick bar
https://wiki.roll20.net/Macro_Quick_Bar#Character_Sheets


This update has compromised the functionality of the RTI sheet, specifically the buttons that are inside the repeating fields on the Skill group sections
The macros in the buttons still work but the buttons themselves cannot be clicked directly.

After some careful clicking and observation the buttons work as intended but only if you click at the very edge of the button.

I have no idea how to fix this, there seems to be some type of conflict with the CSS of the sheet vs the Roll20 site.


Here is a link to the GitHub sheet code and CSS

https://github.com/Roll20/roll20-character-sheets/tree/master/Rogue%20Trader%20Improved


here is an HTML snip of one of the buttons, please help :(

            <div class="col" style="width:100%">

                <div class="quickborder">

                    <div class="skills">

                        <table style="width:100%;">

                            <tr>

                                <td style="width:50%;"><label style="text-align: center; cursor:help" title="Speak Language is used to communicate with others using the same language.&#10;However, communication with those using obscure dialects or cryptic, complex concepts &#10;will require a Test at an appropriate Difficulty&#10;&#10;Skill Groups:&#10;-Eldar&#10;-Explorator Binary&#10;-High Gothic&#10;-Low Gothic&#10;-Ork&#10;-Techna-Lingua&#10;-Trader’s Cant.&#10;&#10;-Skill Use: Free Action.">Speak Language (Int) &#128712;</label></td>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">Basic</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 7.5px">Trained</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">+10</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">+20</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">Talent</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">Mod</label></th>

                                <th style="height:10px;width:28px"><label style="text-align: center; font-size: 9px">Roll</label></th>

                            </tr>

                        </table>

                        <fieldset class="repeating_SpeakLanguage">

                            <table style="width:100%;">    

                            <tr>

                                <td style="width:50%;"><div class="item" style="width:100%;"><input name="attr_languagename" type="text" placeholder="Skill Name"></input></div></td>

                                <td><input style="width:28px" name="attr_language1" type="checkbox" value="0.5"></input></td>

                                <td><input style="width:28px" name="attr_language2" type="checkbox" value="0.5"></input></td>

                                <td><input style="width:28px" name="attr_language3" type="checkbox" value="10"></input></td>

                                <td><input style="width:28px" name="attr_language4" type="checkbox" value="10"></input></td>

                                <td><input style="text-align:center;width:28px" name="attr_languageTalentBonus" type="number" value="0"></input></td>

                                <td><input style="text-align:center;width:28px" name="attr_languageOtherBonus" type="number" value="0"></input></td>

                                <td><button name="roll_SpeakLanguage" type="roll" style="text-align:center;width:28px"

                                    value="&{template:custom} {{name=**@{character_name} Test Speak Language: @{languagename}**}} {{result=[[(@{language}+?{Modifier|0}-1d100cs1cf100)/10]] }}">

                                    <input name="attr_language" type="number" disabled value="(floor((@{language1}+@{language2})*@{Intelligence}))+@{language3}+@{language4}+@{languageTalentBonus}+@{languageOtherBonus}">

                                </input></button></td>

                            </tr>

                            </table>

                        </fieldset>

                    </div>

                </div>


September 09 (1 year ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

This is not an issue with the draggable buttons. This is because you have in input inside your button. Frankly this should never have worked. Anytime your mouse hovers over the part of the button with the input in it, it is actually hovering over the input, which does not have a click listener.

This fix is going to be to add a css rule like this:

button input{
  pointer-events: none;
}
September 09 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

I was startled to see an input inside a button. I don;t know what was going on before to allow this to work.

Note that the change to allow draggable buttons has been live for years - its not a recent change. As Scott says, the issue here is the input inspide the button which should never have worked.

Think about this: to enter the input and write new text, you have to click in the input. To make the button work, you have to click the button. Tjose two conflict.

Making the input non-clickable would mean the only way to enter it would be through tabbing into it or something similar. Since it's a disabled button, it's not meant to be editted. But if you use Scott's solution, I'd give the button a classm something like

<input name="attr_language" type="number" class="sheet-nope" disabled value="(floor((@{language1}+@{language2})*@{Intelligence}))+@{language3}+@{language4}+@{languageTalentBonus}+@{languageOtherBonus}">

Then you can limit the change Scott suggests to just that button:

button input.sheet-nope {
  pointer-events: none;
}

Though scott's solution of button input might be all that you need - that arrangement shouldn't be common.

September 10 (1 year ago)
Mago
Pro
Sheet Author

greatly appreciate the replies guys, i dont really know what changed since the sheet was uploaded in 2021
and it was working as intended back then.

i will try the solutions you propose

November 06 (1 year ago)

Edited November 06 (1 year ago)

My friend was having the same problem with the Rogue Trader sheet (not the improved one) which has the same input inside button problem.

I just applied Scott C's fix to the CSS and added to the game as a custom sheet and it worked perfectly.