Forums

noob2008

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: right;
}

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

.RadPanelBar_Default .rpExpanded .rpText
{
	background: transparent url('/_layouts/images/School/Department/button_collapse.gif') no-repeat right;
}

.RadPanelBar_Default .rpGroup .rpExpanded .rpText,
.RadPanelBar_Default .rpGroup .rpExpandable .rpText
{
	background-position: right 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;
}

EDIT: Code tags added - Mod

eXo

use code tags for your css code.

So if i got this right, you want to have a link to a certain part of the page.
you can do this with the name atribute in a link
http://lmgtfy.com/?q=a+href+name

EamonnMac

Can you post a link? It sounds almost as if the page is reloading when you expand the category...

treehouse : what would you like to learn today?

Forums

Can make page maintain at the position after clicking icon