バージョン選択

フォーラム

メニュー

オンライン状況

75 人のユーザが現在オンラインです。 (59 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 75
もっと...

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
h_tanaka
投稿日時: 2019/5/24 18:22
対応状況: 解決済
仙人
登録日: 2016/7/22
居住地: 愛媛県
投稿: 907
ラジオボタンの選択肢の間に改行を入れたい
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>
tao_s
投稿日時: 2019/5/27 8:30
対応状況: −−−
仙人
登録日: 2008/8/20
居住地: 東京
投稿: 774
Re: ラジオボタンの選択肢の間に改行を入れたい
form layoutとかいじればたぶんお望みの事もできると思いますが、CSSでやっちゃった方が楽だと思います。
メディアクエリ使って、改行しちゃう様な横幅の場合は、labelをinline-blockにして、適度な横幅指定してあげればご希望の表示になると思いますよ。


----------------
EC-CUBEカスタマイズ相談してください。
緊急のEC-CUBEの障害対応
EC-CUBEカスタマイズブログ

h_tanaka
投稿日時: 2019/5/27 8:59
対応状況: −−−
仙人
登録日: 2016/7/22
居住地: 愛媛県
投稿: 907
Re: ラジオボタンの選択肢の間に改行を入れたい
ちょっと強引なやり方ですが、スタイル調整でうまくいきました。
    <style>
        .order_item4 label {
            padding-bottom: 10px;
        }
        #set_order_item4 input {
            display: block;
            margin-bottom: -28px;
        }
        #set_order_item4 label {
        	position: relative;
            left: 25px;
            background-size: 50px;
            background-repeat: no-repeat;
            background-position: left;
            background-size: 50px;
            padding-left: 60px;
        }
    </style>


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

ec-cube.co

統計情報

総メンバー数は49,560名です
総投稿数は93,191件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
1968
4
468
1818
5
yuh
1602
6
red
1343
7
umebius
1296
8
fukap
907
9
h_tanaka
907
10
tsuji
856
11
shutta
835
12 ramrun 789
13
tao_s
774
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.