バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
h_tanaka
投稿日時: 2019/5/27 8:59
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
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の機能やデザインのカスタマイズ承ります。

tao_s
投稿日時: 2019/5/27 8:30
対応状況: −−−
仙人
登録日: 2008/8/20
居住地: 東京
投稿: 796
Re: ラジオボタンの選択肢の間に改行を入れたい
form layoutとかいじればたぶんお望みの事もできると思いますが、CSSでやっちゃった方が楽だと思います。
メディアクエリ使って、改行しちゃう様な横幅の場合は、labelをinline-blockにして、適度な横幅指定してあげればご希望の表示になると思いますよ。


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

h_tanaka
投稿日時: 2019/5/24 18:22
対応状況: 解決済
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
ラジオボタンの選択肢の間に改行を入れたい
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>
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,308名です
総投稿数は109,693件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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