2

I have a table with various radio buttons in my html code in otree. However, the displayed buttons are super small and hence hard to click on for subjects. Is there a way to increase their size? This is my code so far:

{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Choice 1
{% endblock %}

{% block content %}
    <img src="{% static img_to_show %}"/>
    <table class="table">
        <tr>
            <th> </th><th> Amount </th><th> Game</th>
        </tr>
        {% for field in form %}
        <tr>
            <td>
                {{ field.label_tag }}
                {{ field.errors }}
            </td>
            <td><input type="radio" name="{{ field.html_name}}" value="True" required {% if field.value|stringformat:"s" == 'True' %}checked{% endif %}></td>
            <td><input type="radio" name="{{ field.html_name}}" value="False" required {% if field.value|stringformat:"s" == 'False' %}checked{% endif %}></td>
        </tr>
        {% endfor %}
    </table>
    {% next_button %}
{% endblock %}
TEC
  • 53
  • 7
  • Another related problem would be to increase the size of the clickable area, so that the user does not have to hit the radio button directly. It is useful to know how to modify the way {{ formfields }} is displayed. – deps_stats Apr 01 '22 at 02:49

1 Answers1

3

this one will scale them:

{% block styles %}
   <style>
      input[type=radio] {
        transform: scale(1.5);
        margin:10px;
      }
   </style>
{% endblock %}
Philipp Chapkovski
  • 1,949
  • 3
  • 22
  • 43