labels placed beneath evenly spaced radio buttons arranged horizontally

Question

labels placed beneath evenly spaced radio buttons arranged horizontally

When creating a user form, I am in need of multiple likert items to gauge opinions accurately. My project requires the use of the oTree library, which is closely integrated with django. It is essential that any solution implemented aligns with oTree as much as possible.

The RadioSelectHorizontal widget appears to be the best fit for this task. However, there are two key modifications required from the default setup:

The option labels ("agree", "neutral", etc.) must be positioned directly below the radio buttons.
The radio buttons need to be evenly spaced, ideally extending across the entire width of the page.

In comparison, the default appearance will display the labels between the radio buttons and provide minimal spacing based on label length:

https://i.sstatic.net/onuTQ.png

The code snippet provided is as follows:

question_1 = models.IntegerField(widget=widgets.RadioSelectHorizontal, 
                                 label="some question", 
                                 choices=[[1, "strongly disagree"], [2, "disagree"], [3, "neutral"], [4, "agree"], [5, "strongly agree"]])

What steps should I take to address these requirements?

The django documentation suggests various methods such as custom widgets or custom CSS. However, it seems that oTree may have some limitations compared to django.

For clarity, here is an example that satisfies both conditions:

https://i.sstatic.net/afFyw.png

css django otree

Answer 1

Answer №1

Before you can achieve the desired outcome, there are a few key steps to follow. This particular solution is effective for ensuring that labels are properly aligned either above or below buttons.

To begin, it's essential to have designated containers for housing the question, labels, and buttons. The approach I've taken draws inspiration from a helpful discussion thread. In my scenario, each question needed to be encapsulated within a table, with every button contained in a td element for optimal alignment.

table.TheTable td.buttonGroup{
    width: 70px;
    display: inline-block;
}

div .labelWrap{
    display: block;
    text-align: center;
    margin: 0 0.2em;
}

div .buttonWrap {
    display: block;
    text-align: center;
    margin: 0.5em auto;
}

After establishing this framework, it's important to note that the formfields must be arranged individually, with careful attention paid to aligning both the label and button elements separately.

<table>
  {{ for field in form }}
    <tr>                
      {{ for choice in field }}
      <td class="buttonGroup">
        <div class="buttonWrap"> {{ choice }} </div>
        <div class="labelWrap"> {{ choice.label }} </div>
      </td>
    </tr>
  {{ endfor }}
</table>

While additional adjustments for alignment and formatting may be necessary, these instructions focus specifically on achieving proper alignment between labels and buttons.

Answer 2

Before you can achieve the desired outcome, there are a few key steps to follow. This particular solution is effective for ensuring that labels are properly aligned either above or below buttons.

To begin, it's essential to have designated containers for housing the question, labels, and buttons. The approach I've taken draws inspiration from a helpful discussion thread. In my scenario, each question needed to be encapsulated within a table, with every button contained in a td element for optimal alignment.

table.TheTable td.buttonGroup{
    width: 70px;
    display: inline-block;
}

div .labelWrap{
    display: block;
    text-align: center;
    margin: 0 0.2em;
}

div .buttonWrap {
    display: block;
    text-align: center;
    margin: 0.5em auto;
}

After establishing this framework, it's important to note that the formfields must be arranged individually, with careful attention paid to aligning both the label and button elements separately.

<table>
  {{ for field in form }}
    <tr>                
      {{ for choice in field }}
      <td class="buttonGroup">
        <div class="buttonWrap"> {{ choice }} </div>
        <div class="labelWrap"> {{ choice.label }} </div>
      </td>
    </tr>
  {{ endfor }}
</table>

While additional adjustments for alignment and formatting may be necessary, these instructions focus specifically on achieving proper alignment between labels and buttons.

labels placed beneath evenly spaced radio buttons arranged horizontally

Answer №1

Similar questions

The focus is on the last row that was selected

What is the source of these additional pixels that appear when percentages are used for defining height?

How to align items to the left and center within a div?

Creating an inclusive h1 header with a logo: A step-by-step guide

My CSS nesting seems to be posing a problem - any idea what

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right

Assigning alphanumeric characters to the axis for identification purposes

How can I implement a jQuery slide down effect for a specific individual instance?

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

Axios issue: Cookies are not being transmitted

What is the process for integrating a custom control into the Django admin site?

flexible design using flexbox with image overflow and responsive footer

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Horizontal SWF's are providing spaces of white in between them

What is preventing relative paths from functioning with xsl:include?

Break up the content in table cells with a new line character

Impact on adjacent div

Minimize the gaps between items within a CSS grid design

I have multiple div containers on my webpage, and I'm looking for a way to dynamically load data into a specific div without having to refresh the entire page using PHP and Code

What is the method to convert Javascript values from pixels to percentages?