ورود

View Full Version : سوال: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه


ROSTAM2
سه شنبه 06 شهریور 1403, 10:00 صبح
با سلام
من دوتا fieldset دارم هر کدوم توی یک خونه مجزا در یک ردیف از جدول هستن اما fieldset اولی از خونه اولی ردیف جدول ارتفاعش 100 درصد نمی شه باید از چه attributی استفاده کنم با چه مقداری...

156000

کد Body:

<body dir="rtl">
<table width="700px" align="center" style="" cellspacing="20px" cellpadding="20">
<col width="auto" />
<col width="auto" />
<tr>
<td class="header" colspan="2">مدیریت حساب کاربری</td>
<td></td>
</tr>
<tr>
<td style="vertical-align: top; ">
<fieldset style=" width: auto;height: 100%; ">
<legend>(<span name="num"></span>)&nbsp;
ویرایش اطلاعات حساب کاربری:</legend>
<div style="float: left;">
<label for="UserID">پست الکترونیک:</label>
<input id="UserID" name="UserID" type="text" style="width:350px" />
</div>
<div style="float: left;">
<label for="UserName">نام کاربری (نام و نام خانوادگی):</label>
<input id="UserName" name="UserName" type="text" style="width:350px" />
</div>
<div style="float: left; display: block">
<button id="SaveChangesButton" name="SaveChangesButton">ثبت تغییرات</button>
</div>
</fieldset>


</td>
<td width="auto" style="vertical-align: top;width: max-content">


<fieldset style="width: auto;height: 100%;">

<legend>(<span name="num"></span>)&nbsp;
تغییر رمز عبور:</legend>
<div style="float: left;">
<label for="OldPassword">رمز:</label>
<input id="OldPassword" name="OldPassword" type="password" style="width:350px" />
</div>
<div style="float: left">
<label for="Password">رمز جدید:</label>
<input id="Password" name="Password" type="password" style="width:350px" />
</div>
<div style="float: left;display: block">
<label for="ConfirmPassword">تائید رمز:</label>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" style="width:350px" />
</div>

<div style="float: left; display: block;">
<button style="display: inline-block;" id="ChangePasswordButton" name="ChangePasswordButton" >تغییر رمز عبور</button>
</div>
</fieldset>
</td>
</tr>

</table>


</body>
mazoolagh
یک شنبه 11 شهریور 1403, 16:22 عصر
سلام و روز خوش

چند مورد هست که مشخص نکردین:


در چه مرورگری قرار هست دیده بشه؟ آیا در کنترل وب بروزر با متا http-equiv(معادل ie11) ؟


چون روشهایی مثل flexbox برای مرورگرهای مدرن هست.



بعد که این 2 فیلدست هم قد شدن، المانهای توی اونی که قدش بلند میشه چجوری align بشن؟


فعلا تا اینها رو مشخص کنین
موقت میتونین به فیلدست ها height بدین.
ROSTAM2
یک شنبه 11 شهریور 1403, 22:23 عصر
سلام و روز خوش

چند مورد هست که مشخص نکردین:


در چه مرورگری قرار هست دیده بشه؟ آیا در کنترل وب بروزر با متا http-equiv(معادل ie11) ؟


چون روشهایی مثل flexbox برای مرورگرهای مدرن هست.



بعد که این 2 فیلدست هم قد شدن، المانهای توی اونی که قدش بلند میشه چجوری align بشن؟


فعلا تا اینها رو مشخص کنین
موقت میتونین به فیلدست ها height بدین.

سلام

برای WebBrowser می خوام....

اگه به فیلد ست دقت کنید height رو 100% مقداردهی کردم



<fieldset style=" width: auto;height: 100%; ">



می خوام فقط کلیدو پایین فیلدست باشه مثل سمت چپیو ....

156011
ROSTAM2
یک شنبه 11 شهریور 1403, 22:31 عصر
اینم Style صفحه:


<style>

.header{
width: auto;
background-color: #2196F3;
color:white;
justify-content: center;
padding: 5px;
font-size: 24px;
border-radius: 10px;
text-align: center;
}
td {
counter-increment: Index;
}

span[name="num"]::after{
content: counter(Index);
}

