• コミュニティ

  ラジオボタンの縦幅を揃え、SPでのボタン表示のずれを直したい

  トピックス by widget初心者 1792 pt  2023年9月8日 11:06 674 PV

  【Widget名】

  アンケート（回答後次の設問表示）※要javascript(アンケート)

  【修正したいこと】

  現状、ラジオボタンの縦幅が行数により異なっています。1行でも2行でも同じボタン縦幅となるように、なお且つ上下中央に配置させたいです。

  また、スマホで見るとボタンの位置がずれているため、修正したいです。

  【参考画像】https://squadbeyond.gyazo.com/e83ad0a9f5e0be102e65f33743f962d5

  widgetマスター   1 年, 2 月前 2 人 · 1 コメント

  • widget
  • アンケート
  • アンケート（回答後次の設問表示）※要javascript(アンケート)
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年9月8日 16:34

  下記CSSの設定を行った上、HTML側の方にも調整が必要になります。

  ■ CSS の調整

  .select-list>li label {
      position: relative;
      /* ↓ 以下追加 */
      display: flex; 
  }
  .select-list>li .select-radio {
      display: flex; /* ← block を flex に修正 */
      width: 100%;
      padding: 20px 20px 20px 50px;
      background-color: #EBEBEB;
      border: 1px solid #cccccc;
      border-radius: 10px;
      box-sizing: border-box;
      transition: background-color 0.1s, color 0.1s;
      /* ↓ 以下追加 */
      height: 125px; /* ← こちらの数値をお好みで調整して下さい */
      align-items: center;
  }

  ■ HTMLの調整

  HTML側の方は、テキストを上下中央配置にするために、

  下記のように <span class=”select-radio”> … </div> 内のテキストを

  任意のタグで囲う必要がございます。

  例えば、Q2の場合は下記のように <p>…</p> で囲います

  。※テキスト部分（〇〇〇〇〇〇）のみを抜粋しております。

  [ 修正前 ]

  <span class="select-radio">
      〇〇〇〇〇〇<br>〇〇〇〇〇〇
  </span>
  <span class="select-radio">
      〇〇〇〇〇〇<br>〇〇〇〇〇〇
  </span>
  <span class="select-radio">
  〇〇〇〇〇〇
  </span>
  <span class="select-radio">
      〇〇〇〇〇〇

  </span>

  [ 修正後 ]

  <span class="select-radio">
      <p>〇〇〇〇〇〇、<br>〇〇〇〇〇〇</p>
  </span>
  <span class="select-radio">
      <p>〇〇〇〇〇〇<br>〇〇〇〇〇〇</p>
  </span>
  <span class="select-radio">
      <p>〇〇〇〇〇〇、〇〇〇〇〇〇</p>
  </span>
  <span class="select-radio">
      <p>〇〇〇〇〇〇</p>
  </span>

  少々、ご説明が分かりづらいかもしれませんので、

  ご不明点などございましたらコメント欄にてご質問くださいませ。

Log In to Reply