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

Printable View

1 ضمیمه

با سلام
من دوتا 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>

یک شنبه 11 شهریور 1403, 16:22 عصر
mazoolagh

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

چند مورد هست که مشخص نکردین:
- در چه مرورگری قرار هست دیده بشه؟ آیا در کنترل وب بروزر با متا http-equiv(معادل ie11) ؟
چون روشهایی مثل flexbox برای مرورگرهای مدرن هست.
- بعد که این 2 فیلدست هم قد شدن، المانهای توی اونی که قدش بلند میشه چجوری align بشن؟
فعلا تا اینها رو مشخص کنین
موقت میتونین به فیلدست ها height بدین.
یک شنبه 11 شهریور 1403, 22:23 عصر
ROSTAM2

1 ضمیمه

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

سلام و روز خوش

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

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

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

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

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

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

اگه به فیلد ست دقت کنید height رو 100% مقداردهی کردم
نقل قول:
<fieldset style=" width: auto;height: 100%; ">
می خوام فقط کلیدو پایین فیلدست باشه مثل سمت چپیو ....

ضمیمه 156011

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

اینم 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>

یک شنبه 11 شهریور 1403, 22:37 عصر
ROSTAM2

1 ضمیمه

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

اسناد HTML و CSS:
دوشنبه 12 شهریور 1403, 12:32 عصر
mazoolagh

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

سلام دوباره

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

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

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

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

نقل قول:

موقت میتونین به فیلدست ها height بدین.

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

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

ولی راه های دیگه هم هست که یکی یکی اونها رو هم میگم.

1 ضمیمه

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

برای دیده شدن مشکل یک نمونه ساده بر اساس همین ساختار کنونی شما (گذاشتن هر 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% رو برداشتم چون تاثیری نداره)

دوشنبه 12 شهریور 1403, 15:34 عصر
mazoolagh

2 ضمیمه

نقل قول: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
مشخص هست که اگر برای فیلدست height مشخصی معین کنیم (مثلا 300px) مشکلی نیست.
پس در این مسئله خاص یک راه این هست که خودمون در مرورگر اندازه بزرگترین فیلدست رو پیدا،
و بعد در داکیومنت اعمال کنیم.

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

            display: flex;

            flex-direction: column;

            border: 2px solid green;

            background-color: bisque;

            height:225px;

        }
```
ضمیمه 156014

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

ضمیمه 156015
دوشنبه 12 شهریور 1403, 19:25 عصر
mazoolagh

1 ضمیمه

نقل قول: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
حالا اگر که 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
دوشنبه 12 شهریور 1403, 19:50 عصر
mazoolagh

1 ضمیمه

نقل قول: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
اگر برمبنای همین روش کنونی بخواهیم پیش بریم (یعنی هر فیلدست در 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
دوشنبه 12 شهریور 1403, 19:59 عصر
mazoolagh

نقل قول: چطور ارتفاع یک fieldset رو در یک خانه از جدول fit خانه جدول می شه
اگر در پست بالایی دقت کرده باشین
در فیلد userid یک اندازه 225.1 دیده میشه.

این همون 225 پیکسل هست که در پشت شماره 8 صحبتش شد،
و از اینجا میاد:
```
UserID.value = max_height;
```
و باید حتما در مود compatibility مرورگر اجرا بشه تا اندازه درست بدست بیاد!
سه شنبه 13 شهریور 1403, 10:03 صبح
ROSTAM2

3 ضمیمه

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

سلام مجدد

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

ضمیمه 156018

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

ضمیمه 156019

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

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

سلام دوباره

نقل قول:

من با تغییر Display به flex اینا از tr ماجرای ارتفاعشو حل کردم....

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

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

نقل قول:

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

برای همین در پست 2 پرسیده بودم:

نقل قول:

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

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

نقل قول:

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

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

نقل قول:

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

این رو چند بار در جاهای مختلف همین سایت دلایلش رو توضیح دادم - یکیش که ذهنم یاری میکنه:
سوال: چرا این صفحه Scrollable می شود؟! (barnamenevis.org)

تصویر پیوست پست 1 هم از همین دسته هست ،
فکر کنم اونجا برای legend یک border گذاشته بودین که در وب بروزر فاجعه میشه،
برای همین در کدهای پست 5 کنار گذاشته بودین.
سه شنبه 13 شهریور 1403, 15:00 عصر
mazoolagh

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

نقل قول:

در مورد WebView2 هم من گشتم و دانلود کردم ولی نسخه مناسب با VS 2010 رو پیدا نکردم و شایدم خیلی مشتاقش نبودم.

این webview2 رو در جریان باشین که:
درسته که چون از انجین کرومیوم استفاده میکنه مشکلات مربوط به html/css/javascript رو درنمایش داکیومنت ها نخواهید داشت،
ولی به اون سادگی و زیبایی که در کنترل وب بروزر به dom دسترسی و تعامل دارین نیست،
و واقعا کار باهاش اعصاب قوی میخواد و دیگه فان نیست!

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