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:

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:

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

Is a non-traditional fading effect possible with scrolling?

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is it possible to swap two classes with each other using jQuery?

Utilizing flexbox, absolute positioning, and 100% height in web design

What is preventing the element from being positioned at the bottom of the container?

Tips for positioning Material Ui buttons beside a list of images

SwiperJS continuously applies additional right margin to every slide

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

Is the container in semantic ui being breached by a segment overflow?

Looking to create a format for displaying short comic strips in a grid pattern

Ways to increase the size of a div to match the maximum height of its parent container

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

How to arrange table data in Angular based on th values?

The true meaning of CSS3 transition is often misconstr

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

The field must be filled in if it has not been explicitly stated as optional

Achieving a transparent background color for a div without affecting the content with CSS

What is the best way to align the menu to the center

Django - Unable to upload PDF file despite having the correct file path