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

Macro: Rolling alternate dice via a dropbown menu in a repeating field?

1653992984
Daniel S.
Pro
Marketplace Creator
Sheet Author
Apologies if this is answered somewhere. I read through the Macro Roll20 Guide and a few forum posts. Found something about queu's, but not sure if this specific instance is possible. Thought I'd ask in case it's not supported before I alter the sheet code. Here's what I'm trying to do: This is what the "table" and row would look like on my sheet. <a href="https://www.dropbox.com/s/ey5i8zi7dttj2mz/Screen%20Shot%202022-05-31%20at%206.13.25%20AM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/ey5i8zi7dttj2mz/Screen%20Shot%202022-05-31%20at%206.13.25%20AM.png?dl=0</a> The idea would be for the red outlined parts to have a openable menu like the 5e sheet does here <a href="https://capture.dropbox.com/hLG98gQgyjM6wvz8" rel="nofollow">https://capture.dropbox.com/hLG98gQgyjM6wvz8</a> Then I could pick from "2d6, d4d6, d4d4, d8d6, d8d8", and have the macro use those dice when rolling, when I click on a roll button (without being prompted to type in or select from a pop-up menu which dice are being used. Macros are for saving time right?). If I wrote those into an input = text field, I'm not sure that the macro would work right. Maybe if the field was "1d6 + 1d6" then it could be referenced? but that takes up a lot more width on the table. ------------- From what I could find in the 'Building Character Sheets' guide, I don't see html support for a pop up menu select thing like what I'm seeing in the 5e sheet there. So also curious how that's done and if there's a way to implement that via javascript or whatever. I currently have this, which references the repeating row sections when rolling the button at the end. <a href="https://capture.dropbox.com/iaCGL7YyZpbTKRC8" rel="nofollow">https://capture.dropbox.com/iaCGL7YyZpbTKRC8</a> The macro for that (inside the html) is:&nbsp; &lt;button type="roll" value= &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '&amp;{template:default} {{name=@{character_name} @{weapon} }} {{attack=[[2d6 + @{skirmishattack}]] [[2d6 + @{skirmishattack}]][[2d6 + @{skirmishattack}]]}} {{Damage=@{cutdamage} , @{thrustdamage} + [[1d6]][[1d6]][[1d6]]}} {{Range=@{range}}} {{Defense=[[2d6 + @{skirmishdefense}]][[2d6 + @{skirmishdefense}]][[2d6 + @{skirmishdefense}]]}} {{Parry/Block=@{parryblock}}} {{Notes=@{other}}} ' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="roll_weaponrepeatingbutton"&gt;&lt;/button&gt; If there's a better solution I'm missing as well, it'd be much appreciated. Thanks!
1653993131

Edited 1653993424
GiGs
Pro
Sheet Author
API Scripter
A roll button value can include everything that you include in a normal roll. You can include a query there for the dice choice. For something like d4d6 you'd want to put the first d4 in inline roll brackets. So something like [[ ?{How many dice?| 2d6| d4 d6,[[d4]]d6| d4 d4,[[d4]]d4| d8 d8,[[d8]]d8} ]] where there's a comma, the bit before it is what gets displayed to the player, and the bit after the comma is what the dice value actually uses. The outer [[ ]] brackets are oiutside the query, because they'd otherwise be repeated inside on every row.
1653993579

Edited 1653993643
GiGs
Pro
Sheet Author
API Scripter
Looking at your first screenshot, the macro wont work if you use strings like 'd8d8' on the character sheet. The dice parser won't know what to do with that. You'll either need to have the input contain [[d8]]d8 or use a second hidden attribute which includes the above value.
1653995282

Edited 1653995292
Daniel S.
Pro
Marketplace Creator
Sheet Author
Thanks. Might take me a bit to make sense of this. What would using a hidden attribute look like?
1654005303

Edited 1654005315
GiGs
Pro
Sheet Author
API Scripter
Hidden attributes look exactly the same as normal inputs, except they have type="hidden" The important part to answer before deciding if that's necessary and how it should be created, is how are you creating the value in the Dice column?
1654034855

