EC-CUBE 開発コミュニティ

質問 > フロント機能 > ラジオボタンの選択肢の間に改行を入れたい

フロント機能

フラット表示

前のトピック | 次のトピック

投稿者スレッド

h_tanaka

投稿日時: 2019/5/24 18:22

対応状況: 解決済

神

登録日: 2016/7/22

居住地: 愛媛県

投稿: 1646

ラジオボタンの選択肢の間に改行を入れたい

EC-CUBE4.0.2

Form でラジオボタンをレンダリングすると、ラジオボタンが横並びになります。
　○ 通常￥100 ○ ハート型￥200

スマホ表示など画面幅によってはおかしな箇所で改行されてしまいます。
　○ 通常￥100 ○
　ハート型￥200

これを防ぐために、label の後で強制的に改行したいのですが、よい方法ありますでしょうか？
　○ 通常￥100
　○ ハート型￥200

app/Customize/Form/Type/SetType.php

->add('order_item4', ChoiceType::class, [
    'required' => false,
    'choices' => $ShockAbsorberSelection,
    'data' => $shock_absorber_id,
    'multiple' => false,
    'expanded' => true,
    'mapped' => false,
    'placeholder' => false,
])

app/template/default/Mypage/set_edit.twig

<div class="ec-radio{{ has_errors(form.order_item4) ? ' error'}}">
    {{ form_widget(form.order_item4) }}
    {{ form_errors(form.order_item4) }}
</div>

<div id="set_order_item4">
  <input type="radio" id="set_order_item4_0" name="set[order_item4]" value="1">
  <label for="set_order_item4_0"><span>通常 ￥100</span></label>
  <input type="radio" id="set_order_item4_2" name="set[order_item4]" value="2" checked="checked">
  <label for="set_order_item4_2"><span>ハート型 ￥200</span></label>
</div>

スタイル調整をいろいろ試したのですがうまくいかず。。
次のように <input> と <label> を <div> で囲むことができればスタイルで調整できるのですが、このようにレンダリングすることはできるのでしょうか？

<div id="set_order_item4">
  <div>
    <input type="radio" id="set_order_item4_0" name="set[order_item4]" value="1">
    <label for="set_order_item4_0"><span>通常 ￥100</span></label>
  </div>
  <div>
    <input type="radio" id="set_order_item4_2" name="set[order_item4]" value="2" checked="checked">
    <label for="set_order_item4_2"><span>ハート型 ￥200</span></label>
  </div>
</div>

フラット表示

前のトピック | 次のトピック

題名	投稿者	日時
» ラジオボタンの選択肢の間に改行を入れたい	h_tanaka	2019/5/24 18:22
Re: ラジオボタンの選択肢の間に改行を入れたい	tao_s	2019/5/27 8:30
Re: ラジオボタンの選択肢の間に改行を入れたい	h_tanaka	2019/5/27 8:59

バージョン選択

フォーラム

メニュー

オンライン状況

サイト内検索

フロント機能

ログイン

統計情報

投稿数ランキング