5

同じ行にボタンがあるブートストラップ PrependedText フィールドが必要です。同じ行で取得できますが、テキストボックスの前にボタンが表示され、後で必要です。何が間違っているのか、ボックスの後ろ (テキスト フィールドの右側) に表示するにはどうすればよいですか?

serial = forms.CharField(forms.TextInput(attrs={'autocomplete':'off',}))
    serial.label = ''

    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    helper.form_action = 'checkout'
    helper.form_method = 'post'

    helper.layout = Layout(
        HTML("<p class='alert-info'>Please scan the items barcode or enter the serial # in the field below.</p>"),
        Div(
            Div(PrependedText('serial', 'Serial #',css_class='input-xlarge'), css_class='span1'),
            Div(Submit('submit','Submit', css_class='btn-primary'), css_class='span1'),
            css_class='row-fluid'
        )
    )
4

1 に答える 1

6

まず、フィールドの定義で、前serialに を付け忘れていることに気付きました。また、だけでなく、クラスも必要です。widget=forms.TextInput(palertalert-info

の最初のインスタンスを に変更することで問題を解決できましたがspan1、span6ウィンドウのサイズを変更するとレイアウトの問題が発生し、送信ボタンがまったくないように見えることさえあるため、絶対にお勧めしません。

を使用することをお勧めしますPrependedAppendedTextが、テンプレートは、ボタンではなくテキストを追加することを前提としているため、テンプレートをオーバーライドしない限り機能しません (例: PrependedAppendedText.template = 'custom_appended_prepended_text.html')。そのルートに行きたい場合は、元のテンプレートをカスタム テンプレートにコピーしspan、 の 2 番目のインスタンスが含まれている を削除してから、次の{{ crispy_appended_text|safe }}ようなコードを使用します。

Div(PrependedAppendedText('serial', 'Serial #', '<button class="btn btn-primary">Submit</button>', css_class='input-xlarge'), css_class='span1'),

しかし、私は別の提案があります。私はこの解決策の方がはるかに気に入っていますが、それはプレースホルダー テキストを優先して先頭に追加されたテキストを放棄することを意味します。まず、フィールドのautocomplete属性をoffに設定することに加えて、そのclass属性を にinput-xlarge、そのplaceholder属性を に設定しますSerial #。次に、次のコードを使用します。

FieldWithButtons('serial', StrictButton('Submit', type='submit', css_class='btn-primary')),

カスタム テンプレートを作成する必要はありません。また、pフォームの上部にある とフィールドのプレースホルダー テキストの間で、先頭に追加されたテキストがないことでユーザーが混乱することはないと思います。

于 2013-02-22T04:39:02.580 に答える