Edited 1654036434
Daniel S.
Pro
Marketplace Creator
Sheet Author
I did some more reading, etc. 1. It looks like creating the dropdown menu with a media query is doable enough. However, I'm specifically trying to avoid the tedium of the extra clicks by including the dice choice in the character sheet and macro already (via a dropdown menu within the repeating row ideally, or possibly via text like "d4d6" or "d8d6" in an input text or hidden field which means something else?) 2. I read about the hidden variables. Can you have multiple hidden options for the same input field? So that if d6d6, d4d6, or d8d6 was typed in, each corresponded to a different hidden value which could be called on in a macro? Or perhaps have a dropdown menu with the dice options, and selecting one links it to a hidden variable? I'm a bit lost on how one would actually implement a hidden value, if the variable could change.
1654064595
GiGs
Pro
Sheet Author
API Scripter
Your mention of m4edia queries makes me wonder if you have been looking for help on purely roll20 sites. Many features that wqork on other webpages won't work on Roll20. The Roll20 wiki is the place to look for assistance. Regarding your second question: it looks like you are needing a sheet worker. But it's hard to know the best advice to give, because you havent answered my question.
1654085678
Daniel S.
Pro
Marketplace Creator
Sheet Author
I've been scouring the roll20 wiki articles and forum posts pretty much exclusively. I think the problem is I don't know how to answer the question, or what that means exactly. I think you're referring to this?: (The question)...is how are you creating the value in the Dice column? The current html button is this &nbsp; &nbsp; &lt;button type="roll" value= &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '&amp;{template:default} {{name=@{character_name} @{weapon} }} {{attack=[[2d6 + @{skirmishattack}]] [[2d6 + @{skirmishattack}]][[2d6 + @{skirmishattack}]]}} {{Damage=@{cutdamage} , @{thrustdamage} + [[1d6]][[1d6]][[1d6]]}} {{Extra Damage Dice= [1](`/r 1d6) [2](`/r 2d6) [3](`/r 3d6) [4](`/r 4d6) [5](`/r 5d6) [6](`/r 6d6) }} {{Reach=@{range}}} {{Defense=[[2d6 + @{skirmishdefense}]][[2d6 + @{skirmishdefense}]][[2d6 + @{skirmishdefense}]]}} {{Parry/Block=@{parryblock}}} {{Notes=@{other}}} ' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="roll_weaponrepeatingbutton"&gt;&lt;/button&gt;&lt;/span&gt;
1654088821
GiGs
Pro
Sheet Author
API Scripter
That's the correct question, but it's not a Roll20 question. It's a game system question. Forget about roll20 and imagine I'm joining your gametable. When I want to use a weapon, how do I decide what dice to roll? Brining it back to roll20, what do the different dice in Attack, damage, Extra Damage, Defence, ParryBlock, etc actually do?
1654135940
Daniel S.
Pro
Marketplace Creator
Sheet Author
Okay, I see. Thanks for clarifying. Basically, when choosing what weapon to equip, some weapons use different dice if they're better at swinging attacks, thrusting attacks, or parrying/blocking. So it would be filled in when choosing the weapon, but would for the most part remain constant after that. For example, a scimitar might roll a d8 + d6 for cutting/swinging attacks, but only a d4 + d6 for parrying. A dagger might roll 2d6 for swinging and thrusting but only parry with 2d4.
1654152633
GiGs
Pro
Sheet Author
API Scripter
Do you have a preset list of weapons and dice, or is there flexibility over the dice that can be entered? I'm basically asking if you can use a select to pick the weapon, and then autofill the dice and other entries from there? If so, that can be done with a sheet worker, and having a preset list of dice makes it easier to solve your original problem - you wouldnt need a query to ask for dice, or worry about the syntax of d8d8 vs d8[[d8]] - that can be automatically handled by the sheet. If not, we need a different approach.
1654153644
Daniel S.
Pro
Marketplace Creator
Sheet Author
I'd be having a preset list of dice.&nbsp; Sometimes in combat you "drop" the second die and only get to roll with one die. And sometimes you add a d6. (based on weapon reach, which changes relative to an opponent). So maybe something somewhere for those. But for now, getting the preset weapons which use different but predetermined dice for swinging, thrusting, and parrying/defending would be the priority, as that's mostly what rolls would be used.
1654158802

Edited 1654158995
GiGs
Pro
Sheet Author
API Scripter
The most straightforward way to handle that then would be a sheet worker linked to the weapon name, something like on('change:weapon_name', function() { getAttrs(['weapon_name'], function(values) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const weapon = values.weapon_name; const weapon_values = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;none: {damage_disable: "1d6", damage_value: "1d6", attack_display: "1d4d4", attack_value: "[[(1+?reach Mod?|0})d4]]d4"}, dagger: { /* insert values */ }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; const output = weapon_values[weapon]; setAttrs({output}); }); }); For each type of value, attack, damage, reach, defence, etc., you have two values: one visible one (attack_display, reach_display, etc) and one hidden _value. The display is what you show visibly on the character sheet. The hidden value is what the button macros actually use to make their attacks (and have use the [[1d6]]d6 syntax, and as seen above can contain queries if you need to modify the dice up or down by a d6). Note that the keys in the object above (damage_display, damage_value, etc) must exactly match attribute names on your character sheet. If I knew weapon stats, the attribute names on your sheet, and the various buttons you use, I could make a more comprehensive example but this should give a good starting point. Since this technique crops up a lot, and I've written a few variations of it over the years, I'll have to add a post about this to my site.
1654162558

