اذهب إلى المحتوى
  • 0

sidebar scrolling not working

محمد المصري12

بواسطة محمد المصري12

 مشاركة

السؤال

محمد المصري12 عضو نشيط

محمد المصري12

نشر
نشر

سلام عليكم

السايد بار ما بيعملش سكرول معايا بالماوس عشان اظهر البنود اللي تحت خالص

مثال في الصور

2.jpg.bbcc784f355d20be23689cf634d5a0d2.jpg

لو فتحت خانة الاوردرات مقدرش اشوف اللي تحتها غير لو صغرت حجم الشاشة -ctrl

لو فتحت مصلا قسم التصميم اللي تحته بيختفي معرفش ارول بالماوس اجيب اللي تحته زي ما حضراتكم شايفين كده

3.jpg.1c09c7ac2816de7ab59883ae21950333.jpg

ده كود ال css الخاص بال sidebar 

.app-sidebar {

    width: 250px;

    display: flex;

    z-index: 11;

    overflow: hidden;

    min-width: 250px;

    position: relative;

    flex: 0 0 280px;

    margin-top: -10px;

    padding-top: 60px;

    margin-bottom:80px;

    transition: all .2s;

    height: 85%;
  
    overflow-y: scroll

}



.app-sidebar .app-sidebar__inner {

    padding: 2px 1.5rem 1.5rem

}



.app-sidebar .scrollbar-sidebar {

    z-index: 15;

    width: 100%;

    overflow: auto;

}



/* width */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar {

    width: 5px;

}



/* Track */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-track {

    background: #f1f1f1; 

}



/* Handle */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb {

    background: #888; 

}



/* Handle on hover */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb:hover {

    background: #555; 

}

انتظر استلام نصائحكم

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

12 أجوبة على هذا السؤال

Recommended Posts

  • 1
سمير عبود عضو نشيط

سمير عبود

نشر
نشر
بتاريخ 2 ساعات قال محمد المصري5:

المشروع كامل صعب جدا حجمه ضخم لكن اختصرته لك بشكل واضح جدا في الملف التالي ، يمكنك تشغيله مباشرة بدون ادنى مشكلة

sidebar.rar

يُمكنك حل المشكلة كالتالي: 

.app-sidebar {

    /* ... */

    overflow: auto; /* سيتم عرض شريط تمرير في حالة تجاوز المحتوى الأبعاد الخاصة بالعنصر */

    
  	/* ... */

    padding-bottom: 60px; /* إضافة حشوة بمقدار 50 بيكسل من الأسفل */

  	/* ... */

}
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 1
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر

يحدث ذلك لأنك تضع خاصية over flow للصنف app-sidebar, حاول ازالتها أو يمكنك تغييرها لتكون كذلك 

    overflow-y: scroll;

أي أنه سوف يكون هناك scroll باتجاه الاعلى وأسفل فقط

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر

شكرا لك

عدلت الكود كالتالي لكن نفس المشكلة 

.app-sidebar {

    width: 250px;

    display: flex;

    z-index: 11;

    min-width: 250px;

    position: relative;

    flex: 0 0 280px;

    margin-top: -10px;

    padding-top: 60px;

    margin-bottom:80px;

    transition: all .2s;

    height: 85%;
  
    overflow-y: scroll

}



.app-sidebar .app-sidebar__inner {

    padding: 2px 1.5rem 1.5rem

}



.app-sidebar .scrollbar-sidebar {

    z-index: 15;

    width: 100%;

    overflow-y: scroll

}



/* width */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar {

    width: 5px;

}



/* Track */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-track {

    background: #f1f1f1; 

}



/* Handle */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb {

    background: #888; 

}



/* Handle on hover */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb:hover {

    background: #555; 

}

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 16 دقائق مضت قال محمد المصري5:

شكرا لك

عدلت الكود كالتالي لكن نفس المشكلة 


.app-sidebar {

    width: 250px;

    display: flex;

    z-index: 11;

    min-width: 250px;

    position: relative;

    flex: 0 0 280px;

    margin-top: -10px;

    padding-top: 60px;

    margin-bottom:80px;

    transition: all .2s;

    height: 85%;
  
    overflow-y: scroll

}



