web-dev-qa-db-ja.com

<input>フィールドをWebform 4.xのカスタム<div> -wrapperでラップする方法

かなり簡単な質問があります。 CSSが指定されているため、webform-componentの<input>- field（および<select>または<textarea>）をカスタム<div>- wrapperでラップする必要があります。

以下を変更->

<div class="webform-component webform-component-textfield webform-component--title">
    <label for="edit-submitted-title">Name</label>
    <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
</div>

へ->

<div class="webform-component webform-component-textfield webform-component--title">
    <label for="edit-submitted-title">Name</label>
    <div class="my-custom-class">
         <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
    </div>
</div>

私は this スニペット（#prefixと#suffixを hook_form_alter（） で変更）を試しましたが、カスタムdivでwebform-componoent全体をラップしています。

結果は次のようになります：

<div class="my-custom-class">
    <div class="webform-component webform-component-textfield webform-component--title">
        <label for="edit-submitted-title">Name</label>
        <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
    </div>
</div>

#field_prefixと#field_suffixも変更しようとしましたが、何も出力されません。これらはカスタムhtmlを含めることができないようです。

助言がありますか？ありがとう。

7webformsforms
2
ichderfisch

Hook_form_alterを使用して「 'title_display' => 'none'」を追加し、接頭辞にラベルを使用します。例えば.

if($form_id == "content_type_node_form"){
   $form['field_name']['#prefix'] = '<label for="edit-submitted-title">name</label><div class="newclass">';
   $form['field_name']['#suffix'] = '</div>';
}

私はそれをテストしていませんが、これはうまくいくことができます。

1
Sunil Kumar

すべての入力テンプレートをカスタマイズする ファイル（そしておそらくそれはいくつかの作業が必要です）、jqueryを使用する別の簡単な解決策

jquery wrap function を使用して、次のようなことを試してください

$("input.edit-submitted-title").wrap("<div class='my-custom-class'></div>");
0
Yusef

それは現在サポートされていません-簡単な方法ではありません-あなたはそれを必要としないはずです。 1つの要素に対してのみdivを作成しても、その要素にクラスを追加するよりもメリットはありません。スタイルを設定できるはずですが、hook_form_alterを次のように使用したい場合は、

$field['#attributes']['class'][] = 'my-custom-class';

そして、入力したいスタイルを直接入力するだけで、必要な外観を実現できます。

0
Mołot

コンテンツタイプのようにフィールド名を正確に指定すると、そのフィールドにdivが追加されます

これを特定のフォームのフォーム変更に追加します。

if($form_id == "content_type_node_form"){
    $form['field_name']['#prefix'] = '<div class="newclass">';
    $form['field_name']['#suffix'] = '</div>';
}

これは、divを追加してラップするために使用した方法です。

0
DEVARAJ JOHNSON