Hi guys
I have added a web part in my sharepoint everything is up and running
But i have this particular problem
In my web part there a panalbar
In which u all can imagine it like this
( on page load u all will see like this shown below where + is the expandable button )
Category A +
Category B +
(On click of the + sign u all will see like tat)
Category A -
Item 1
Item 2
Item 3
Category B +
The problem is when i click on either Category A or B the whole page will automatic scroll up to the top , to the very first Category
Imagine if in future i were to have 100 expandable item than if user choose the 99 item it will jump up to the top of the page after the item expand than it be troublesome for user to scroll all the way down again .It be messy too .
The attach is my CSS style sheet , Kindly advise . Thanks
.CompanyA_Department_Category { background: #EEEEEE; } .CompanyA_Department_Alt_Odd_Level0 { background: #FF9900; } .CompanyA_Department_Alt_Even_Level0 { background: #FFD752; } .CompanyA_Department_Category .rpText { margin-left: 3px; font: bolder 8pt Arial; color: black; } .CompanyA_Department_Course .rpText { margin-left: 3px; font: bold 8pt Arial; color: orange; } .CompanyA_Department_CourseDescription .rpText { margin-left: 3px; font: 8pt Arial; color: black; cursor: default; } .CompanyA_Department_CourseURL .rpText { margin-left: 3px; font: 8pt Arial; text-decoration: underline; color: black; } .RadPanelBar_Default { color: #232323; background: #FFFFFF; } .RadPanelBar_Default ul.rpRootGroup { border: none; /*border: 1px solid #262626;*/ padding: 20px 36px 28px 28px; } .RadPanelBar_Default_rtl ul.rpRootGroup { padding: 20px 28px 28px 36px; text-align: rightright; } .RadPanelBar_Default .rpLink { border: none; /*border-bottom: 1px solid #bfbfbf;*/ overflow-x: hidden; } .RadPanelBar_Default .rpLink:hover { border: none; /*border-bottom: 1px solid #bfbfbf;*/ text-decoration: none; /*border-bottom-color: #fff;*/ } .RadPanelBar_Default .rpText { height: 20px; vertical-align: centre; margin-right: 7px; overflow-x: hidden; } .RadPanelBar_Default_rtl .rpText { height: 20px; vertical-align: centre; margin-left: 7px; margin-right: 0; } .RadPanelBar_Default .rpExpandable .rpText { background: transparent url('/_layouts/images/School/Department/button_expand.gif') no-repeat rightright; } .RadPanelBar_Default .rpExpanded .rpText { background: transparent url('/_layouts/images/School/Department/button_collapse.gif') no-repeat rightright; } .RadPanelBar_Default .rpGroup .rpExpanded .rpText, .RadPanelBar_Default .rpGroup .rpExpandable .rpText { background-position: rightright 5px; } .RadPanelBar_Default_rtl .rpExpandable .rpText { background: transparent url('PanelBar/arrow-right.gif') no-repeat left 9px; } .RadPanelBar_Default_rtl .rpExpanded .rpText { background: transparent url('PanelBar/arrow-down.gif') no-repeat left 9px; } .RadPanelBar_Default_rtl .rpGroup .rpExpanded .rpText, .RadPanelBar_Default_rtl .rpGroup .rpExpandable .rpText { background-position: left 5px; } .rpimage { height: 50px; width: 50px; } .RadPanelBar_Default .rpGroup { overflow-x: hidden; overflow-y: auto; } .RadPanelBar_Default .rpGroup .rpLink, .RadPanelBar_Default .rpGroup .rpLast .rpLink { border: none; } .RadPanelBar_Default .rpGroup .rpLink:hover, .RadPanelBar_Default .rpGroup .rpLast .rpLink:hover { border: none; text-decoration: none; } .RadPanelBar_Default .rpLevel1 .rpLink .rpFirst { border: none; /*border-top: 1px solid #bfbfbf;*/ } .RadPanelBar_Default .rpLevel1 .rpLink .rpItem .rpFirst { border: none; /*border-top: 1px solid #626262;*/ } .RadPanelBar .rpLevel1 { border: none; /*border-bottom:1px solid #BFBFBF;*/ } .RadPanelBar .rpLast .rpLevel1 { border: none; } .RadPanelBar_Default .rpLevel1 .rpLast .rpLink { border: none; } .RadPanelBar_Default .rpLevel1 .rpLast .rpLink:hover { border: none; } .RadPanelBar_Default .rpLevel1 .rpGroup .rpLast .rpLink, .RadPanelBar_Default .rpLevel1 .rpLast .rpGroup .rpLink { border: none; /*border-bottom-width: 1px;*/ } .RadPanelBar_Default .rpRootGroup .rpLink, .RadPanelBar_Default .rpRootGroup .rpTemplate { font: normal 12px Arial, Verdana, Sans-serif; color: #fff; } /* -- space between the top-level categories */ .RadPanelBar ul.rpRootGroup li.rpItem { margin-top: 10px; margin-bottom: 10px; } /* -- space between the items */ .RadPanelBar ul.rpGroup li.rpItem { margin-top: 3px; margin-bottom: 3px; } .RadPanelBar_Default .rpRootGroup .rpText { padding: 6px 7px 6px 3px; } .RadPanelBar_Default_rtl .rpRootGroup .rpText { padding: 6px 3px 6px 7px; } .RadPanelBar_Default .rpGroup .rpLink, .RadPanelBar_Default .rpGroup .rpTemplate { font-size: 11px; } .RadPanelBar_Default .rpGroup .rpText { padding: 1px 7px 0 0; } .RadPanelBar_Default_rtl .rpGroup .rpText { padding: 1px 0 0 7px; } .RadPanelBar_Default .rpLevel1 .rpImage { margin-left: 10px; } .RadPanelBar_Default .rpLevel2 .rpImage { margin-left: 20px; } .RadPanelBar_Default .rpLevel3 .rpImage { margin-left: 30px; } .RadPanelBar_Default .rpLevel1 .rpText { padding-left: 10px; } .RadPanelBar_Default .rpLevel2 .rpText { padding-left: 20px; } .RadPanelBar_Default .rpLevel3 .rpText { padding-left: 30px; } .RadPanelBar_Default .rpLevel1 .CompanyA_ImageItem .rpText { padding-left: 5px; } .RadPanelBar_Default .rpLevel2 .CompanyA_ImageItem .rpText { padding-left: 5px; } .RadPanelBar_Default .rpLevel3 .CompanyA_ImageItem .rpText { padding-left: 5px; } .RadPanelBar_Default_rtl .rpLevel1 .rpText { padding-right: 10px; padding-left: 0; } .RadPanelBar_Default_rtl .rpLevel2 .rpText { padding-right: 20px; padding-left: 0; } .RadPanelBar_Default_rtl .rpLevel3 .rpText { padding-right: 30px; padding-left: 0; } .RadPanelBar_Default .rpSelected .rpText { font-weight: bold; } .RadPanelBar_Default .rpDisabled .rpText { cursor: default; color: #bbb; } .RadPanelBar_Default .rpRootGroup .rpDisabled:hover { border: none; /*border-bottom-color: #bfbfbf;*/ cursor: default; text-decoration: none; } .RadPanelBar_Default .rpGroup .rpDisabled:hover { border: none; /*border-bottom: 1px solid #626262;*/ cursor: default; text-decoration: none; } /* -- Without Itemized Separators */ .RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category, .RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category { border-top: none; } .RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category:hover, .RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category:hover { border-top: none; } .RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course { border-top: none; } .RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course:hover { border-top: none; } .RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course, .RadPanelBar_Default .rpGroup .rpItem .rpFirst .rpLink.CompanyA_Department_Course, .RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course { border-top: none; } .RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course:hover, .RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course:hover { border-top: none;