文本区域和签名板 - 位置不当

Question

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: #b0cac7;
}

.container {
    background-color: #ffffff;
    min-width: 80%;
    overflow: relative;
    position: relative;
    max-height: min-content;
    height: auto;
    padding: 3%;
    margin: 5%;
    border-radius: 0%;
    box-shadow: 20px 30px 25px rgba(0, 0, 0, 0.15);
}

textarea {
    display: flex;
    position: flex;
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    background-color: #none;
    font-size: 16px;
    resize: none;
    border-radius: 2px;
    border: 2px solid #707070;
    outline: none;
}

.outline {
    border: 4px solid #91898d85;
    padding: 3%;
}

textarea::placeholder {
    font-size: 1rem;
    color: #9c9c9c;
}

.container .form {
    margin-top: 30px;
}

.form .input-box {
    width: 100%;
    margin-top: 10px;
}

.input-box label {
    color: #333;
}

.form .input-box input {
    position: relative;
    height: 50px;
    width: 100%;
    font-size: 1rem;
    color: rgb(39, 34, 34);
}

.form :where(.input-box input, .select-box, ) {
    position: relative;
    height: 50px;
    width: 100%;
    outline: none;
    font-size: 1rem;
    color: #707070;
    margin-top: px;
    border: 2px solid #cfd1d6;
    border-radius: 1px;
    padding: 0 15px;
}

.column {
    margin: -1%;
    /*used -1 to reduce spaces between each textarea */
    flex: 50%;
    padding: 10px;
}

#date {
    /*used -1 margin bottom to remove the space to heading below */
    margin-bottom: 1%;
}

#name {
    margin-bottom: 5%;
}

.other {
    margin-left: 20px;
}


h1 {
    font-size: 30px;
    text-align: center;
    color: #514e57;
    margin-top: 15px;
}

p {
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
    color: #606060;
    font-size: 14px;
    font-weight: 400;
}

form {
    width: 100%;
    position: relative;
    margin: 30px auto 0 auto;
}


.row {
    margin-top: 1px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px 30px;
}

label i {
    color: #1c093c;
    font-size: 16px;
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    margin-top: -5%;
    display: flex;
    padding: 7px;
}


canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.jSignature {
    background-color: rgb(151, 23, 23);
}

button#clear {
    height: 100%;
    background: #0e5272;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.submit-button {
    height: 100%;
    width: 40%;
    size: 0dvh;
    background: #da2222;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    margin: 3% 50% 0% 30%;
}

button#clear span {
    transform: rotate(90deg);
    display: block;
}


textarea,
input {
    width: 100%;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 0.5%;
    border: 2px solid #cfd1d6;
    margin-top: 5px;
}

textarea:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

input:focus {
    outline: none !important;
    border-color: #e2d847;
    box-shadow: 0 0 10px #e4c749;
}

h4 {
    margin-top: 1px;
    padding: 10px;
    text-align: center;
    font-size: 15.6px;
}

.signature-pad {
    border: 1px solid #000;
    margin-bottom: 20px;
}

canvas#signature {
    border: 2px solid black;
}

canvas#signature2 {
    border: 2px solid black;
}

