django-crispy-formsのコントロール行を作成する

Question

を使用するdjango-crispy-forms私は1つの行に2つ（以上）のウィジェットを組み合わせたいと思う。添付の例も参照してください。ドキュメンテーションにはこの問題の例が含まれていて、ソースコードも役に立たなかったものの、そのライブラリを使用することが可能でなければならないと思います。だから、誰もがdjango-crispy-formsを使って同様の結果を得ることができましたか？

、このような形のために必要なHTMLは次のようになります。

<div class="control-group"> 
    <label for="desc" class="control-label"> 
     Description 
    </label> 
    <div class="controls controls-row"> 
     <input class="span2" maxlength="255" type="text" id="desc"> 
     <input class="span3" maxlength="255" type="text"> 
    </div> 
</div> 

Answer 1

あなたはDEF のinit（自己、* argsを、** kwargsから `でHTMLオブジェクトを定義すると、それを行うことができます）：レイアウトオブジェクト内。このHTMLは、あなたが必要とするすべての自由を与えます。

別の方法もあります。実際には、テンプレート内のフォルダに独自のテンプレートを作成してからレイアウトオブジェクトでそのテンプレート 例へのパスを定義するには：「名前」は、実際のウィジェットです

Field('name', template='path/to/template/single_line_input.html'), 

。

float: leftやdisplay: inlineのようなCSSファイルで遊んでみることもできますが、インラインで表示するウィジェットでクラスを定義する必要があります。これは、フロントエンドのCSSに熟練していない人にとっては少し難解かもしれません（結果はさまざまなブラウザや異なる解像度で異なる可能性がありますので、いくつかのテストが必要です）。 問題は、主に、ブラウザが入力フィールドをデフォルトでブロックオブジェクトとしてレンダリングしているため、幅が狭くても1行ですべてのスペースを占めることです。

Answer 2

はい。使用Layouts

ここでは、あなたのためのスニペットを示します。

def __init__(self, *args, **kwargs): 
    self.helper = FormHelper() 
    self.helper.form_method = 'get' 
    self.helper.form_id = 'id_search' 
    self.helper.layout = Layout(
      Div(
       Div(Field('arrival_date', css_class='span12 input-large calendar', 
        placeholder='dd/mm/yyyy'), css_class='span5'), 
       Div(Field('departure_date', css_class='span12 input-large calendar', 
        placeholder='dd/mm/yyyy'), css_class='span5'), 
       Div(Field('rooms', css_class='span12'), css_class='span2 styled-rooms'), 
       css_class='row-fluid', 
      ), 
     ) 

Answer 3

あなたはこの動作を取得するためにMultiValueFieldとMultiWidgetを使用することができます。 compressとdecompressの方法について考えて修正する必要がありますが、次のような方法があります。

<div id="div_id_multi_field" class="control-group"> 
    <label for="id_multi_field_0" class="control-label">Multi Field</label> 
    <div class="controls"> 
     <input id="id_multi_field_0"> 
     <input id="id_multi_field_1"> 
    </div> 
</div>