Edited 1654162613
Daniel S.
Pro
Marketplace Creator
Sheet Author
Alright thanks. I'm less familiar with breaking down the sheet workers. I think I'd probably add a checkbox or something similar to the repeating weapon row rather than resort to a popup dropdown query thing. I'd prefer to avoid those at all cost. Even a chat menu button that switches to 1d6 or an extra d6 would be better than a radial thing I think. This is the full sheet. The html for the weapon table starts at line 156. <a href="https://github.com/Roll20/roll20-character-sheets/blob/master/Duels%20of%20Dreams%20-%20DODAS/DODAS.html" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/blob/master/Duels%20of%20Dreams%20-%20DODAS/DODAS.html</a> Have implemented your prior suggested hidden button improvements as well to the repeating weapon button part, but haven't pushed that to Github yet as I'm making some other changes at the moment as well.
1654163851
GiGs
Pro
Sheet Author
API Scripter
If it's always a 1d6 change, a checkbox is an excellent way to go. One thing to bear in mind: if it's possible to do, players will often minimise the character sheet and have separate macros or token actions for their attacks. A checkbox on the sheet, rather than a popup, would mean they have to keep the sheet open for their rolls. Is that okay?
1654214036
Daniel S.
Pro
Marketplace Creator
Sheet Author
I think it's okay since it's not happening super often. But I suppose an alternate macro that references the sheet would be neat as well.
1654996497
Daniel S.
Pro
Marketplace Creator
Sheet Author
It looks like, after some hunting through the html and css, that the 5e sheet has some dropdown stuff via a select menu with options. Am I correct in understanding then that I could have some dropdown selectable things like "2d6" or "d8d6", and then link to a hidden attribute via value = "@{hidden_modifierdice}"? Am I missing something here that makes the 5e sheet work like it does? Not sure if that data-i18n is important. This is the section I'm referencing. &lt;fieldset class="repeating_attack"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="attack"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input class="options-flag" type="checkbox" name="attr_options-flag" checked="checked"&gt;&lt;span&gt;y&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="options"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span data-i18n="name:-u"&gt;NAME:&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_atkname"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &lt;!--starts here--&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="row"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="checkbox" name="attr_atkflag" value="{{attack=1}}" checked="checked"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span data-i18n="attack:-u"&gt;ATTACK:&lt;/span&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select name="attr_atkattr_base"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{strength_mod}" selected="selected" data-i18n="str-u"&gt;STR&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{dexterity_mod}" data-i18n="dex-u"&gt;DEX&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{constitution_mod}" data-i18n="con-u"&gt;CON&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{intelligence_mod}" data-i18n="int-u"&gt;INT&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{wisdom_mod}" data-i18n="wis-u"&gt;WIS&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="@{charisma_mod}" data-i18n="cha-u"&gt;CHA&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="spell" data-i18n="spell-u"&gt;SPELL&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="0"&gt;-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &lt;!--etc--&gt; <a href="https://capture.dropbox.com/hLG98gQgyjM6wvz8" rel="nofollow">https://capture.dropbox.com/hLG98gQgyjM6wvz8</a> <a href="https://www.dropbox.com/s/x4tfjh1kbduszis/Screen%20Shot%202022-06-11%20at%2012.50.36%20PM.png?dl=0" rel="nofollow">https://www.dropbox.com/s/x4tfjh1kbduszis/Screen%20Shot%202022-06-11%20at%2012.50.36%20PM.png?dl=0</a>
1655005113

Edited 1655005163
Daniel S.
Pro
Marketplace Creator
Sheet Author
So far managed to get the thing to show up, but the styling doesn't line up. And not sure if each thing can store the hidden attribute for modified dice or not. <a href="https://capture.dropbox.com/NStoUtjaSm9gXzpi" rel="nofollow">https://capture.dropbox.com/NStoUtjaSm9gXzpi</a> <a href="https://capture.dropbox.com/GN1U1VvmSTBOKnT4" rel="nofollow">https://capture.dropbox.com/GN1U1VvmSTBOKnT4</a> &nbsp;&lt;fieldset class="repeating_weapons"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="wptfillrepeating"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_weapon" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_range" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_hand" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_weaponactionpointmodifier" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_cptotal" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_cutdamage" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_cutattack" value=""&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; replace with dropdown menu --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;select name="attr_cutattack"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="STR" selected="selected"&gt;STR&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="DEX"&gt;DEX&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="d"&gt;CON&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="f"&gt;INT&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="s"&gt;WIS&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="d"&gt;CHA&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="f"&gt;SPELL&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="0"&gt;-&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; etc...
1655035053
GiGs
Pro
Sheet Author
API Scripter
I'm not really sure what your issue is, you seem to be mentioning several things at once. To clear up a couple of things though: The data-i18n stuff is just for translations. The choice a person makes in a select is just an attribute value. It can be used in any way that attribute values are used. Sometimes you need to make a copy of an attribute with type="hidden" (especially with selects). Hidden inputs are special. How are you getting the dropdown to show up like that? It's nice styling, and selects in Roll20 are often a bit more basic than that. It's contents also dont match the option values in the select you are showing. Your last screenshot shows some misilgned elements, but it's hard to know what the issue is there (if there is one), without seeing the HTML and the CSS for it. Dont share code as a screenshot - share as editable code.