حل مشکل بازنشدن لیست کشویی یا Drop-down در Bootstrap فارسی

در شرایط امروز طراحی وب در دنیا کمتری کسی پیدا میشود که به جای نوشتن تک تک کدهای تکراری از فریم ورک های فرانت اند و بک اند استفاده نکند. یکی از محبوب ترین فریم ورک های طراحی وب در دنیا چهارچوب قدرتمند Bootstrap می باشد.

اگر شما هم یک توسعه دهنده Frontend سایت باشید، مطمئنا تا برای استفاده ازین چهارچوب در پروژه های فارسی یا راست چین دچار مشکلاتی شده اید. یکی ازین مشکلات پرش عناصری از سایت که داری لیست کشویی یا drop-down هستند! در پروژه بوتسترپ فارسی و در نسخه های مختلفی که در وب موجود هست این مشکل مشاهده شده. که سعی میتونیم با یک راهکار ساده این موضوع را برطرف کنیم.

آنچه در این مطلب میخوانید:

[quote]پیشنهاد ویژه: سایت آماده تهیه غذای خانگی مادرانه[/quote]

برای اینکار کافی ست از مسیر پروژه خود فایل chosen.css را با یک ادیتور باز کنید.

حالا به دنبال تگ زیر بگردید:

.chzn-container .chzn-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.chzn-container .chzn-drop {

position: absolute;

top: 100%;

left: -9999px;

z-index: 1010;

width: 100%;

border: 1px solid #aaa;

border-top: 0;

background: #fff;

box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

}

به شکل زیر تغییر میدهیم:

پست پیشنهادی : آموزش تغییر لوگو و favicon در پوسته‌های وبلاگ نویسی وردپرس

.chzn-container .chzn-drop {
  position: absolute;
  top: 100%;
  left: 9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.chzn-container .chzn-drop {

position: absolute;

top: 100%;

left: 9999px;

z-index: 1010;

width: 100%;

border: 1px solid #aaa;

border-top: 0;

background: #fff;

box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);

}

همچنین تگ زیر را پیدا میکنیم:

.chzn-container-single .chzn-search input[type="text"] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: white url('chosen-sprite.png') no-repeat 100% -20px;
  background: url('chosen-sprite.png') no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chzn-container-single .chzn-search input[type="text"] {

margin: 1px 0;

padding: 4px 20px 4px 5px;

width: 100%;

height: auto;

outline: 0;

border: 1px solid #aaa;

background: white url('chosen-sprite.png') no-repeat 100% -20px;

background: url('chosen-sprite.png') no-repeat 100% -20px;

font-size: 1em;

font-family: sans-serif;

line-height: normal;

border-radius: 0;

}

آن را به صورت زیر تغییر میدهیم:

.chzn-container-single .chzn-search input[type="text"] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: white url('chosen-sprite.png') no-repeat 100% -20px;
  background: url('chosen-sprite.png') no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
  display:none;
}