fieldset{
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
height: 100%;
display: inline-block;
border: none;

text-align: center;
vertical-align: middle;
}
legend{font-size: 20px;
color:#573b8a;}
label
{

color: ;
font-size: large;
justify-content: center;
display: flex;
margin: 0px;
font-weight: bold;
cursor: pointer;
transition: .5s ease-in-out;
}
input
{
width: 60%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 20px;
margin-top: 5px;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
font-size: medium;
font-family: 'Baloo Bhaijaan 2';
text-align: center;
}
div{
display: block;

}
button
{
width: auto;
height: auto;
margin: 10px;
padding-right: 20px;
padding-left: 20px;
justify-content: center;
display: flex;
color: #fff;
background: #573b8a;
font-size: 1em;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
transition: .2s ease-in;
cursor: pointer;
font-family: 'Baloo Bhaijaan 2';
}
button:hover
{
background: #6d44b8;
}
</style>
ROSTAM2
یک شنبه 11 شهریور 1403, 22:37 عصر
اسناد HTML و CSS:
mazoolagh
دوشنبه 12 شهریور 1403, 12:32 عصر
سلام دوباره

متوجه منظور شما هستم،
میخواستم مطمئن بشم راه حلی که میدم تو کنترل وب بروزر هم کار کنه.

ببینین،
روش رندر table اینجوریه که اولا برای هر td اندازه المانهای های توش محاسبه میشه،
بعد برای هر tr بر اساس بزرگترین height متناظر و برای هر ستون هم بزرگترین width (با احتساب margin و padding و ...) محاسبه میشه،
دست آخر هست این اندازه ها اعمال میشه.

پس وقتی شما برای fieldset مشخص میکنین height=100% عملا تاثیری نداره،
چون اون موقع هنوز اندازه های tdش مشخص نشده.

برای همین بود که نوشتم:

موقت میتونین به فیلدست ها height بدین.
چون اینجوری دیگه td تکلیف خودش رو میدونه.

حالا شما میتونین این height معین (و نه هنوز محاسبه نشده) رو یا به fieldset بدین یا td.
من نمونه ساده درست میکنم که این مطلب رو نشون بده.

ولی راه های دیگه هم هست که یکی یکی اونها رو هم میگم.
mazoolagh
دوشنبه 12 شهریور 1403, 14:39 عصر
برای دیده شدن مشکل یک نمونه ساده بر اساس همین ساختار کنونی شما (گذاشتن هر fieldset در یک td) درست کردم،
بخشهای اضافی اون رو که نیازی نبود برداشتم (divهای دور فیلدها)،
همه inline styleها رو برداشتم و به بخش style در head بردم تا نگهداری و خوندن داکیومنت ساده تر باشه،
استایل ها رو ساده کردم که فقط وضعیت رو نشون بده- برای همین دورtdها و fieldsetها border گذاشتم،
و برای اینکه مطمئن بشم در کنترل web-browser هم همین رو میبینم اون رو در compatibility view مرورگر edge تست کردم:

156013
کدهای html
<body>
<table id="frame">
<thead>
<tr>
<th colspan="2" class="header">مدیریت حساب کاربری</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<fieldset>
<legend>(<span name="num"></span>) ویرایش اطلاعات حساب کاربری </legend>
<label for="UserID">پست الکترونیک:</label>
<input id="UserID" name="UserID" type="text" />
<label for="UserName">نام کاربری (نام و نام خانوادگی):</label>
<input id="UserName" name="UserName" type="text" />
<button id="SaveChangesButton" name="SaveChangesButton">ثبت تغییرات</button>
</fieldset>
</td>
<td>
<fieldset>
<legend>(<span name="num"></span>) تغییر رمز عبور </legend>
<label for="OldPassword">رمز:</label>
<input id="OldPassword" name="OldPassword" type="password" />
<label for="Password">رمز جدید:</label>
<input id="Password" name="Password" type="password" />
<label for="ConfirmPassword">تائید رمز:</label>
<input id="ConfirmPassword" name="ConfirmPassword" type="password" />
<button id="ChangePasswordButton" name="ChangePasswordButton">تغییر رمز عبور</button>
</fieldset>
</td>
</tr>
</tbody>
</table>
</body>

کدهای css
body {
direction: rtl;
font-family: Vazirmatn;
}


.header {
background-color: #2196F3;
color: white;
}


#frame {
margin: 0px auto;
}