.app-sidebar .app-sidebar__inner {

    padding: 2px 1.5rem 1.5rem

}



.app-sidebar .scrollbar-sidebar {

    z-index: 15;

    width: 100%;

    overflow-y: scroll

}



/* width */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar {

    width: 5px;

}



/* Track */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-track {

    background: #f1f1f1; 

}



/* Handle */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb {

    background: #888; 

}



/* Handle on hover */

.app-sidebar .scrollbar-sidebar::-webkit-scrollbar-thumb:hover {

    background: #555; 

}

 

هل يمكنك ارفاق كود html الخاص sidebar ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر

على الرحب و السعة  

<?php
if(!isset($_SESSION))
{
    session_start();
}
?>

<div class="app-sidebar sidebar-shadow" style="overflow: auto;">
    <div class="app-header__logo">
        <div class="logo-src"></div>
        <div class="header__pane ml-auto">
            <div>
                <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>
    <div class="app-header__mobile-menu">
        <div>
            <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>
    <div class="app-header__menu">
        <span>
            <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                <span class="btn-icon-wrapper">
                    <i class="fa fa-ellipsis-v fa-w-6"></i>
                </span>
            </button>
        </span>
    </div>
    <div class="scrollbar-sidebar">
        <div class="app-sidebar__inner">
            <ul class="vertical-nav-menu">
                <li class="app-sidebar__heading">الوصول السريع</li>
                <li>
                    <a href="index.php">
                        <i class="metismenu-icon pe-7s-home"></i>
                        الرئيسية
                    </a>
                </li>


                <?php

                $permission = $_SESSION['permission'];
                // إعدادات النظام

                if ($permission == 1){ //قسم للادمن  فقط

                    echo '<li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/settings.png" style="width:40px;height:40px;">&nbsp;&nbsp;
                            إعدادات النظام
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
					<div class="dropdown-container">
                        <li>
                            <a href="design.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                الأعدادات الرئيسية
                            </a>
                        </li>
						                  <li>
                            <a href="addfabric.php">
                                <i class="metismenu-icon pe-7s-user text-success"></i>
                                إضافة أقمشة
                            </a>
                        </li>
						
						       <li>
                            <a href="addfiber.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                إضافة ألياف 
                            </a>
                        </li>
						
												       <li>
                            <a href="addstitch.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                               اضافة و تعديل الغرز 
                            </a>
                        </li>
						
							 <li>
                            <a href="addconnections.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                              اضافة و تعديل الوصلات
                            </a>
                        </li>
						
						</div>
					
					
					
					
					';
                }

                // الموظفين
                if ($permission == 1){ //قسم للادمن فقط

                    echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
                            <img src="img/sidebaricons/employee.png" alt="الموظفين" style="width:30px;height:30px;">&nbsp;&nbsp; &nbsp;
							الموظفين 
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                         <li>
                            <a href="addworker.php">
                                <i class="metismenu-icon pe-7s-settings"></i>
                                إضافة موظف جديد
                                
                            </a>
                        </li> 
						<li>
                            <a href="workers.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                استعراض الموظفين
                            </a>
                        </li>
      
                    </div>';

                }

                // العملاء
                echo '
                    <li class="app-sidebar__heading dropdown-btn text-dark">
                        <div aria-expanded="true" class="text-black">
						<img src="img/sidebaricons/customers.png" alt="العملاء" style="width:40px;height:40px;">&nbsp;&nbsp;
                         العملاء 
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </div>
                    </li><div class="dropdown-container"><li>
                            <a href="createuser.php">
                                <i class="metismenu-icon pe-7s-settings"></i>
                                إضافة عميل جديد
                                
                            </a>
                            </li>   
							<li>
                            <a href="users.php">
                                <i class="metismenu-icon pe-7s-users"></i>
                                إستعراض العملاء
                            </a>
                        </li></div>';


                //الموردين
                echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/supplier.png" alt="الموردين" style="width:30px;height:30px;">&nbsp;&nbsp;
                            الموردين
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                          <li>
                            <a href="suppliers_add.php">
                                <i class="metismenu-icon pe-7s-add-user"></i>
                                إضافة مورد
                            </a>
                        </li>
						<li>
                            <a href="supplier_view.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                إستعراض الموردين
                            </a>
                        </li>
						
						                     <li>       <a href="add_supplier_item.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                               التحكم في بنود التوريد
                            </a>
                        </li>
      
                    </div>';

                //تركيبات الاقمشة
                echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/fabric.png" alt="تركيبات القماش" style="width:30px;height:40px;">&nbsp;&nbsp;
                         تركيبات القماش
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                          <li>
                            <a href="commonfabrics.php">
                                <i class="metismenu-icon pe-7s-network"></i>
                                إضافة تركيبة قماش
                            </a>
                        </li>
						<li>
                            <a href="commonfabricview.php">
                                <i class="metismenu-icon pe-7s-menu"></i>
                                إستعراض تركيبات القماش
                            </a>
                        </li>
      
                    </div>';



                echo '<li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true" >
						<img src="img/sidebaricons/design.png" alt="التصميم" style="width:40px;height:40px;">&nbsp;&nbsp;
                            التصميم
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>';
                echo '<div class="dropdown-container">';

                //echo '<li><a href="consumption.php"><i class="metismenu-icon pe-7s-network"></i>معدل إستهلاك خيط الحياكة</a></li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-paperclip"></i>
                                الاكسسوارات
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="thread.php">
									<img src="img/sidebaricons/sewing.png" alt="الخيوط" style="width:15px;height:25px;">&nbsp;&nbsp;
                                        خيط الحياكة
                                    </a>
                                </li>
                                <li>
                                    <a href="button.php">
									<img src="img/sidebaricons/zorar.png" alt="ازرار" style="width:25px;height:25px;">&nbsp;&nbsp;
                                        الأزرار
                                    </a>
                                </li>
                                <li>
                                                            
								   <a href="zippers.php">
								   <img src="img/sidebaricons/zipper.png" alt="السوستة" style="width:15px;height:25px;">&nbsp;&nbsp;  
									                                        السحاب (السوسته)
                                    </a>
                                </li>
                                <li>
                                    <a href="capson.php">
									<img src="img/sidebaricons/press.png" alt="كبسونة" style="width:25px;height:25px;">&nbsp;&nbsp;  
                                        الكباسين (الطقطق)
                                    </a>
                                </li>
                                <li>
                                    <a href="rubber.php">
									<img src="img/sidebaricons/elastic.png" alt="الاستك" style="width:25px;height:25px;">&nbsp;&nbsp;  
                                        المطاط (الاستيك)
                                    </a>
                                </li>
                                <li>
                                    <a href="rope.php">
									<img src="img/sidebaricons/rope.png" alt="الحبل" style="width:30px;height:35px;">&nbsp;&nbsp;
                                        الحبل (شريط تدكيك)
                                    </a>
                                </li>
                                <li>
                                    <a href="tape.php">
									<img src="img/sidebaricons/tape.png" alt="شريط لاصق" style="width:30px;height:35px;">&nbsp;&nbsp;
                                       الشريط اللاصق-سكوتش
                                    </a>
                                </li>
                                <li>
                                    <a href="hook.php">
									<img src="img/sidebaricons/hook.png" alt="أخرى" style="width:30px;height:35px;">&nbsp;&nbsp;
                                        أخرى
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-plugin"></i>
								
                                الياقة والاساور
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                            
                                <li>
                                    <a href="collar.php">
									<img src="img/sidebaricons/collar.png" alt="ياقة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الياقات
                                    </a>
                                </li>
                                <li>
                                    <a href="bracelet.php">
									<img src="img/sidebaricons/bracelet.png" alt="اسورة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الاسورة
                                    </a>
                                </li>
                                <li>
                                    <a href="sleeve.php">
									<img src="img/sidebaricons/kamar.jpg" alt="كمر" style="width:30px;height:25px;">&nbsp;&nbsp;
                                        الكمر
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-print"></i>
                                التطريز والطباعة
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="embroidery.php">
									<img src="img/sidebaricons/embroidery.png" alt="تطريز" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        التطريز
                                    </a>
                                </li>
                                <li>
                                    <a href="print.php">
									<img src="img/sidebaricons/print.png" alt="طباعة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الطباعة
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-box2"></i>
                                مستلزمات التعبئة والتغليف
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="mainticket.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        التيكت الرئيسى
                                    </a>
                                </li>
                                <li>
                                    <a href="infocard.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        البطاقة الإرشادية
                                    </a>
                                </li>
                                <li>
                                    <a href="itemcard.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        كارت الصنف
                                    </a>
                                </li>
                                <li>
                                    <a href="sizeticket.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        تيكيت المقاسات
                                    </a>
                                </li>
                                <li>
                                    <a href="packing_method.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        طريقة التعبئة والتغليف
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '</div>';

                echo '
                <li class="app-sidebar__heading dropdown-btn">
                    <a href="view-all-acc.php" class="text-dark" aria-expanded="true">
					<img src="img/sidebaricons/orders.png" alt="الاكسسوارات" style="width:30px;height:40px;">&nbsp;&nbsp;
                        استعراض الاكسسوارات
                        <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                    </a>
                </li>

                
                ';

                echo '
                <li class="app-sidebar__heading dropdown-btn">
                    <a class="text-dark" aria-expanded="true">
					<img src="img/sidebaricons/orders.png" alt="الاوردرات" style="width:30px;height:40px;">&nbsp;&nbsp;
                        الأوردرات
                        <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                    </a>
                </li>
                <div class="dropdown-container">
                    <li>
                        <a href="browse_orders.php">
                            <i class="metismenu-icon pe-7s-box2"></i>
                            إستعراض الأوردرات
                        </a>
                    </li>
                </div>
                                <div class="dropdown-container">
                </div>
                
                ';



                ?>
            </ul>
        </div>
    </div>
