Уведомления

Группа в Telegram: @pythonsu
  • Начало
  • » Django
  • » Как изменить CSS - стиль для label в BooleanField [RSS Feed]

#1 Сен. 26, 2013 08:49:52

SoT
Зарегистрирован: 2012-12-12
Сообщения: 68
Репутация: +  4  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

Исходная проблема была в следующем: нужно было поместить label и checkbox данного поля в одну строчку. По умолчанию Boolean Field отрисовывается следующим образом:

<label>Название</label>
<input .... />
Проблема решается с помощью Css - у элемента input указываем свойство float:left. В других проектах всё работает, но в данном проекте в Css Bootstrap прописанно для label display:block, поэтому label не прилепляется к предыдущей стоке. Как применить Css стиль только к одному отрисовываемому label у ( не затрагивая остальные для которые display : block нужен) ? Например к input можно подключить Css стили через виджет BooleanField передав ему название класса стиля через attr, но на label это не распространяется.

Офлайн

#2 Сен. 26, 2013 11:03:11

FishHook
От:
Зарегистрирован: 2011-01-08
Сообщения: 8312
Репутация: +  568  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

ИМХО, годным решением в случае с бутстрапами будет не использовать родной джанговский рендеринг форм, а запилить свой, красивый и кошерный. Всё просто. Как-то так:
1. Создаем шаблон в файле form_render.py

<form class="form-horizontal" role="form" method="post">{% csrf_token %}
 <fieldset>
    <legend>{{ legend }}</legend>
    {% for field in form %}
        <div class="form-group">
        {% if not field.is_hidden %}
          <label class="col-lg-2 control-label">{{ field.label_tag }}</label>
        {% endif %}
          
               <div class="col-lg-10">
                {{ field }}
                {{ field.errors.0 }}
              </div>
        </div>
    {% endfor %}
     <div class="form-group">
          <label class="col-lg-2 control-label"></label>
           <div class="col-lg-10">
                <input type="submit" class="btn btn-primary" value="Отправить" >
           </div>
     </div>
 </fieldset>
</form>

Понятно, что Вы можете тут наворотить чего душа пожелает, это только пример.

2. Юзаем
 {% include "form_render.html" with form=form legend="Новое сообщение" %}



Офлайн

#3 Сен. 26, 2013 22:42:03

SoT
Зарегистрирован: 2012-12-12
Сообщения: 68
Репутация: +  4  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

Спасибо за решение - не знал про include, буду восполнять этот пробел в документации.
Хотел спросить про вот этот момент :

FishHook
1. Создаем шаблон в файле form_render.py
Мы должны создать не form_render.py а form_render.html и поместить его в темплейты?

Офлайн

#4 Сен. 27, 2013 09:10:20

FishHook
От:
Зарегистрирован: 2011-01-08
Сообщения: 8312
Репутация: +  568  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

SoT
Мы должны создать не form_render.py а form_render.html и поместить его в темплейты?
Разумеется html и естественно в шаблонах. У меня ошибка.



Офлайн

#5 Июль 10, 2015 14:11:58

dezinfo
Зарегистрирован: 2015-05-23
Сообщения: 52
Репутация: +  0  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

FishHook
2. Юзаем

Добрый день.

Как применить стиль для самих полей формы {{ field }}?? Например что бы class = ‘form-control’

Офлайн

#6 Июль 10, 2015 14:57:23

slav0nic
Команда
От: dp.ua
Зарегистрирован: 2006-05-07
Сообщения: 2260
Репутация: +  41  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

dezinfo
я https://github.com/kmike/django-widget-tweaks/ юзаю
а вообще есть crispyform, django-bootsrtap и тп

Офлайн

#7 Июль 10, 2015 15:17:15

FishHook
От:
Зарегистрирован: 2011-01-08
Сообщения: 8312
Репутация: +  568  -
Профиль   Отправить e-mail  

Как изменить CSS - стиль для label в BooleanField

dezinfo
Как применить стиль для самих полей формы {{ field }}?? Например что бы class = ‘form-control’
field.widget.attrs["class"] = "form-conrol"



Офлайн

  • Начало
  • » Django
  • » Как изменить CSS - стиль для label в BooleanField[RSS Feed]

Board footer

Модераторировать

Powered by DjangoBB

Lo-Fi Version