مشكلة في عمل transition فتح و غلق الelement

وعليكم السلام ورحمة الله وبركاته .

الخطأ لديك اخى الكريم فى العنصر الذى يحتوى على السمة feedback-v2 فلاحظ انك لتضع مكانه فى اخر الصفحة قمت باستخدام الخاصية margin-top وهى تقوم بوضع مسافات بين العناصر وبذلك وضعت مسافة بين هذا العنصر وبداية الصفحة . وعندما تقوم بعمل ال transition فان طول العنصر يصبح اكبر وبذلك المكان الخاص بالعنصر يتغير ويقوم بازاحة العناصر الاخرى لذلك يحدث تمرير للصفحة .

ولحل تلك المشكلة فيجب علينا ان نحذف العنص من ال flow  بحيث لا يتعامل مع العناصر الاخر فلا يوثر على مكانها  .

ويمكننا استخدام الخاصية postion:absolute فهذه الخاصية تقوم بحذف العنصر من ال flow ويصبح كانه عائما فى الصفحة فلا يؤثر على اماكن العناصر التى معه وبذلك طول الصفحة .

فيمكنك حذف ال margin-top واضافة تلك الخصائص فى السمة feedback-v2.

position: absolute;
bottom: 0;

واذا اردت ان تجعل هذا العنصر ثابت تماما فى اخر الصفحة حتى معى التمرير يظل ثابت قم بوضع fixed بدلا من absoulte وهاتين الطريقتين ستحل لك المشكلة فيمكنك استخدام ما تريد منهما

شكرا جزيلا لك اخ محمد أولا، قمت بتجربتها نعم نجحت و لكن اذا اضفت المزيد من checkboxes فبعض العناصر تختفي او يقطع منها ، اضافة الى ذلك هذا العنصر لا اريد مكانه في bottom سيكون فوق الfooter

العفو اخى الكريم .

نعم يمكن وضع العنصر كاملا داخل عنصر جديد ويجب على هذا العنصر ان يحتوى خاصية position:relative ووضعه قبل ال footer ولكن تاكد من هذا العنصر طوله مثل طول العنصر عند فتحه حتى لل يحدث مشكلة .

واذا اضفت مزيد من العناصر فللاسف لن يظهر سوى العناصر التى تساوى طول الصفحة حاول جعل ال body يحتو على height كبير بحيث يظهر شريط التمرير سيعمل معك .

كما وضحت لك فان العنصر سيكون عائما اى اذا طوله اصبح اكبر من طول الصفحة فان الباقى لن يظهر لانه اصبح خارج الصفحة. 

هناك حل اخر باستخدام الجافا سكريبت يمكنك الشرجوع الى التصميم الاساسى الخاص بك وعند الضغط وبعد عمل ال transition قم بعمل scroll لاسفل الصفحة بالجافاسكريبت واعتقد ان هذا الحل المناسب لما تريد ان تقوم به .

شكرا لك اخي الكريم محمد ، جزاك الله خيرا