</div>

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 8 دقائق مضت قال محمد المصري5:

على الرحب و السعة  


<?php
if(!isset($_SESSION))
{
    session_start();
}
?>

<div class="app-sidebar sidebar-shadow" style="overflow: auto;">
    <div class="app-header__logo">
        <div class="logo-src"></div>
        <div class="header__pane ml-auto">
            <div>
                <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>
    <div class="app-header__mobile-menu">
        <div>
            <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>
    <div class="app-header__menu">
        <span>
            <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                <span class="btn-icon-wrapper">
                    <i class="fa fa-ellipsis-v fa-w-6"></i>
                </span>
            </button>
        </span>
    </div>
    <div class="scrollbar-sidebar">
        <div class="app-sidebar__inner">
            <ul class="vertical-nav-menu">
                <li class="app-sidebar__heading">الوصول السريع</li>
                <li>
                    <a href="index.php">
                        <i class="metismenu-icon pe-7s-home"></i>
                        الرئيسية
                    </a>
                </li>


                <?php

                $permission = $_SESSION['permission'];
                // إعدادات النظام

                if ($permission == 1){ //قسم للادمن  فقط

                    echo '<li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/settings.png" style="width:40px;height:40px;">&nbsp;&nbsp;
                            إعدادات النظام
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
					<div class="dropdown-container">
                        <li>
                            <a href="design.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                الأعدادات الرئيسية
                            </a>
                        </li>
						                  <li>
                            <a href="addfabric.php">
                                <i class="metismenu-icon pe-7s-user text-success"></i>
                                إضافة أقمشة
                            </a>
                        </li>
						
						       <li>
                            <a href="addfiber.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                إضافة ألياف 
                            </a>
                        </li>
						
												       <li>
                            <a href="addstitch.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                               اضافة و تعديل الغرز 
                            </a>
                        </li>
						
							 <li>
                            <a href="addconnections.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                              اضافة و تعديل الوصلات
                            </a>
                        </li>
						
						</div>
					
					
					
					
					';
                }

                // الموظفين
                if ($permission == 1){ //قسم للادمن فقط

                    echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
                            <img src="img/sidebaricons/employee.png" alt="الموظفين" style="width:30px;height:30px;">&nbsp;&nbsp; &nbsp;
							الموظفين 
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                         <li>
                            <a href="addworker.php">
                                <i class="metismenu-icon pe-7s-settings"></i>
                                إضافة موظف جديد
                                
                            </a>
                        </li> 
						<li>
                            <a href="workers.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                استعراض الموظفين
                            </a>
                        </li>
      
                    </div>';

                }

                // العملاء
                echo '
                    <li class="app-sidebar__heading dropdown-btn text-dark">
                        <div aria-expanded="true" class="text-black">
						<img src="img/sidebaricons/customers.png" alt="العملاء" style="width:40px;height:40px;">&nbsp;&nbsp;
                         العملاء 
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </div>
                    </li><div class="dropdown-container"><li>
                            <a href="createuser.php">
                                <i class="metismenu-icon pe-7s-settings"></i>
                                إضافة عميل جديد
                                
                            </a>
                            </li>   
							<li>
                            <a href="users.php">
                                <i class="metismenu-icon pe-7s-users"></i>
                                إستعراض العملاء
                            </a>
                        </li></div>';


                //الموردين
                echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/supplier.png" alt="الموردين" style="width:30px;height:30px;">&nbsp;&nbsp;
                            الموردين
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                          <li>
                            <a href="suppliers_add.php">
                                <i class="metismenu-icon pe-7s-add-user"></i>
                                إضافة مورد
                            </a>
                        </li>
						<li>
                            <a href="supplier_view.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                                إستعراض الموردين
                            </a>
                        </li>
						
						                     <li>       <a href="add_supplier_item.php">
                                <i class="metismenu-icon pe-7s-user"></i>
                               التحكم في بنود التوريد
                            </a>
                        </li>
      
                    </div>';

                //تركيبات الاقمشة
                echo '
                    <li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true">
						<img src="img/sidebaricons/fabric.png" alt="تركيبات القماش" style="width:30px;height:40px;">&nbsp;&nbsp;
                         تركيبات القماش
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>
                    <div class="dropdown-container">
                                          <li>
                            <a href="commonfabrics.php">
                                <i class="metismenu-icon pe-7s-network"></i>
                                إضافة تركيبة قماش
                            </a>
                        </li>
						<li>
                            <a href="commonfabricview.php">
                                <i class="metismenu-icon pe-7s-menu"></i>
                                إستعراض تركيبات القماش
                            </a>
                        </li>
      
                    </div>';



                echo '<li class="app-sidebar__heading dropdown-btn">
                        <a class="text-dark" aria-expanded="true" >
						<img src="img/sidebaricons/design.png" alt="التصميم" style="width:40px;height:40px;">&nbsp;&nbsp;
                            التصميم
                            <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                        </a>
                    </li>';
                echo '<div class="dropdown-container">';

                //echo '<li><a href="consumption.php"><i class="metismenu-icon pe-7s-network"></i>معدل إستهلاك خيط الحياكة</a></li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-paperclip"></i>
                                الاكسسوارات
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="thread.php">
									<img src="img/sidebaricons/sewing.png" alt="الخيوط" style="width:15px;height:25px;">&nbsp;&nbsp;
                                        خيط الحياكة
                                    </a>
                                </li>
                                <li>
                                    <a href="button.php">
									<img src="img/sidebaricons/zorar.png" alt="ازرار" style="width:25px;height:25px;">&nbsp;&nbsp;
                                        الأزرار
                                    </a>
                                </li>
                                <li>
                                                            
								   <a href="zippers.php">
								   <img src="img/sidebaricons/zipper.png" alt="السوستة" style="width:15px;height:25px;">&nbsp;&nbsp;  
									                                        السحاب (السوسته)
                                    </a>
                                </li>
                                <li>
                                    <a href="capson.php">
									<img src="img/sidebaricons/press.png" alt="كبسونة" style="width:25px;height:25px;">&nbsp;&nbsp;  
                                        الكباسين (الطقطق)
                                    </a>
                                </li>
                                <li>
                                    <a href="rubber.php">
									<img src="img/sidebaricons/elastic.png" alt="الاستك" style="width:25px;height:25px;">&nbsp;&nbsp;  
                                        المطاط (الاستيك)
                                    </a>
                                </li>
                                <li>
                                    <a href="rope.php">
									<img src="img/sidebaricons/rope.png" alt="الحبل" style="width:30px;height:35px;">&nbsp;&nbsp;
                                        الحبل (شريط تدكيك)
                                    </a>
                                </li>
                                <li>
                                    <a href="tape.php">
									<img src="img/sidebaricons/tape.png" alt="شريط لاصق" style="width:30px;height:35px;">&nbsp;&nbsp;
                                       الشريط اللاصق-سكوتش
                                    </a>
                                </li>
                                <li>
                                    <a href="hook.php">
									<img src="img/sidebaricons/hook.png" alt="أخرى" style="width:30px;height:35px;">&nbsp;&nbsp;
                                        أخرى
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-plugin"></i>
								
                                الياقة والاساور
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                            
                                <li>
                                    <a href="collar.php">
									<img src="img/sidebaricons/collar.png" alt="ياقة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الياقات
                                    </a>
                                </li>
                                <li>
                                    <a href="bracelet.php">
									<img src="img/sidebaricons/bracelet.png" alt="اسورة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الاسورة
                                    </a>
                                </li>
                                <li>
                                    <a href="sleeve.php">
									<img src="img/sidebaricons/kamar.jpg" alt="كمر" style="width:30px;height:25px;">&nbsp;&nbsp;
                                        الكمر
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-print"></i>
                                التطريز والطباعة
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="embroidery.php">
									<img src="img/sidebaricons/embroidery.png" alt="تطريز" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        التطريز
                                    </a>
                                </li>
                                <li>
                                    <a href="print.php">
									<img src="img/sidebaricons/print.png" alt="طباعة" style="width:30px;height:30px;">&nbsp;&nbsp;
                                        الطباعة
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '
                        <li>
                            <a class="text-dark">
                                <i class="metismenu-icon pe-7s-box2"></i>
                                مستلزمات التعبئة والتغليف
                                <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                            </a>
                            <ul>
                                <li>
                                    <a href="mainticket.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        التيكت الرئيسى
                                    </a>
                                </li>
                                <li>
                                    <a href="infocard.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        البطاقة الإرشادية
                                    </a>
                                </li>
                                <li>
                                    <a href="itemcard.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        كارت الصنف
                                    </a>
                                </li>
                                <li>
                                    <a href="sizeticket.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        تيكيت المقاسات
                                    </a>
                                </li>
                                <li>
                                    <a href="packing_method.php">
									<img src="img/sidebaricons/tickets.png" alt="تيكيت" style="width:40px; height:30px;">&nbsp;&nbsp;
                                        طريقة التعبئة والتغليف
                                    </a>
                                </li>
                            </ul>
                        </li>';


                echo '</div>';

                echo '
                <li class="app-sidebar__heading dropdown-btn">
                    <a href="view-all-acc.php" class="text-dark" aria-expanded="true">
					<img src="img/sidebaricons/orders.png" alt="الاكسسوارات" style="width:30px;height:40px;">&nbsp;&nbsp;
                        استعراض الاكسسوارات
                        <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                    </a>
                </li>

                
                ';

                echo '
                <li class="app-sidebar__heading dropdown-btn">
                    <a class="text-dark" aria-expanded="true">
					<img src="img/sidebaricons/orders.png" alt="الاوردرات" style="width:30px;height:40px;">&nbsp;&nbsp;
                        الأوردرات
                        <i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
                    </a>
                </li>
                <div class="dropdown-container">
                    <li>
                        <a href="browse_orders.php">
                            <i class="metismenu-icon pe-7s-box2"></i>
                            إستعراض الأوردرات
                        </a>
                    </li>
                </div>
                                <div class="dropdown-container">
                </div>
                
                ';



                ?>
            </ul>
        </div>
    </div>
</div>

 

حاول تغيير موضع الصنف app-sidebar من relative الى fixed, أي قم بتغيير هذه الخاصية 

position: relative;        =>  position: fixed;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر

المشروع كامل صعب جدا حجمه ضخم لكن اختصرته لك بشكل واضح جدا في الملف التالي ، يمكنك تشغيله مباشرة بدون ادنى مشكلة

sidebar.rar

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد المصري12 عضو نشيط

محمد المصري12

نشر
  • الكاتب
نشر (معدل)

ظبطت اخي الفاضل الحمد لله ، انا اللي مكنتش عامل hard refresh

اشكرك جدا جدا

تم التعديل في بواسطة محمد المصري5
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...