1

アドレスのhtml選択ドロップダウンリストがあります。一部のアドレスは長く、親の div 境界からはみ出しています。

宿題をしたところ、css ルールがこれを解決することがわかりました。

select, option { width: __; }

このドロップダウン リストは、ajax 対応フォームの一部です。ユーザーが他の時代に変わると、住所フィールドのオプションが変更されます。

これで、オプションが同じである限り、css ルールが正常に機能することがわかりました。選択オプションが ajax によって変更されるようなことをすると、css ルールが制御できなくなります。選択オプション フィールドは元の 1 行の形式に戻り、境界線から抜け出します。

オプションの変更の前後にhtmlマークアップをチェックして、選択構造とIDが損なわれていないかどうかを確認しました。要素構造は同じであることがわかり、select 要素 id に変更はありません。

では、オプションが変更されたときに css ルールが保持されなくなったのはなぜですか?

この動作は、IE、Firefox、および Chrome で発生します。

私は Drupal 7 を使用しており、それはフォーム、ajax フレームワークです。

更新: コード

Drupal 7 を使用しているため、実際に JS コードを作成することはありません。ここでは PHP と CSS のみを表示できます。

形：

$form['shipping_address']['ship_to'] = array(
   '#type' => 'select',
   '#title' => 'Ship To',
   '#options' => $to_options,
   '#required' => true,
   '#default_value' => $selected, 
    '#ajax' => array(
      'callback' => 'ship_to_callback',
      'wrapper' => 'ship_to_address_replace',
    ),  
 );

  $ship_to_address_options = get_ship_to_address_options($selected);
  $form['shipping_address']['ship_to_address'] = array(
   '#type' => 'select',
   '#title' => $to_options[$selected],
   '#options' => $ship_to_address_options,
   '#prefix' => '<div id="ship_to_address_replace">',
   '#default_value' => isset($form_state['values']['ship_to_address']) ? $form_state['values']['ship_to_address'] : '',
   );

「ship_to」は、「ship_to_address」で使用できるオプションを制御します。

CSS:

select#edit-ship-to-address, select#edit-bill-to-address {
  width: 60%;
}
4

1 に答える 1

0

おそらく、AJAX の更新後にセレクターが無効になるため、CSS ルールが失われます。Drupal のフォーム要素 ID には、同じ名前の要素が複数ある場合、自動インクリメントされた番号の接尾辞が付きます。マークアップを調べて、CSS ルールを調整してみてください。以下を追加することで、これらの要素に独自のクラス名を設定することもできます。

$form['shipping_address']['ship_to_address']['#attributes']['class'][] = 'my-own-class-to-target-with-css';

また、貼り付けられたコードには#suffix、閉じているプロパティが含まれていないため、他の問題も発生する可能性があります。

于 2013-04-10T09:43:27.707 に答える