Rank 1
but following style doesn't apply for ie7
i attached picture to show diffrenece
i used telerik version 2010.1.309.20
DIV.RadPanelBar_Office2007
.rpRootGroup .rpItem {
BACKGROUND-COLOR: #D6E8FF;
PADDING-BOTTOM: 7px;
}
complete css:
.RadPanelBar_Office2007
{
background: #fff;
}
.RadPanelBar_Office2007
.rpRootGroup
{
border-color: #999;
}
.RadPanelBar_Office2007
.rpLink,
.RadPanelBar_Office2007
.rpTemplate
{
color: #000;
font: normal 12px/24px tahoma,"Segoe UI", Arial, sans-serif;
}
.RadPanelBar_Office2007
.rpLink
{
background-color: #e4e4e4;
border-color: #999;
}
/* compensate for borders */
.RadPanelBar_Office2007
.rpLink .rpOut .rpImage
{
margin-top:-2px;
}
.RadPanelBar_Office2007
.rpExpanded
{
border-color: #3d556c;
}
/*-----*/
.RadPanelBar_Office2007
.rpRootGroup .rpSlide .rpGroup .rpItem .rpLink
{
text-indent:2px;
}
.RadPanelBar_Office2007
.rpLink:hover,
.RadPanelBar_Office2007
.rpFocused,
.RadPanelBar_Office2007
.rpSelected
{
color: #892500;
}
.RadPanelBar_Office2007
.rpLink:hover,
.RadPanelBar_Office2007
.rpFocused
{
background-color: #ffe79c;
border-color: #c98400;
}
.RadPanelBar_Office2007
.rpSelected,
.RadPanelBar_Office2007
.rpSelected:hover
{
background-color: #ffa517;
border-color: #ca4b0c;
}
div.RadPanelBar_Office2007
.rpLink .rpOut,
div.RadPanelBar_Office2007
.rpFocused .rpOut,
div.RadPanelBar_Office2007
.rpLink:hover .rpOut,
div.RadPanelBar_Office2007
.rpSelected .rpOut,
div.RadPanelBar_Office2007
.rpSelected:hover .rpOut
{
/*padding-bottom: 0px;*/
border: 0;
}
/* <disabled items> */
.RadPanelBar_Office2007
.rpDisabled,
.RadPanelBar_Office2007
.rpDisabled:hover
{
color: #bbb;
background-color: #e4e4e4;
border-color: #999;
cursor: default;
}
.RadPanelBar_Office2007
.rpDisabled:hover .rpOut
{
border-color: #e4e4e4;
}
/* </disabled items> */
/* <expand arrows> */
.RadPanelBar_Office2007
.rpExpandable .rpText,
.RadPanelBar_Office2007
.rpExpanded .rpText
{
background-color: transparent;
background-image: url('PanelBar/Expandable.png');
background-repeat: no-repeat;
}
/* </expand arrows> */
/* <subitems> */
.RadPanelBar_Office2007
.rpGroup
{
background-color: #d6e8ff;
}
div.RadPanelBar_Office2007
.rpGroup .rpLink,
div.RadPanelBar_Office2007
.rpGroup .rpTemplate
{
color: #000;
background-color: transparent;
background-image: none;
border: 0;
margin: 0 2px;
padding: 1px;
}
div.RadPanelBar_Office2007
.rpGroup .rpLink:hover,
div.RadPanelBar_Office2007
.rpGroup .rpFocused,
div.RadPanelBar_Office2007
.rpGroup .rpSelected,
div.RadPanelBar_Office2007
.rpGroup .rpSelected:hover
{
color: #892500;
border: 1px solid #c98400;
background-color: #ffe79c;
padding: 0;
}
div.RadPanelBar_Office2007
.rpGroup .rpSelected
{
background-color: #ffa517;
border-color: #ca4b0c;
}
/* <subitems (disabled)> */
div.RadPanelBar_Office2007
.rpGroup .rpDisabled,
div.RadPanelBar_Office2007
.rpGroup .rpDisabled:hover
{
color: #bbb;
text-decoration: none;
background-color: #fff;
border: 0;
padding: 1px;
}
/* </subitems (disabled)> */
/* <subitems> */
/* <background positioning>
.RadPanelBar_Office2007 .rpLink,
.RadPanelBar_Office2007 .rpExpanded
{
background-position: 0 0;
}
.RadPanelBar_Office2007 .rpFocused,
.RadPanelBar_Office2007 .rpLink:hover,
.RadPanelBar_Office2007 .rpExpanded:hover
{
background-position: 0 -200px;
}
.RadPanelBar_Office2007 .rpSelected,
.RadPanelBar_Office2007 .rpSelected:hover
{
background-position: 0 -400px;
}
.RadPanelBar_Office2007 .rpFirst .rpLink,
.RadPanelBar_Office2007 .rpFirst .rpExpanded
{
background-position: 0 -1px;
}
.RadPanelBar_Office2007 .rpFirst .rpFocused,
.RadPanelBar_Office2007 .rpFirst .rpLink:hover
{
background-position: 0 -201px;
}
.RadPanelBar_Office2007 .rpFirst .rpSelected,
.RadPanelBar_Office2007 .rpFirst .rpSelected:hover
{
background-position: 0 -401px;
}
*/
/* <expand arrows> */
.RadPanelBar_Office2007
.rpExpandable .rpText,
.RadPanelBar_Office2007
.rpExpanded .rpText
{
padding-right: 20px;
background-repeat: no-repeat;
}
DIV.RadPanelBar_Office2007 {
MARGIN-TOP: 0px;
BACKGROUND-COLOR: transparent;
}
DIV.RadPanelBar_Office2007 .rpRootGroup {
BORDER-RIGHT: 0px solid;
BORDER-TOP: #FFFFFF 0px solid;
BORDER-LEFT: 0px solid;
BORDER-BOTTOM: 0px solid ;
BACKGROUND-COLOR: transparent;
}
DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink {
BACKGROUND-POSITION: 0px 0px;
BORDER-TOP: #6693CF 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
BACKGROUND-IMAGE: url('PanelBar/item-bg.gif');
COLOR: #15428b;
LINE-HEIGHT: 18px;
text-indent:-10px;
BORDER-BOTTOM: #D6E8FF 0px solid;
FONT-FAMILY:tahoma, Segoe UI, Arial, sans-serif;
HEIGHT
: 18px;
BACKGROUND-COLOR: #D6E8FF;
}
DIV.RadPanelBar_Office2007
.rpRootGroup .rpItem {
BACKGROUND-COLOR: #D6E8FF;
PADDING-BOTTOM: 7px;
}
DIV.RadPanelBar_Office2007
.rpRootGroup .rpItem .rpGroup .rpItem {
PADDING-BOTTOM: 0px;
}
DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink:hover {
BORDER-TOP: #6693CF 1px solid;
BACKGROUND-POSITION
: 0px 0px;
BACKGROUND-IMAGE: url('PanelBar/item-bg.gif');
}
DIV.RadPanelBar_Office2007 .rpRootGroup .rpExpandable {
BORDER-BOTTOM-COLOR: #D6E8FF;
BORDER-BOTTOM: #D6E8FF 1px solid;
}
DIV.RadPanelBar_Office2007 .rpRootGroup .rpExpanded {
BACKGROUND-POSITION: 0px 0px;
BORDER-BOTTOM: #D6E8FF 1px solid;
}
DIV.RadPanelBar_Office2007 .rpRootGroup .rpLink .rpText {
BORDER-TOP: #FFFFFF 1px solid;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink {
BORDER-RIGHT: #D6E8FF 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #D6E8FF 1px solid;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
BACKGROUND-IMAGE: none;
PADDING-BOTTOM: 0px;
MARGIN-LEFT: 0px;
BORDER-LEFT: #D6E8FF 1px solid;
COLOR: #000000;
width:175px;
MARGIN-RIGHT: 10px;
MARGIN-left: 10px;
PADDING-TOP: 0px;
BORDER-BOTTOM: #D6E8FF 1px solid;
BACKGROUND-COLOR: #D6E8FF;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink:hover {
BACKGROUND-POSITION: 0px 0px;
BORDER-TOP: #FFBD69 1px solid;
PADDING-LEFT: 0px;
BORDER-LEFT-COLOR: #FFBD69;
BACKGROUND-IMAGE: url('PanelBar/ItemHoverBg.gif');
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 10px;
MARGIN-left: 10px;
BORDER-BOTTOM: #FFBD69 1px solid;
BORDER-RIGHT-COLOR: #FFBD69;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpSelected {
BORDER-TOP: #FFBD69 1px solid;
BORDER-LEFT-COLOR: #FFBD69;
BACKGROUND-IMAGE: none;
BORDER-BOTTOM: #FFBD69 1px solid;
BACKGROUND-COLOR: #FFE6A0;
BORDER-RIGHT-COLOR: #FFBD69;
MARGIN-RIGHT: 10px;
MARGIN-left: 10px;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpExpanded {
BORDER-TOP: #FFBD69 1px solid;
BORDER-LEFT-COLOR: #FFBD69;
BACKGROUND-IMAGE: none;
BORDER-BOTTOM: #FFBD69 1px solid;
BACKGROUND-COLOR: #FFE6A0;
BORDER-RIGHT-COLOR: #FFBD69;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpDisabled {
FONT-SIZE: 11px;
COLOR: #000000;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpDisabled:hover {
FONT-SIZE: 11px;
COLOR: #000000;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink .rpOut {
BACKGROUND-COLOR: transparent;
BORDER-RIGHT-COLOR: #00A1D6;
}
DIV.RadPanelBar_Office2007 .rpItem .rpGroup .rpLink .rpText {
BORDER-TOP: 0px solid;
BACKGROUND-COLOR: transparent;
}
4 Answers, 1 is accepted
Rank 1
telerik team please!!
Add the green colored properties to this rule in your CSS file (somewhere around the middle of the CSS you've sent) and the issue should go away:
DIV.RadPanelBar_Office2007 .rpRootGroup .rpItem
{
BACKGROUND-COLOR: #D6E8FF;
PADDING-BOTTOM: 7px;
width: 100%;
zoom: 1;
}
Regards,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
i used attached file to expand/collapse panelbar
these style is ok in pervious version(2009.Q1)
but it seems not ok in 2010.Q1
the image doesnt change in firefox and ie7
please check it!
I'm sorry for the late reply.
Which of both expandable images do you want to use - in the screenshot of your RadPanelBar you use different image for the expandable items? To use the one already in your skin folder, add these CSS rules at the end of your skin:
.RadPanelBar_Office2007_rtl .rpExpandable .rpText,
.RadPanelBar_Office2007_rtl .rpExpanded .rpText
{
padding-left: 20px;
}
.RadPanelBar_Office2007_rtl .rpGroup .rpText
{
padding: 0 10px;
}
.RadPanelBar_Office2007 .rpExpandable .rpText { background-position: 100% 0; }
.RadPanelBar_Office2007 .rpExpanded .rpText { background-position: 100% -176px; }
.RadPanelBar_Office2007_rtl .rpExpandable .rpText { background-position: 0 0; }
.RadPanelBar_Office2007_rtl .rpExpanded .rpText { background-position: 0 -176px; }
.RadPanelBar_Office2007 .rpGroup .rpLink,
.RadPanelBar_Office2007 .rpGroup .rpLink .rpOut { background-position: 0 200px; }
.RadPanelBar_Office2007 .rpGroup .rpLink:hover,
.RadPanelBar_Office2007 .rpGroup .rpFocused { background-position: 100% -22px; }
.RadPanelBar_Office2007 .rpGroup .rpLink:hover .rpOut,
.RadPanelBar_Office2007 .rpGroup .rpFocused .rpOut { background-position: 0 0; }
/* <subitems (selected)> */
.RadPanelBar_Office2007 .rpGroup .rpSelected,
.RadPanelBar_Office2007 .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }
.RadPanelBar_Office2007 .rpGroup .rpSelected .rpOut,
.RadPanelBar_Office2007 .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }
/* </subitems (selected)> */
/* <subitems (expand arrows)> */
.RadPanelBar_Office2007 .rpGroup .rpExpandable .rpText,
.RadPanelBar_Office2007 .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }
.RadPanelBar_Office2007 .rpGroup .rpExpanded .rpText,
.RadPanelBar_Office2007 .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }
.RadPanelBar_Office2007_rtl .rpGroup .rpExpandable .rpText,
.RadPanelBar_Office2007_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 0 -938px; }
.RadPanelBar_Office2007_rtl .rpGroup .rpExpanded .rpText,
.RadPanelBar_Office2007_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 0 -1078px; }
/* </subitems (expand arrows)> */
Let me know if this helps.
Regards,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.