مدیریت محتوای طولانی و غیرمنتظره توسط CSS - قسمت 2



visibility  
mode_comment   ۰

همونطور که میدونید در جلسه قبل یک مثال رو با هم بررسی کردیم و در اون مشکل قرار گرفتن متن بر روی آیکون رو با اضافه کردن Padding-right حل کردیم. در این جلسه میخوایم مثال دیگه ای رو با هم بررسی کنیم و روش حل اون رو یاد بگیریم.

مثال 2 : Placeholder مربوط به ورودی یا Input ها

همونطور که در تصویر بالا میبینید، دو حالت قرار گرفته. حالت اول و بالایی یک متن کوتاه برای Placeholder قرار گرفته و همونطور که میبینید به خوبی نمایش داده شده و هیچ مشکلی نداره. اما زمانی که متن ما مقداری طولانی تر میشه، متن بر روی دکمه قرار میگیره و ظاهر سایت رو به هم میریزه. زمانی که ما از الگوی Label شناور استفاده میکنیم و مخصوصا زمانی که یک دکمه در سمت راست input قرار داره، باید شرایط رو برای طولانی بودن متن در نظر بگیریم تا به مشکل برنخوریم. کد مربوط به این Input بصورت زیر هست:

کد css:

کد Javascript:

کد javascript رو به این دلیل قرار دادیم که زمانی که متنی درون Input وارد میکنیم و بعد از اون بر روی جای دیگری کلیک کنیم، طرحمون به هم نخوره و Placeholder بر روی متن ورودی ما قرار نگیره. با اینکار خروجی بصورت زیر میشه:

میبینید که متن Placeholder بر روی دکمه قرار گرفته و این خیلی جالب نیست. شما میتونین از یک روش ساده استفاده کنید و کاری کنید که این دکمه بر روی متن قرار بگیره و اگر متن طولانی بود، به زیر دکمه بره. برای حل این مشکل به دکمه مورد نظر position: relative رو اضافه میکنیم. اینکار باعث میشه که دکمه بر روی متن قرار بگیره و ظاهر بهم نریزه. کد زیر رو برای دکمه اضافه میکنیم:

با اینکار خروجی بصورت زیر میشه:

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

در جلسه بعد با ادامه آموزش در خدمتتون هستیم و مثالها و مشکلات دیگه رو بررسی میکنیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.