button {
    border: none;
    padding: 10px 20px;
    background: linear-gradient(130deg,
            #6f6df4,
            #2f9e14);
    color: #ffffff;
    border-radius: 3px;
}

@media screen and (max-width: 500px) {
    .form .column {
        flex-wrap: wrap;
    }

    /*trying to style the button to be wrapped */
    .upload .up {
        flex-wrap: wrap;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
    <!--Signaure pad link-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/4.1.7/signature_pad.umd.min.js"></script>
</head>

<body>

    <section class="container">
        <h1>Site Report Sheet</h1>

        <form action="#" class="form">

            <div class="outline">
                <div class="row">
                    <div class="column">
                        <label for="client">Client details</label>
                        <textarea id="client" name="client" placeholder="Enter details here.." rows="3"></textarea>
                    </div>
                </div>
            </div> <br>

            <div class="outline">
                <div class="row">
                    <div class="column">
                        <label for="site">Site Name & Address</label>
                        <textarea id="issue" name="issue" placeholder="Enter details here..." rows="3"></textarea>
                    </div>
                </div>

                <div class="column">
                    <div class="input-box">
                        <label>WIS Number</label>
                        <input type="text" required />
                    </div>

                    <div class="input-box" id="date">
                        <label>Date</label>
                        <input type="date" required />
                    </div>
                </div>
            </div>
            <br>

            <!--Need Box here for Engineers Comments-->
            <div class="outline">
                <div class="row">
                    <div class="column">
                        <label for="client">Engineer's Comments</label>
                        <textarea id="client" name="client" placeholder="Enter details here.." rows="3"></textarea>
                    </div>
                </div>
            </div> <br>

            <div class="outline">
                <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

                <div class="column">
                    <div class="input-box">
                        <label id="name">Name</label>
                        <input type="text" required />
                    </div>
                </div>
                <br>

                <!--Signature pad 1 -->
                <label>Signature</label> <br><br>
                <form id="signatureForm">
                    <div class="signature-pad" id="signaturePad1">
                        <canvas></canvas>
                    </div>
                    <button type="button" onclick="clearSignature(1)">Clear</button>

                    <div class="column">
                        <div class="input-box">
                            <label>On Behalf Of</label>
                            <input type="text" required />
                        </div>
                        <div class="input-box">
                            <label>Position</label>
                            <input type="text" required />
                        </div>

                        <div class="input-box" id="date">
                            <label>Date</label>
                            <input type="date" required />
                        </div>

                        <div class="input-box">
                            <label>Engineer's Name</label>
                            <input type="text" required />
                        </div>
                    </div>

                    <br>

                    <!--Signature 2-->
                    <label>Engineer's Signature</label> <br><br>
                    <div class="signature-pad" id="signaturePad2">
                        <canvas></canvas>
                    </div>
                    <button type="button" onclick="clearSignature(2)">Clear</button>

                    <br>

                    <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT <U>UNOPERATIONAL</U></h4>

                    <div class="column">
                        <div class="input-box">
                            <label>Name</label>
                            <input type="text" required />
                        </div>
                    </div>
                    <br>
                    <!--Signature 3-->
                    <label>Signature</label> <br><br>
                    <div class="signature-pad" id="signaturePad3">
                        <canvas></canvas>
                    </div>
                    <button type="button" onclick="clearSignature(3)">Clear</button>


                    <div class="column">
                        <div class="input-box">
                            <label>On Behalf Of</label>
                            <input type="text" required />
                        </div>
                        <div class="input-box">
                            <label>Position</label>
                            <input type="text" required />
                        </div>

                        <div class="input-box" id="date">
                            <label>Date</label>
                            <input type="date" required />
                        </div>
                        <div class="input-box">
                            <label>Engineer's Name</label>
                            <input type="text" required />
                        </div>

                    </div>

                    <br>
                    <label>Engineer's Signature</label> <br><br>
                    <div class="signature-pad" id="signaturePad4">
                        <canvas></canvas>
                    </div>
                    <button type="button" onclick="clearSignature(4)">Clear</button>

            </div>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
            <script>
                // Initialize signature pads
                var signaturePads = [];
                for (var i = 1; i <= 4; i++) {
                    var canvas = document.querySelector('#signaturePad' + i + ' canvas');
                    var signaturePad = new SignaturePad(canvas);
                    signaturePads.push(signaturePad);
                }

                // Function to clear signature
                function clearSignature(padIndex) {
                    signaturePads[padIndex - 1].clear();
                }

                // Form submission handling (just console logging signatures for demonstration)
                document.getElementById('signatureForm').addEventListener('submit', function (event) {
                    event.preventDefault();
                    var signatures = signaturePads.map(function (signaturePad) {
                        return signaturePad.toDataURL(); // You can customize this based on your requirements
                    });
                    console.log('Signatures:', signatures);
                    // Here you can submit the signatures via AJAX or perform any other action
                });
            </script>

            </div>
            </div>
            <div>
                <button class="submit-button">Submit</button>
            </div>
        </form>
        
    </section>
    </div>
</body>

</html>

我只是在学习一些基本的 html 和 css 作为我当前工作的副项目，试图帮助为业务编写一些表单，所以对我来说很轻松，因为我是全新的并且通过谷歌学习..

我添加了文本区域，它们似乎在我的预览中以及实时服务器上的大多数设备上对齐得很好，但是在某些 IOS 预览中，例如三星 Galaxy S8、三星 Galaxy Fold、Iphone SE，它会突出到右侧。只是想了解为什么要这样做以及如何使其在每个设备上都相同？ []()

我尝试过调整文本区域的样式，特别是宽度。尝试设置最大宽度/最小宽度，例如添加 96% 的最大宽度，这对 Samsung Galaxy 确实有帮助，但搞乱了所有其他预览。

尝试将文本区域宽度更改为自动/相对宽度，而不是将其限制为百分比 - 没有区别。

还尝试将文本区域宽度更改为自动/相对，而不是将其限制为百分比

我尝试更改文本区域中的边距，特别是右边距，但这同样会产生影响，但仅限于某些预览。

我已经将框大小设置为边框框，应用于我的 css 中的所有内容...如果有人可以提供帮助，只是有点卡在这里？

Answer 1

尝试这个 CSS 并阅读你的错误：

.container {
        max-width: 80%;
        width: 100%;
    
        max-height: min-content;//remove this
        height: fit-content;
    
        //way better to make paddings/margins i px or em/em
        padding: 3%;
        margin: 5%;
    }
    
    textarea {
        display: flex; //remove this
    
        //there is no position: flex; in CSS, maybe position: relative; ? 
        position: flex;
    
        max-width: 100%; //instead of width: 100%;
        
        background-color: transparent; //instead of background-color: #none;
    }

upd：更改 .row 类，其中最小列宽为 300px。