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

السؤال

نشر

سلام عليكم

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

مثال في الصور

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; 

}

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

Recommended Posts

  • 0
نشر

شكرا لك

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

.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; 

}

 

  • 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
نشر

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

<?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>

 

  • 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;

 

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

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

sidebar.rar

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

.app-sidebar {

    /* ... */

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

    
  	/* ... */

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

  	/* ... */

}

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...