TechQA.

Textarea & Signature Pads - Out of place

48 views Asked by At 

@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>

I am just learning some basic html & css as a side project for my current job, in an attempt to help code some forms for the business so be easy on me as I am brand new & learning through google..

I have added text area and they seem to align fine on my preview, and on most devices on live server, however in certain IOS previews such as Samsung Galaxy S8, Samsung Galaxy Fold, Iphone SE it sticks out to the right.. I just want to learn why it is doing this and how to make it the same on every device? [enter image description here](https://i.stack.imgur.com/KH5uM.png)

I have tried playing around with the styling of the textarea, in particular the width. Tried setting a max width/min width, for example adding a max width of 96% which did help with Samsung Galaxy but messed up all other previews.

Have tried changing the textarea width to auto/relative instead of limiting it to a percentage - made no difference.

Also tried changing the textarea width to auto/relative instead of limiting it to a percentage

I attempted to change the margins in textarea, in particular margin-right but again this has an impact but only in certain previews.

I already have box-sizing set to border box, applied to everything in my css... Just kind of stuck here if anyone can help?

html css alignment textarea margin
Original Q&A
1

There are 1 answers

4
BlatIsgense On

try this CSS and read about your mistakes:

.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: Change .row class where minimal column width is 300px.

.row {
    //300px too much, set ~ 200px
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Fix .row and use tips above

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in TEXTAREA

Related Questions in MARGIN

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions