ورود

View Full Version : سوال: چرا این صفحه Scrollable می شود؟!


ROSTAM2
چهارشنبه 17 مرداد 1403, 19:05 عصر
سلام ب همه.

من ی صفحه لاگین دارم که می خوام توی WebBrowser استفاده کنم ولی بدون در نظر گرفتن فرم اندازه اش بطوری زیاد می شه که صفحه Scroll نمایش می ده:

155935

اما زمانی که همین صفحه رو در مرورگر MSEdge اجرا می کنم هیچ Scroll نمی شه تا زمانی که به اندازه فرم کوچیک بشه....

155936

راه حل درست شدنش چی می تونه باشه!؟؟!


<!DOCTYPE html>


<html lang="fa">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
<style media="screen">
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #080710;
height: 100% !important;
}
.background{
width: 100%;
height: 100%;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
}
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -30px;
bottom: -80px;
}
form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: 'Poppins',sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}


label{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder{
color: #e5e5e5;
}
button{
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social{
margin-top: 30px;
display: flex;
}
.social div{
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255,255,255,0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover{
background-color: rgba(255,255,255,0.47);
}
.social .fb{
margin-left: 25px;
}
.social i{
margin-right: 4px;
}


</style>
</head>
<body>
<!--<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>-->
<form>
<h3>Login Here</h3>


<label for="username">Username</label>
<input type="text" placeholder="Email or Phone" id="username">


<label for="password">Password</label>
<input type="password" placeholder="Password" id="password">


<button>Log In</button>
<div class="social">
<div class="go"><i class="fab fa-google"></i> Google</div>
<div class="fb"><i class="fab fa-facebook"></i> Facebook</div>
</div>
</form>
</body>
</html>
ROSTAM2
چهارشنبه 17 مرداد 1403, 21:01 عصر
تا حدودی بهتر شد:

155939


<!DOCTYPE html>


<html lang="fa">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
<style media="screen">
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;

}
body
{
background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
background-blend-mode: multiply;
/* background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);


background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);


background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
/*
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); */


}
/* background-color: #080710;
height: 100% !important;
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}
.background{
width: 100%;
height: 100%;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;

}
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -30px;
bottom: -80px;
} */
form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
/* transform: translate(-100%,-50); */
top: 50px;
/* left: 50%; */

border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: 'Poppins',sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}


label{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder{
color: #e5e5e5;
}
button{
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social{
margin-top: 30px;
display: flex;
}
.social div{
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255,255,255,0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover{
background-color: rgba(255,255,255,0.47);
}
.social .fb{
margin-right: 25px;
}
.social i{
margin-left: 4px;
}


</style>
</head>
<body dir="rtl">
<!--<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>-->

<table style="width: 100%; height: 100%">
<col width="50%;"/><col width="50%;"/>
<tr>
<td>

</td>
<td align="center" valign="middle">
<form >
<h3>ورود به گنجه کلید</h3>


<label for="username">نام کاربری</label>
<input type="text" placeholder="Email or Phone" id="username">


<label for="password">رمز ورود</label>
<input type="password" placeholder="Password" id="password">


<button>ورود</button>
<div class="social">
<div class="go"><i class=""></i>بازیابی رمز!</div>
<div class="fb"><i class="fab"></i>ایجاد حساب جدید</div>
</div>
</form>
</td>
</tr>
</table>


</body>
</html>
mazoolagh
شنبه 20 مرداد 1403, 09:33 صبح
سلام و روز خوش

1- ie11 (به عنوان انجین کنترل web browser با استفاده از تگ متا http-equiv) از همه امکانات html5 - css3 - javascript es6 پشتیبانی نمیکنه!
مقایسه edge با ie11 از نظر پشتیبانی از CSS , HTML5 , JS , JS API , Other , Security ,SVG (https://caniuse.com/?compare=edge+127,ie+11&compareCats=CSS,HTML5,JS,JS%20API,Other,Security,S VG)

2- شما دیگه نمیتونین ie رو مستقیما اجرا
و چگونگی رندر شدن یک پیج رو در کنترل وب بروزر تست کنین،
ولی میتونین از امکان ie mode مرورگر edge استفاده کنین:
settings ==> default browser ==> Allow sites to be reloaded in Internet Explorer mode (IE mode)

155953

3- در مورد این مسئله خاص (اسکرول خوردن فرم)
کافی هست برای body ، ویژگی overflow رو hidden کنین:
body {
background-color: #080710;
height: 100% !important;
overflow: hidden;
}
ROSTAM2
سه شنبه 03 مهر 1403, 20:24 عصر
سلام مجدد

من توی صفحه ای که دارم یک شیء div دارم با overflow = scrool اما نمی دونم برای width چه تدبیر کنم که فقط به اندازه ابعاد شیء والد باقی بمونه
156103


#ArticleText{
width: auto;
max-width: auto;
min-height: 400px;
height: auto;
max-height: 1000px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 5px;
background-color: window;

font-family: 'Source Code Pro';
font-size: 16px;

resize: none;
text-align:left ;
direction: ltr;
overflow: scroll;
}


<div id="ArticleText" >
<pre>
<code>
<cm>' Visyal Basic comment</cm>

Dim A As String <op>=</op> <str>"Hello World."</str>

</code>
</pre>

</div>


ناگفته نمونه که این بگ div در یک سلول td از یک جدول هست....

راهکار لطفا.....

با تشکر.
mazoolagh
چهارشنبه 04 مهر 1403, 11:31 صبح
سلام و روز خوش

مطمئن نیستم درست گرفته باشم مطالب رو،
ولی overflow-x و overflow-y هم داریم (واضحه که منظور افقی و عمودی هست اینجا).

یک تست بکنین.