页面上的表单大小问题

问题描述 投票：0回答：1

`

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 20%;
  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: #ececec;
}
.container{
    background-color: #ffffff;
    min-width: 80%;
    overflow: auto;
    max-height:min-content;
    height:auto;
    padding: 3%;
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 80%;
    border-radius: 1%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

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

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

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

.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 #ddd;
    border-radius: 1px;
    padding: 0 15px;
}

h1{
    font-size: 30px;
    text-align: center;
    color: #1c093c;
}

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{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
    margin-bottom: 20px;
}
label{
    color: #1c093c;
    font-size: 14px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    display: flex;
}

.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}

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

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

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


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


textarea{
    resize: none;
}
textarea:focus,
input:focus{
    outline: none;
    border-color: #6f6df4;
}

button{
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    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 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="row">
                <div class="column">
                    <label for="issue">Client details</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue">Site Name & Address</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>


            <div class="row">
                <div class="column">
                    <label for="number">WIS Number</label>
                    <input type="text" id="number" placeholder="">
                </div>

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

            <div class="row">
                <div class="column">
                    <label for="issue"></label>
                    <textarea id="issue" placeholder="Type here" rows="3"></textarea>
                </div>
            </div>

            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

            <div class="row">
                <div class="column">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="">
                </div>

                <!--Signature pad-->

                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="400" height="200"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <label for="number">On behalf of</label>
                        <input type="text" id="number" placeholder="">
                    </div>
                </div>

                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>


                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>



            </div>





        </form>
    </section>
    </div>
</body>

</html>

`我正在制作的工作表上的容器存在一些问题。我对此是全新的，一直在学习，按照网上的说明进行操作，并且做了其他一些有效的操作，但不明白为什么这个会出错。当我在移动视图中检查 Live Server 中的此表单时，屏幕错过了很多页面。请参阅下面的 Iphone 和 Samsung 视图示例，但我看不到页面顶部... Samsung Galaxy - can't see top of page

Can't scroll to top of page

Iphone XR cuts off sides of form

我尝试为容器设置“顶部”样式并将其设置为 80%，这有一点帮助，但底部仍然被切断。然后我尝试添加一个“底部”并调整百分比，但这使情况变得更糟。我单独调整了容器的样式，但没有任何影响它被切断。我也尝试过改变身体造型。尝试将宽度和高度更改为最大宽度和最大高度。我尝试将所有宽度和高度从 px 更改为 %...将溢出更改为 auto..

html css flexbox alignment centering
1个回答
0
投票

您的代码混合了两种居中方法：Flexbox 加 

body
上的居中设置和绝对位置以及 
.container
上的左/上/变换设置。如果窗口/屏幕太小而无法容纳所有内容，后者将导致内容超出窗口的上边缘，并且在考虑 
body
的 Flex 设置时实际上是多余的。所以只需从
.container
中删除这些：

transform: translate(-50%,-50%);
position: absolute;
left: 50%;
top: 80%;

这是没有这些设置的代码片段：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 20%;
  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: #ececec;
}
.container{
    background-color: #ffffff;
    min-width: 80%;
    overflow: auto;
    max-height:min-content;
    height:auto;
    padding: 3%;
    border-radius: 1%;
    box-shadow: 20px 30px 25px rgba(0,0,0,0.15);
}

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

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

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

.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 #ddd;
    border-radius: 1px;
    padding: 0 15px;
}

h1{
    font-size: 30px;
    text-align: center;
    color: #1c093c;
}

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{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 20px 30px;
    margin-bottom: 20px;
}
label{
    color: #1c093c;
    font-size: 14px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.flex-row {
    display: flex;
}

.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}

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

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

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


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


textarea{
    resize: none;
}
textarea:focus,
input:focus{
    outline: none;
    border-color: #6f6df4;
}

button{
    border: none;
    padding: 10px 20px;
    background: linear-gradient(
        130deg,
        #6f6df4,
        #4c46f5
    );
    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 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="row">
                <div class="column">
                    <label for="issue">Client details</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="column">
                    <label for="issue">Site Name & Address</label>
                    <textarea id="issue" placeholder="" rows="3"></textarea>
                </div>
            </div>


            <div class="row">
                <div class="column">
                    <label for="number">WIS Number</label>
                    <input type="text" id="number" placeholder="">
                </div>

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

            <div class="row">
                <div class="column">
                    <label for="issue"></label>
                    <textarea id="issue" placeholder="Type here" rows="3"></textarea>
                </div>
            </div>

            <h4>THE ABOVE IS CERTIFIED CORRECT AND SYSTEM HAS BEEN LEFT IN <u>WORKING ORDER</u></h4> <br>

            <div class="row">
                <div class="column">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="">
                </div>

                <!--Signature pad-->

                <div class="flex-row">
                    <div class="wrapper">
                        <canvas id="signature-pad" width="400" height="200"></canvas>
                    </div>
                    <div class="clear-btn">
                        <button id="clear"><span> Clear </span></button>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <label for="number">On behalf of</label>
                        <input type="text" id="number" placeholder="">
                    </div>
                </div>

                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>


                <div class="column">
                    <label for="ename">Engineers Name</label>
                    <input type="text" id="ename" placeholder="">
                </div>



            </div>





        </form>
    </section>
    </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.