Выровняйте переключатели по горизонтали в формах Django

Question

HI

Я хочу выровнять переключатели по горизонтали.По умолчанию формы django отображаются в вертикальном формате.

feature_type  = forms.TypedChoiceField(choices = formfields.FeatureType, widget = forms.RadioSelect)

Есть ли какой-нибудь специальный параметр, который мы можем передать для выравнивания переключателей?

Заранее спасибо

Answer 1

Это поведение RadioField. Если вы хотите, чтобы он отображался горизонтально, создайте горизонтальное средство визуализации, например, следующим образом:

from django.utils.safestring import mark_safe

class HorizontalRadioRenderer(forms.RadioSelect.renderer):
  def render(self):
    return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))


class ApprovalForm(forms.Form):
    approval = forms.ChoiceField(choices=APPROVAL_CHOICES,
                 initial=0,
                 widget=forms.RadioSelect(renderer=HorizontalRadioRenderer),
                                 )

Answer 2

Другой выход - изменить стиль отображения списка ul-> li: inline-block.Вы можете сделать что-то подобное

 <style>
 ul#youelementId li{
  display: inline-block;
  }
</style>

, надеюсь, это поможет следующему читателю.

Answer 3

Согласно Django docs 'attrs' - это словарь, содержащий атрибуты HTML, которые должны быть установлены в отображаемом виджете.

С учетом этого простое решение на основе форм будет выглядеть примерно так:следующее:

feature_type  = forms.TypedChoiceField(
    choices = formfields.FeatureType,
    widget = forms.RadioSelect(attrs={
        'style': 'display: inline-block'
    })
)

Answer 4

Модифицированные формы. RadioSelect:

class HorizontalRadioSelect(forms.RadioSelect):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        css_style = 'style="display: inline-block; margin-right: 10px;"'

        self.renderer.inner_html = '<li ' + css_style + '>{choice_value}{sub_widgets}</li>'

Работа на Python 3.4 со стандартным администратором Django 1.10

и Django-Suit (http://djangosuit.com/) (используется 2 стиля Bootstrap)

Не тестировалось наДжанго-Граппелли, пока что.