如果选中单选按钮不能在手机上正确显示，则CSS会显示内容

Question

I have a form which is using CSS to "reveal" some additional options if a radio button is selected. 如果选择了单选按钮，我有一种使用CSS来“显示”一些其他选项的表单。

This works fine but on mobile, the additional options cover the submit button and the text is hard to read. 这可以正常工作，但在移动设备上，其他选项覆盖了“提交”按钮，文本难以阅读。

the HTML form: HTML表单：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <title>MooWoos Stall Booking</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--build:css css/styles.min.css-->
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/style.css">
    <!--endbuild-->

</head>

<body>
<div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <a class="logo"><img src="assets/logo_opt.png"></a>
    </nav>

    <hr>

    <div class="modal fade" id="redirect_page" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="form-horizontal">

                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3 bookingform">
            <h1>Stall Booking Form</h1>
            <p class="lead">
                Fill out the form to book and pay for your stall!
            </p>
            <form id="bookingForm">
                <div class="form-group">
                    <label for="name">Name </label>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
                </div>
                <div class="form-group">
                    <label for="address">Address </label>
                    <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Telephone Number </label>
                    <input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
                </div>
                <div class="form-group">
                    <label for="email">Email </label>
                    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
                </div>
                <div class="form-group">
                    <label for="date">Which date would you like to book? </label>
                    <p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
                    <p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
                </div>
                <div class="form-group">
                    <label>What type of stall do you require?</label>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
                        <label for="stallType-Preloved">Preloved</label>
                        <div class="reveal-if-active">
                            <label for="c-rail">Will you be bringing a clothes rail? </label>
                            <input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
                            <input type="radio" id=c-rail-no name="c-rail" value="No" /> No
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Craft" value="Craft">
                        <label for="stallType-Craft">Craft</label>
                        <div class="reveal-if-active">
                            <label for="craftName">What name do you use?</label>
                            <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Business" value="Business">
                        <label for="stallType-Business">Business</label>
                        <div class="reveal-if-active">
                            <label for="bizName">What is your business name?</label>
                            <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
                            <label for="insurance">Do you have Public Liability Insurance?</label>
                            <input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
                            <input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
                        </div>
                    </div>
                </div>
                <input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
            </form>
            <p></p>
        </div>

    </div>

    <hr>

    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; MooWoos 2018. Booking Form by Luke Brewerton</p>
            </div>
        </div>

    </footer>

</div>

<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

</body>
</html>

The radio buttons stallType group are the ones, using the CSS class reveal-if-active on the labels and require-if-active on the form inputs. 单选按钮stallType组就是一个单选按钮，使用CSS类在标签上reveal-if-active require-if-active和在表单输入上require-if-active stallType require-if-active 。

CSS: CSS：

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked ~ &,
  input[type="checkbox"]:checked ~ & {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
    padding: 10px 20px;
    transform: scale(1);
  }
}

My JS file: 我的JS文件：

var $form = $('form#bookingForm'),
    url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'

function disableAll() {
    $('#c-rail-yes').attr('required', false).attr('disabled', true);
    $('#c-rail-no').attr('required', false).attr('disabled', true);
    $('#craftName').attr('required', false).attr('disabled', true);
    $('#bizName').attr('required', false).attr('disabled', true);
    $('#insurance-yes').attr('required', false).attr('disabled', true);
    $('#insurance-no').attr('required', false).attr('disabled', true);
}

$('#stallType-Preloved').change(function () {
    if(this.checked) {
        disableAll();
        $('#c-rail-yes').attr('required', true).attr('disabled', false);
        $('#c-rail-no').attr('required', true).attr('disabled', false);
    }
});

$('#stallType-Craft').change(function () {
    if(this.checked) {
        disableAll();
        $('#craftName').attr('required', true).attr('disabled', false);
    }
});

$('#stallType-Business').change(function () {
    if(this.checked) {
        disableAll();
        $('#bizName').attr('required', true).attr('disabled', false);
        $('#insurance-yes').attr('required', true).attr('disabled', false);
        $('#insurance-no').attr('required', true).attr('disabled', false);
    }
});

$('#submit-form').on('click', function(e) {
    var valid = this.form.checkValidity();
    if (valid) {
        e.preventDefault();
        var jqxhr = $.ajax({
            url: url,
            method: "GET",
            dataType: "json",
            dataType: "json",
            data: $form.serializeObject(),
            success: function () {
                $('#redirect_page').modal('show');
                window.setTimeout(function () {
                    location.reload()
                }, 3000);
            }
        });
    }
});

Would this be better done via jQuery? 通过jQuery会更好吗？ If so, how? 如果是这样，怎么办？

Answer 1

The jquery function required is as follows 所需的jquery函数如下

HTML 的HTML

 <div class="form-group">
                    <label>What type of stall do you require?</label>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
                        <label for="stallType-Preloved">Preloved</label>
                        <div class="reveal-if-active">
                            <label for="c-rail">Will you be bringing a clothes rail? </label>
                            <input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
                            <input type="radio" id=c-rail-no name="c-rail" value="No" /> No
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Craft" value="Craft">
                        <label for="stallType-Craft">Craft</label>
                        <div class="reveal-if-active">
                            <label for="craftName">What name do you use?</label>
                            <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Business" value="Business">
                        <label for="stallType-Business">Business</label>
                        <div class="reveal-if-active">
                            <label for="bizName">What is your business name?</label>
                            <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
                            <label for="insurance">Do you have Public Liability Insurance?</label>
                            <input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
                            <input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
                        </div>
                    </div>
                </div>

jQuery jQuery的

$(document ).ready(function() {
  $("input:radio[name='stallType']").change(function (e) {
        $(".reveal-if-active").hide();
        $(e.currentTarget).parent().find(".reveal-if-active").show();
        });
});

Codepen link for reference Codepen链接以供参考

https://codepen.io/YasirKamdar/pen/vpMayq https://codepen.io/YasirKamdar/pen/vpMayq

Answer 2

Replace those nonsensical max-height declarations for height:0 and height:auto. 将那些毫无意义的max-height声明替换为height：0和height：auto。

.reveal-if-active {
  opacity: 0;
  height:0;
  overflow: hidden;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked ~ &,
  input[type="checkbox"]:checked ~ & {
    opacity: 1;
    height:auto;
    overflow: visible;
    padding: 10px 20px;
    transform: scale(1);
  }
}

如果选中单选按钮不能在手机上正确显示，则CSS会显示内容

问题描述

2 个解决方案

解决方案1
0 2018-01-23 15:50:07

解决方案2
0 2018-01-23 17:08:46

如果选中单选按钮不能在手机上正确显示，则CSS会显示内容

问题描述

2 个解决方案

解决方案1 0 2018-01-23 15:50:07

解决方案2 0 2018-01-23 17:08:46

解决方案1
0 2018-01-23 15:50:07

解决方案2
0 2018-01-23 17:08:46