1 ضمیمه
جلوگیری از تغییر سایز HTMLElement وقتی متنش پاکسازی می شه
سلام این ها Tag Div خستند که توی خودشون تگ h2 و h3 دارن و کلاس box برای استایل
اما وقتی h3 متن نداشته باشه تغییر سایز می ده! با چه Element یا استایلی از HTML می شه از این تغییر سایز جلوگیری کرد؟؟؟!
ضمیمه 156058
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<style type="text/css">
body {margin:0;
font-family: 'Baloo Bhaijaan 2';
}
input
{ width:94%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 0px;
padding: 3px;
/* border: none;
outline: none; */
border-radius: 5px;
font-size: medium;
font-family:'Baloo Bhaijaan 2';
}
/* .header {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
padding: 20px;
margin: 10px;
} */
.content{
/* margin: 0;
padding: 0; */
/* overflow: hidden; */
position: fixed;
/* background-color: whitesmoke; */
/* width: 100%; *?
/* padding: 20px; */
margin: 140px 10px 10px 10px;
}
.header{
padding: 5PX 10px;
margin: 10px 0px 0 0px;
display: block;
/* position: fixed; */
border-radius: 10px;
background-color: #333;
color: white;
border-color: chartreuse;
border-width: medium;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}
#PersonalInfp{
padding: 5PX 10px;
margin: 10px 0px 0 0px;
display: block;
/* position: fixed; */
border-radius: 10px;
background-color: #333;
color: white;
border-color: chartreuse;
border-width: medium;
}
.content td{
/* color: maroon; */
text-align: center;
white-space: nowrap;
border-width:1px;
border-left: 1px;
border-left-color: black;
border-left-style: solid;
/* border-bottom-width:1px;
border-bottom-color: blue;
border-bottom-style: solid; */
}
.content tr:nth-child(even) {
background-color: #D6EEEE;
}
/* .content tr{
padding: 7PX 15px;
display: inline-table;
border-radius: 10px;
width: 100%;
border-width:1px;
border-color: blue ;
border-style: solid ;
} */
.header td{
color: white;
text-align: center;
white-space: nowrap;
/* border-width:1px;
border-left: 1px;
border-left-color: white;
border-left-style: solid; */
}
.active {
background-color: #04AA6D;
}
button
{
width: auto;
height: 40px;
padding: 10px 20px 10px 20px;
margin: 10px ;
justify-content: center;
display: inline-block;
color: #fff;
background: #573b8a;
font-family: inherit;
font-size: 14px;
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: green;
}
button:active{
background: silver;
}
.box{
display: inline-block;
margin: 5px 0 0 0;
padding: 10px 10px 0px 10px ;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}
hr{ margin: 0;
}
h3, h3{
padding: 0;
margin: 0;
content: ' ';
}
</style>
</head>
<body dir="rtl">
<!--<ul id="columns">
</ul>-->
<!--<table id="FieldsTable" style="width: 100%;margin-top:35px;background-color: #333;" border="0" cellspacing="0" cellpadding="0">
</table>-->
<table width="100%" align="center" style="text-align: center !important">
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >اطلاعات پایگاه</td>
</tr>
</table>
<table id="BaseInfoTable" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>استان</h3>
<hr>
<div style="text-align: center">
<h3 id="Shire">8</h3>
</div>
</div>
<div class="box">
<h3>ناحیه</h3>
<hr>
<div style="text-align: center">
<h3 id="Area">8</h3>
</div>
</div>
<div class="box">
<h3>حوزه</h3>
<hr>
<div style="text-align: center">
<h3 id="Scope">8</h3>
</div>
</div>
<div class="box">
<h3>عنوان پایگاه</h3>
<hr>
<div style="text-align: center">
<h3 id="Base">8</h3>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >اطلاعات فردی</td>
</tr>
</table>
<table id="PersonalImfo" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>نام و نام خانوادگی</h3>
<hr>
<div style="text-align: center">
<h3 id="FullName">8</h3>
</div>
</div>
<div class="box">
<h3>کد ملی</h3>
<hr>
<div style="text-align: center">
<h3 id="NationalCode">8</h3>
</div>
</div>
<div class="box">
<h3>تاریخ تولد</h3>
<hr>
<div style="text-align: center">
<h3 id="BirthDate">8</h3>
</div>
</div>
<div class="box">
<h3>نام پدر</h3>
<hr>
<div style="text-align: center">
<h3 id="ParentName">8</h3>
</div>
</div>
<div class="box">
<h3>نام محلّه</h3>
<hr>
<div style="text-align: center">
<h3 id="SectorName">8</h3>
</div>
</div>
<div class="box">
<h3>شماره مجازی</h3>
<hr>
<div style="text-align: center">
<h3 id="CyberNumber">8</h3>
</div>
</div>
<div class="box">
<h3>شماره تماس</h3>
<hr>
<div style="text-align: center">
<h3 id="PhoneNumber">8</h3>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >
نوع عملکرد</td>
</tr>
</table>
<table id="PerformanceTable" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>آدرس کانال (لینک کامل)</h3>
<hr>
<div style="text-align: center">
<h3 id="ChannelURL">8</h3>
</div>
</div>
<div class="box">
<h3>آی.دی کانال</h3>
<hr>
<div style="text-align: center">
<h3 id="ChanelID">8</h3>
</div>
</div>
<div class="box">
<h3>نوع پلتفرم</h3>
<hr>
<div style="text-align: center">
<h3 id="Platform">8</h3>
</div>
</div>
<div class="box">
<h3>تعداد اعضای کانال</h3>
<hr>
<div style="text-align: center">
<h3 id="Followers"></h3>
</div>
</div>
<div class="box">
<h3>پروفایل (متناسب با چارچوب رسانه محلّه)</h3>
<hr>
<div style="text-align: center">
<h3 id="profile"></h3>
</div>
</div>
<div class="box">
<h3>بیوگرافی (توضیحات کانال در بیو، لینک کانال، آی.دی ادمین جهت ارتباط گیری)</h3>
<hr>
<div style="text-align: center">
<h3 id="Biography"></h3>
</div>
</div>
<div class="box">
<h3>قالب مشخص روزانه(شرو و پایان مشخص، فعالیت روزانه)</h3>
<hr>
<div style="text-align: center">
<h3 id="ActivityTime">8</h3>
</div>
</div>
<div class="box">
<h3>انتشار اخبار و رخدادهای محلی و محتوای جذاب(آپلود حداقل 10 محتوا در روز)</h3>
<hr>
<div style="text-align: center">
<h3 id="ShareContent">8</h3>
</div>
</div>
<div class="box">
<h3>پیگیری مطالبات مردمی</h3>
<hr>
<div style="text-align: center">
<h3 id="FollowUp">8</h3>
</div>
</div>
<div class="box">
<h3>نوع عملکرد</h3>
<hr>
<div style="text-align: center">
<h3 id="Rate">8</h3>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
1 ضمیمه
نقل قول: جلوگیری از تغییر سایز HTMLElement وقتی متنش پاکسازی می شه
تعیین یک اندازه مشخص برای ارتفاع div نظم اشیاء را در خانه table بهم می ریخت که با تنظیم خصوصیت display از کلاس box به inline-table این مشکل رفع شد:
.box{
display: inline-block;
margin: 5px 0 0 0;
padding: 10px 10px 0px 10px ;
border-radius: 5px;
display:inline-table;
position:;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}
ضمیمه 156059
نقل قول: جلوگیری از تغییر سایز HTMLElement وقتی متنش پاکسازی می شه
فکر کنم اگر بجای div خالی، یک هم درونش بذارین درست بشه.