アンケートwidgetの選択肢の高さを揃えたい

タグ付き： widget, アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript(アンケート)

コミュニティ

アンケートwidgetの選択肢の高さを揃えたい

トピックス by widget初心者 1792 pt 2023年8月16日 18:10 236 PV
widget名：アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript(アンケート)

一つの選択肢の文言が長いと一つだけ縦幅が高くなってしまうので他の選択肢も同じ縦幅にするようにしたいです・・・！
アンケート-選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascriptアンケート.png 58 KB 画像ファイル — クリックして見る



コピーダウンロードリンク
widgetマスター 1 年, 3 月前 2 人 · 1 コメント
- widget
- アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript(アンケート)
1 コメント

widgetマスター

モデレータ
2023年8月16日 18:22
前提として、こちらの選択肢を変更すると他の設問の見た目にも影響します！

なのでまず変更したい選択肢の修正方法をお伝えした後に他の設問の修正方法もお伝えします！

【変更したい選択肢の修正方法】

CSSの「.question-reveal-scroll input+label .btn」の余計な記述を削除して、高さを指定する記述を追加します！
```
.question-reveal-scroll input+label .btn {
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px 0 20px 50px;
    font-weight: bold;
    background-color: #EBEBEB;
    line-height: 1.6;
    position: relative;
    /*display: block;これ不要*/

/*ここから追加*/
    height: 60px!important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
```
【他の設問の修正方法】

CSSの「.question-reveal-scroll .linkbox.btn-two .btn」に記述を追加します。
```
.question-reveal-scroll .linkbox.btn-two .btn {
    font-size: 14px;
    color: #fff;
    background: #8f8d8d;
    padding: 10px;
    text-align: center;
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 0 #828080;
    transition: all 0.2s;
    cursor: pointer;

/*ここから追加*/
    height: auto!important;
    display: block;
}
```
修正後アンケート選択肢により隠しコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascriptアンケート.png 37 KB 画像ファイル — クリックして見る



コピーダウンロードリンク

widgetマスター