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

Multiple choice boxes

1471445918

Edited 1471446250
[Deleted]
Sheet Author
Hello again. I'm trying to figure out how to set a dropdown box, or rather, several of them, side by side. I've seen this done in sheet like the pathfinder sheet and they seem to be able to control how wide the boxes are. I can not. The boxes are too wide to be of any real use in the capacity I have planned. I've tried writing their size into the css, using style= in both pixels and percents, but all I can do is stack them over each other without decreasing the size :/ The code have so far for this section is: <tr><td style="color: rgb(189, 191, 188); text-shadow: 2px 2px #000; font-family: Arial; font-size: .8125rem; font-weight: bold;"><b>Class:</b><br><label class="sheet-small-label2" style="width: 74px;">         <select name="attr_class1" title="@{class1}">             <option value="0" selected>None</option>             <option value="1">Warrior</option>             <option value="2">Fighter</option>             <option value="3">Ranger</option>             <option vlaue="4">Paladin</option>         </select></label>     <label class="sheet-small-label2" style="width: 74px;">         <select name="attr_class2" title="@{class2}">             <option value="0" selected>None</option>             <option value="1">Wizard</option>             <option value="2">Mage</option>         </select></label>     <label class="sheet-small-label2" style="width: 74px;">         <select name="attr_class3" title="@{class3}">             <option value="0" selected>None</option>             <option value="1">Priest</option>             <option value="2">Cleric</option>             <option value="3">Druid</option>         </select></label>     <label class="sheet-small-label2" style="width: 74px;">         <select name="attr_class4" title="@{class4}">             <option value="0" selected>None</option>             <option value="1">Rogue</option>             <option value="2">Thief</option>             <option value="3">Bard</option>         </select></label>     <label class="sheet-small-label2" style="width: 74px;">         <select name="attr_class5" title="@{class5}">             <option value="0" selected>None</option>             <option value="1">Psion</option>             <option value="2">W. Talent</option>         </select></label>     </td></tr>
Have you tried applying a style to the <select> itself?
Hmm.... no, I have not. I hadn't even considered that as possible. I'll do that now and get back to you :) Thanks!
AHAHHAHAHAHAHAAHA it works! Florpin Graphnard, thank you! That was driving me nuts.
Happy to help! :-)
Seth, would you mind sharing your final code? I might find it useful and it would be nice to SEE how you solved your problem... Thanks!
HTML <tr><td style="color: rgb(189, 191, 188); text-shadow: 2px 2px #000; font-family: Arial; font-size: .8125rem; font-weight: bold;"><b>Class:</b><br><label class="sheet-small-label1" style="width: 72px;">         <select name="attr_class1" title="@{class1}">             <option value="None" selected>None</option>             <option value="Warrior">Warrior</option>             <option value="Fighter">Fighter</option>             <option value="Ranger">Ranger</option>             <option vlaue="Paladin">Paladin</option>         </select></label>     <label class="sheet-small-label3" style="width: 85px;">         <select name="attr_class2" title="@{class2}">             <option value="None" selected>None</option>             <option value="Wizard">Wizard</option>             <option value="Specialist">Specialist</option>             <option value="Mage">Mage</option>         </select></label>     <label class="sheet-small-label2" style="width: 63px;">         <select name="attr_class3" title="@{class3}">             <option value="None" selected>None</option>             <option value="Priest">Priest</option>             <option value="Cleric">Cleric</option>             <option value="Druid">Druid</option>         </select></label>     <label class="sheet-small-label4" style="width: 67px;">         <select name="attr_class4" title="@{class4}">             <option value="None" selected>None</option>             <option value="Rogue">Rogue</option>             <option value="Thief">Thief</option>             <option value="Bard">Bard</option>         </select></label>     <label class="sheet-small-label5" style="width: 105px;">         <select name="attr_class5" title="@{class5}">             <option value="None" selected>None</option>             <option value="Psion">Psion</option>             <option value="Wild Talent">Wild Talent</option>         </select></label>     </td></tr> CSS .sheet-small-label1 {     display: inline-block;     padding: .5em .07em 0em .07em;     margin: .75rem .4em 1.125rem .4em;     height: 1.85em;     width: 72px;     vertical-align: middle;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label1  span {     padding: .5em .07em 0em .07em;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         float:left; /* floats but 100% wide. */     /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label1  input::-moz-focus-inner {     padding:0px; } .sheet-small-label1 select {     margin-top:-2px;     width: 72px;     border: .5px; } .sheet-small-label2 {     display: inline-block;     padding: .5em .07em 0em .07em;     margin: .75rem .4em 1.125rem .4em;     height: 1.85em;     width: 63px;     vertical-align: middle;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label2  span {     padding: .5em .07em 0em .07em;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         float:left; /* floats but 100% wide. */     /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label2  input::-moz-focus-inner {     padding:0px; } .sheet-small-label2 select {     margin-top:-2px;     width: 63px;     border: .5px; } .sheet-small-label3 {     display: inline-block;     padding: .5em .07em 0em .07em;     margin: .75rem .4em 1.125rem .4em;     height: 1.85em;     width: 85px;     vertical-align: middle;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label3  span {     padding: .5em .07em 0em .07em;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         float:left; /* floats but 100% wide. */     /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label3  input::-moz-focus-inner {     padding:0px; } .sheet-small-label3 select {     margin-top:-2px;     width: 85px;     border: .5px; } .sheet-small-label4 {     display: inline-block;     padding: .5em .07em 0em .07em;     margin: .75rem .4em 1.125rem .4em;     height: 1.85em;     width: 67px;     vertical-align: middle;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label4  span {     padding: .5em .07em 0em .07em;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         float:left; /* floats but 100% wide. */     /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label4  input::-moz-focus-inner {     padding:0px; } .sheet-small-label4 select {     margin-top:-2px;     width: 67px;     border: .5px; } .sheet-small-label5 {     display: inline-block;     padding: .5em .07em 0em .07em;     margin: .75rem .4em 1.125rem .4em;     height: 1.85em;     width: 105px;     vertical-align: middle;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label5  span {     padding: .5em .07em 0em .07em;     text-align:center;     font-size: .85em;     font-style: italic;     font-weight: bold;         float:left; /* floats but 100% wide. */     /*firefox has to be squeezed */     -moz-margin-start:-2px;     -moz-margin-end:-2px; } .sheet-small-label5  input::-moz-focus-inner {     padding:0px; } .sheet-small-label5 select {     margin-top:-2px;     width: 105px;     border: .5px; } I needed to create several versions for multiple sizes to get everything to both fit and be legible. Thanks again guys :)