#frame td {
padding: 20px;
width: 300px;
counter-increment: Index;
}


#frame td,
#frame th {
outline: 2px solid red;
}


#frame fieldset {
display: flex;
flex-direction: column;
border: 2px solid green;
background-color: bisque;
}


#frame input {
margin-bottom: 10px;
}


#frame button {
font-family: Vazirmatn;
}


span[name="num"]::after {
content: counter(Index);
}

ساختار کلی داکیومنت
<!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>589361</title>
<style>
...
</style>
</head>


<body>
...
</body>


</html>

خب مشخص هست که فیلدست سمت راست چون اندازه اش مشخص نیست
نمیتونه قدش رو با سمت چپی یکی کنه (اون 100% رو برداشتم چون تاثیری نداره)
mazoolagh
دوشنبه 12 شهریور 1403, 15:34 عصر
مشخص هست که اگر برای فیلدست height مشخصی معین کنیم (مثلا 300px) مشکلی نیست.
پس در این مسئله خاص یک راه این هست که خودمون در مرورگر اندازه بزرگترین فیلدست رو پیدا،
و بعد در داکیومنت اعمال کنیم.

من این کار رو انجام دادم (در پست های بعدی روش رو یاد میدم) و اندازه 225px بدست اومد (نیاز به توضیح نیست برای این داکیومنت در همین شرایط).
اگر این داکیومنت ما کلا قرار نیست رسپانسیو باشه و ساختارش هم استاتیک هست،
میتونیم همین رو ست کنیم و خلاص!

#frame fieldset {
display: flex;
flex-direction: column;
border: 2px solid green;
background-color: bisque;
height:225px;
}

156014

و اگر height=300px بگذاریم:

156015
mazoolagh
دوشنبه 12 شهریور 1403, 19:25 عصر
حالا اگر که height فیلدست ها رو بخوایم بر اساس اندازه td مشخص کنیم،
باید به td یک height شناخته شده بدیم.

مثلا اگر قد td رو 40% از قد viewport بگذاریم،
چون قد viewport مشخص هست،
در زمان رندر شدن fieldset اندازه اون مشخص هست
و اینبار اگر نسبت به قد td مشخص کنیم درست کار میکنه:

#frame td {
padding: 20px;
width: 300px;
counter-increment: Index;
height: 40vh;
}


#frame fieldset {
display: flex;
flex-direction: column;
border: 2px solid green;
background-color: bisque;
height:100%;
}

156016
mazoolagh
دوشنبه 12 شهریور 1403, 19:50 عصر
اگر برمبنای همین روش کنونی بخواهیم پیش بریم (یعنی هر فیلدست در tdهای کنار هم از یک tr)،
با css تنها دستمون بسته است اگر بخواهیم که همه فیلدست ها قدشون با
بلندترین اونها (که قد خودش هم خودکار بر اساس المانهای داخلش هست) بصورت خودکار یکسان باشه.

میتونیم از javascript کمک بگیریم که خودش این محاسبات رو انجام بده،
فقط باید دقت کنیم کد زمانی باید اجرا بشه که همه المانها رندر شده باشن و اندازه هاشون محاسبه شده باشه،
برای همین در رخداد window.onload این کار رو میکنیم.

به این روش که در یک حلقه height همه فیلدست ها رو میخونیم و در یک array میریزیم (منظور height بعد از رندر همه المانها هست و نه اونی که با style ست کردیم)،
بعد بزرگترینشون رو پیدا میکنیم،
ودر یک حلقه دیگه height همه رو به این ست میکنیم:

<script>
window.addEventListener("load", function () {
let fsx = document.querySelectorAll('#frame fieldset');
var heights = [];
for (var i = 0; i < fsx.length; i++) {
heights.push(parseFloat(window.getComputedStyle(fs x[i]).height));
};
const max_height = Math.max.apply(null, heights);
//UserID.value = max_height;
for (var i = 0; i < fsx.length; i++) {
fsx[i].style.height = max_height + 'px';
};
});
</script>

