Как сделать горизонтальную форму с деформацией 2?

Я использую deform 2 вместе с Bootstrap 3 для отображения некоторых форм, и я хочу для создания горизонтальной формы, как показано здесь, но все примеры на демо-сайт, не является примером горизонтальной формы (с меткой рядом с элементом ввода).

Я пробовал использовать form_class="form-horizontal" и bootstrap_form_style="form-horizontal"(deform_bootstrap). При использовании вышеизложенного он добавляет класс form-horizontal, однако я не хочу просто добавлять класс к элементу формы.

Как добавить остальные имена классов к остальной части формы, чтобы сделать ее горизонтальной формой, как на загрузочный сайт?


python forms css twitter-bootstrap deform
person Renier    schedule 30.05.2014    source источник
comment
Кто-то создал демонстрационный сайт (deformretail.chromicleaves.com/login), чтобы продемонстрировать новые возможности deform2. Он имеет горизонтальные формы и исходный код. ХТН   -  person einSelbst    schedule 05.07.2014

Ответы (1)


arrow_upward
3
arrow_downward

Я понял это, в шаблонах деформации (я их переписываю) я сделал:

mapping_item.pt:

<div tal:define="error_class error_class|field.widget.error_class;
                 description description|field.description;
                 title title|field.title;
                 oid oid|field.oid;
                 hidden hidden|field.widget.hidden;
                 category category|field.widget.category;
                 structural hidden or category == 'structural';
                 required required|field.required;"
     class="form-group  ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
     title="${description}"
     id="item-${oid}"
     tal:omit-tag="structural"
     i18n:domain="deform">
  <!-- <div class="col-sm-12"> -->


  <label for="${oid}"
         class="control-label col-sm-3 col-md-3 ${required and 'required' or ''}"
         tal:condition="not structural"
         id="req-${oid}"
         >
    ${title}
  </label>
<div class="col-sm-9 col-md-9">
  <div tal:define="input_prepend field.widget.input_prepend | None;
                   input_append field.widget.input_append  | None"
       tal:omit-tag="not (input_prepend or input_append)"
       class="input-group">
    <span class="input-group-addon"
          tal:condition="input_prepend">${input_prepend}</span
    ><span tal:replace="structure field.serialize(cstruct).strip()"
    /><span class="input-group-addon"
            tal:condition="input_append">${input_append}</span>
  </div>

  <p class="help-block"
     tal:define="errstr 'error-%s' % field.oid"
     tal:repeat="msg field.error.messages()"
     i18n:translate=""
     tal:attributes="id repeat.msg.index==0 and errstr or
     ('%s-%s' % (errstr, repeat.msg.index))"
     tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
    ${msg}
  </p>

   <p tal:condition="field.description and not field.widget.hidden"
     class="help-block" >
    ${field.description}
  </p>

  </div>
</div>

Обратите внимание, что в label я добавил col-sm-3 col-md-3
Также я добавил <div> с классом: class="col-sm-9 col-md-9"

Это делает элемент, то есть метку + ввод, «горизонтальным» (отображается в одной строке): label and input tag

В form.pt в теге формы я добавил:

class="deform ${field.bootstrap_form_style | 'form-horizontal'}

Я также делаю, когда определяю макет формы:

agent = colander.SchemaNode(
    colander.String(),
    validator=agent_validator,
    widget=widget.AutocompleteInputWidget(
        size=40,
        style="width: 300px",
        min_length=3,
        values=url,
        css_class="form-control"
        ),
    title="Agent*")

Я надеюсь, что это полезно.

person Renier    schedule 07.08.2014