گرچه اینجا فقط 2 تا فیلدست داریم و نوشتن حلقه لازم نیست،
ولی راه کلی همینه و میتونه برای هر تعداد به کار بره بدون نیاز به ویرایش کد.

و نتیجه هم که مشخص هست:

156017
mazoolagh
دوشنبه 12 شهریور 1403, 19:59 عصر
اگر در پست بالایی دقت کرده باشین
در فیلد userid یک اندازه 225.1 دیده میشه.

این همون 225 پیکسل هست که در پشت شماره 8 صحبتش شد،
و از اینجا میاد:
UserID.value = max_height;

و باید حتما در مود compatibility مرورگر اجرا بشه تا اندازه درست بدست بیاد!
ROSTAM2
سه شنبه 13 شهریور 1403, 10:03 صبح
سلام مجدد

ممنون از تلاش هاتون
من با تغییر Display به flex اینا از tr ماجرای ارتفاعشو حل کردم....
اما web browser از خصوصیت های align-content و justify-content پشتیبانی نمی کنه:

156018

ولی همین سند در Edge به درستی نمایش داده می شه....

156019

در مورد WebView2 هم من گشتم و دانلود کردم ولی نسخه مناسب با VS 2010 رو پیدا نکردم و شایدم خیلی مشتاقش نبودم.
mazoolagh
سه شنبه 13 شهریور 1403, 14:47 عصر
سلام دوباره


من با تغییر Display به flex اینا از tr ماجرای ارتفاعشو حل کردم....
البته من هنوز تموم نکرده بودم مطلب رو
و روش های دیگه هم با table و هم بدون اون رو هم میخواستم بتدریج و سر فرصت اضافه کنم،
که گویا دیگه موضوعیتی نداره.
ولی اگر شما یا دیگری علاقمند هست میشه هنوز ادامه داد بحث رو تا تکمیل بشه.

یک جزئیاتی هم هست که میدونستم بهش میرسین:

اما web browser از خصوصیت های align-content و justify-content پشتیبانی نمی کنه:
برای همین در پست 2 پرسیده بودم:

بعد که این 2 فیلدست هم قد شدن، المانهای توی اونی که قدش بلند میشه چجوری align بشن؟
و البته که پشتیبانی ie11 از flexbox (و بعضی چیزای دیگه) نصفه-نیمه است (partial) ،
و هر چیزی رو باید تست کنین:

روشهایی مثل flexbox برای مرورگرهای مدرن هست.

ولی اونی که در وب بروزر هست قشنگتره! (نظر شخصی)
چون فیلدها و لیبل ها با هم تراز هستن.



ولی همین سند در Edge به درستی نمایش داده می شه....
این رو چند بار در جاهای مختلف همین سایت دلایلش رو توضیح دادم - یکیش که ذهنم یاری میکنه:
سوال: چرا این صفحه Scrollable می شود؟! (barnamenevis.org) (https://barnamenevis.org/showthread.php?589131-%DA%86%D8%B1%D8%A7-%D8%A7%DB%8C%D9%86-%D8%B5%D9%81%D8%AD%D9%87-Scrollable-%D9%85%DB%8C-%D8%B4%D9%88%D8%AF%D8%9F!)

تصویر پیوست پست 1 هم از همین دسته هست ،
فکر کنم اونجا برای legend یک border گذاشته بودین که در وب بروزر فاجعه میشه،
برای همین در کدهای پست 5 کنار گذاشته بودین.
mazoolagh
سه شنبه 13 شهریور 1403, 15:00 عصر
در مورد WebView2 هم من گشتم و دانلود کردم ولی نسخه مناسب با VS 2010 رو پیدا نکردم و شایدم خیلی مشتاقش نبودم.
این webview2 رو در جریان باشین که:
درسته که چون از انجین کرومیوم استفاده میکنه مشکلات مربوط به html/css/javascript رو درنمایش داکیومنت ها نخواهید داشت،
ولی به اون سادگی و زیبایی که در کنترل وب بروزر به dom دسترسی و تعامل دارین نیست،
و واقعا کار باهاش اعصاب قوی میخواد و دیگه فان نیست!

برای ساخت فرم های زیبا همین وب بروزر کافی هست.