This is a migrated thread and some comments may be shown as answers.

How to remove Wrapped item text space

4 Answers 124 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Vivek Kumar
Top achievements
Rank 1
Vivek Kumar asked on 18 Mar 2010, 02:48 PM
Hi ,
I am Using this CSS. 
Below is code for CSS.
we want to remove the wrapped item text space. for more refernece see scennshot.

<dnn:RadMenu  ID="RadMain_Menu" Width="198px" runat="server" Flow="vertical" SelectedPathHeaderItemCss="focused"
                                            EnableEmbeddedSkins="false"  ShowPath="true" CssClass="RadMenu_Skin"
                                            Skin="" EnableViewState="false"  GroupOffsetX="8" GroupOffsetY="4"   Wrap="false"  SelectedPathItemCss="focused">
   </dnn:RadMenu>

And CSS.




.RadMenu_Skin .expandRight
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background-color: transparent;
}

.RadMenu_Skin .rmLink rmExpanded
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background-color: transparent;
}
.RadMenu_Skin .rmText rmExpandRight
{
/*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background: transparent url( "../images/arrow.png" ) no-repeat right center;
background-color: transparent;
}

.RadMenu_Skin .rmLevel1 .rmLink
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=78)";
filter: alpha(opacity=78);
opacity: 0.78;
-moz-opacity: 0.78;
white-space:normal !important;  
    float:none !important;  
    position:inherit;  
}

.RadMenu_Skin .group .text {
    padding:3px 10px 5px;
}
/*Space Between root items and child items menu */
 


/*focused menu item color */.RadMenu_Skin a.focused
{
background-color: #34C6F9;
}
.RadMenu_Skin .rmRootGroup
{
}
.RadMenu_Skin .rmLink
{
border: 1px solid white;
border-bottom: 0;
border-left: 0;
border-right: 0;
height: auto;
width: auto;
}
.RadMenu_Skin .rmText
{
padding-left: 5px; 
width: 198px;
padding-right: 5px; 
margin-left: 0px;
left: 0px;
}
.RadMenu_Skin .rmLeftArrow, .RadMenu_Skin .rmRightArrow, .RadMenu_Skin .rmTopArrow, .RadMenu_Skin .rmBottomArrow
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background-color: transparent;
}
.RadMenu_Skin .rmRootGroup
{
border: 1px solid #3d556c;
background-color: #627f97;
}
.RadMenu_Skin .rmHorizontal
{
background-position: 0 0;
background-repeat: repeat-x;
}
.RadMenu_Skin .rmVertical
{
background-position: 0 -425px;
background-repeat: repeat-x;
}
/* <Root items> */.RadMenu_Skin, .RadMenu_Skin .rmLink
{
font: normal 10pt/23pt "Verdana" , Verdana, Verdana;
text-decoration: none;
}
.RadMenu_Skin .rmLink
{
color: #fff;
}
.RadMenu_Skin .rmLink, .RadMenu_Skin .rmText
{
background-position: 0 1050px;
background-repeat: no-repeat;
height:auto;
}
.RadMenu_Skin .rmLink:hover
{
text-decoration: none;
cursor: pointer; /* background: transparent url("http://localhost/gsbadnn/arrow.png") no-repeat right center; */
}
.RadMenu_Skin .rmFocused, .RadMenu_Skin .rmSelected
{
color: #0d202b;
background-position: 0 -72px;
}

.RadMenu_Skin .rmLeftArrow, .RadMenu_Skin .rmRightArrow, .RadMenu_Skin .rmTopArrow, .RadMenu_Skin .rmBottomArrow
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background-color: transparent;
}
.RadMenu_Skin .rmLink:hover .rmText, .RadMenu_Skin .rmFocused .rmText, .RadMenu_Skin .rmSelected .rmText
{
background-position: 100% -96px;
}
.RadMenu_Skin .rmExpanded, .RadMenu_Skin .rmExpanded:hover
{
/*color: #0d202b;*/
background-position: 0 -120px;
}
.RadMenu_Skin .rmExpanded .rmText, .RadMenu_Skin .rmExpanded:hover .rmText
{
background-position: 100% -144px;
}
.RadMenu_Skin .rmDisabled, .RadMenu_Skin .rmDisabled:hover
{
color: #aaa;
}
.RadMenu_Skin .rmDisabled:hover, .RadMenu_Skin .rmDisabled:hover .rmText
{
background: none;
}
/* </Root items> *//* <Submenu items> */.RadMenu_Skin .rmGroup, .RadMenu_Skin .rmMultiColumn, .RadMenu_Skin .rmGroup .rmVertical
{
border: 1px solid #768ca5;
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmSlide .rmScrollWrap
{
background-image: none;
}
.RadMenu_Skin_rtl .rmGroup, .RadMenu_Skin_rtl .rmMultiColumn, .RadMenu_Skin_rtl .rmGroup .rmVertical
{
background-position: 100% 0;
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmGroup .rmLink
{
/* color: #000;*/
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmGroup .rmLink:hover, .RadMenu_Skin .rmGroup .rmFocused, .RadMenu_Skin .rmGroup .rmSelected
{
    margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmRootGroup .rmHorizontal
{
background-image: none;
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmScrollWrap .rmVertical
{
border: 0;
}
.RadMenu_Skin .rmGroup .rmFirst, .RadMenu_Skin .rmGroup .rmLast
{
background: none;
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmGroup .rmLast
{
padding-bottom: 1px;
}
.RadMenu_Skin .rmGroup .rmLink:hover, .RadMenu_Skin .rmGroup .rmFocused, .RadMenu_Skin .rmGroup .rmSelected, .RadMenu_Skin .rmGroup .rmExpanded
{
background-position: 0 -168px;
margin:0 0 0 0px;
padding:0 0px 0 0px;
}
.RadMenu_Skin .rmGroup .rmLink:hover .rmText, .RadMenu_Skin .rmGroup .rmFocused .rmText, .RadMenu_Skin .rmGroup .rmSelected .rmText, .RadMenu_Skin .rmGroup .rmExpanded .rmText
{
background-position: 100% -192px;
}
.RadMenu_Skin .rmGroup .rmDisabled, .RadMenu_Skin .rmGroup .rmDisabled:hover
{
color: #aaa;
}
/* <expand arrows> */.RadMenu_Skin .rmGroup .rmExpandRight
{
height: auto;
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
}
.RadMenu_Skin .rmGroup .rmExpandRight:hover
{
background-color: #001C4E;
}
.RadMenu_Skin .rmGroup .rmExpandDown
{
background-position: 100% -216px;
}
.RadMenu_Skin_rtl .rmGroup .rmItem .rmLink .rmText
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
}
.RadMenu_Skin .rmGroup .rmLink:hover .rmExpandRight, .RadMenu_Skin .rmGroup .rmFocused .rmExpandRight, .RadMenu_Skin .rmGroup .rmSelected .rmExpandRight, .RadMenu_Skin .rmGroup .rmExpanded .rmExpandRight, .RadMenu_Skin .rmGroup .rmLink:hover .rmExpandDown, .RadMenu_Skin .rmGroup .rmFocused .rmExpandDown, .RadMenu_Skin .rmGroup .rmSelected .rmExpandDown, .RadMenu_Skin .rmGroup .rmExpanded .rmExpandDown
{
background-position: 100% -240px;
}
.RadMenu_Skin .rmGroup .rmDisabled:hover .rmExpandRight, .RadMenu_Skin .rmGroup .rmDisabled:hover .rmExpandDown
{
/*background-image: url('/../../../..arrow.png');*/
background-position: 100% -216px; /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center;*/
background: transparent url( "../images/arrow.png" ) no-repeat right center;
}
/* </expand arrows> *//* <rtl> */.RadMenu_Skin_rtl .rmGroup .rmLink:hover, .RadMenu_Skin_rtl .rmGroup .rmFocused, .RadMenu_Skin_rtl .rmGroup .rmSelected, .RadMenu_Skin_rtl .rmGroup .rmExpanded
{
background-position: 100% -264px;
}
.RadMenu_Skin_rtl .rmGroup .rmLink:hover .rmText, .RadMenu_Skin_rtl .rmGroup .rmFocused .rmText, .RadMenu_Skin_rtl .rmGroup .rmSelected .rmText, .RadMenu_Skin_rtl .rmGroup .rmExpanded .rmText
{
background-position: 0 -288px;
}
.RadMenu_Skin_rtl .rmGroup .rmExpandLeft
{
background-position: 0 -312px;
}
.RadMenu_Skin_rtl .rmGroup .rmLink:hover .rmExpandLeft, .RadMenu_Skin_rtl .rmGroup .rmFocused .rmExpandLeft, .RadMenu_Skin_rtl .rmGroup .rmSelected .rmExpandLeft, .RadMenu_Skin_rtl .rmGroup .rmExpanded .rmExpandLeft
{
background-position: 0 -336px;
}
.RadMenu_Skin_rtl .rmItem .rmExpanded, .RadMenu_Skin_rtl .rmItem .rmExpanded:hover
{
background: transparent url( "../images/arrow.png" ) no-repeat right center; /*background:border: 1px solid white;     border-bottom: 0;     border-left: 0;     border-right: 0;*/ /*background: transparent url("/GSBADNN/arrow.png") no-repeat right center; background:border: 1px solid white;     border-bottom: 0;     border-left: 0;     border-right: 0;*/
}
/* </rtl> *//* </Submenu items> *//* <Submenu offsets (WebBlue - specific, overlapping submenus)> */.RadMenu_Skin .rmSlide
{
margin: -3px 0 0 1px;
}
.RadMenu_Skin .rmVertical .rmSlide, .RadMenu_Skin .rmSlide .rmSlide, .RadMenu_Skin_Context .rmGroup .rmSlide
{
margin: 0 0 0 -5px;
}
.RadMenu_Skin_rtl .rmSlide
{
margin: -3px 0 0 -1px;
}
.RadMenu_Skin_rtl .rmVertical .rmSlide, .RadMenu_Skin_rtl .rmSlide .rmSlide, .RadMenu_Skin_Context_rtl .rmGroup .rmSlide
{
margin: 0 0 0 5px;
}
/* </Submenu offsets> *//* <Scrolling arrows> */.RadMenu_Skin .rmLeftArrow, .RadMenu_Skin .rmRightArrow
{
background-color: #E0E5F5;
margin-left: 10px;
}
.RadMenu_Skin .rmLeftArrow
{
background-position: -8px -312px;
border-right: 1px solid #B7BDCD;
}
.RadMenu_Skin .rmRightArrow
{
background-position: -482px -216px;
border-left: 1px solid #B7BDCD;
}
.RadMenu_Skin .rmTopArrow, .RadMenu_Skin .rmBottomArrow, .RadMenu_Skin .rmGroup .rmLeftArrow, .RadMenu_Skin .rmGroup .rmRightArrow
{
background-color: #f0f0f0;
}
.RadMenu_Skin .rmTopArrow
{
background-position: 50% -367px;
border-bottom: 1px solid #B7BDCD;
}
.RadMenu_Skin .rmBottomArrow
{
background-position: 50% -391px;
border-top: 1px solid #B7BDCD;
}
/* </Scrolling arrows> *//* <Separators> */.RadMenu_Skin .rmVertical .rmSeparator .rmText
{
background-position: 0 -406px;
}
.RadMenu_Skin_Context .rmVertical .rmSeparator .rmText, .RadMenu_Skin .rmVertical .rmVertical .rmSeparator .rmText, .RadMenu_Skin .rmHorizontal .rmVertical .rmSeparator .rmText
{
background-position: 0 -408px;
}
.RadMenu_Skin .rmHorizontal .rmSeparator .rmText, .RadMenu_Skin .rmVertical .rmHorizontal .rmSeparator .rmText
{
background-position: 0 -386px;
}
/* </Separators> *//* </RadMenu / WebBlue> */div.RadMenu_Skin
{
background-color: rgb(255, 255, 255);
}
div.RadMenu_Skin .rmItem .rmLink
{
background-color: #001C4E;
background-image: url( "../images/MenuBack.jpg" ); /*background-image: url("/GSBADNN/MenuBack.jpg");*/
background-position: top;
background-repeat: repeat-x;
border: 1px solid white;
border-bottom: 0;
border-left: 0;
border-right: 0;
height: auto;
}
div.RadMenu_Skin .rmItem .rmLink:hover
{
background-color: rgb(52, 198, 249);
}
div.RadMenu_Skin > .rmVertical .rmLink .rmExpandRight
{
}
div.RadMenu_Skin .rmItem .rmGroup
{
 background: none; 
}
/* Rad Menu subitem */div.RadMenu_Skin .rmGroup .rmItem .rmLink
{
background-color: #34C6F9;
background-image: url( "../images/Menu_Hover_Back.png" ); /*background-image: url("/GSBADNN/Menu_Hover_Back.png");*/
color: Black;
}
div.RadMenu_Skin .rmGroup .rmItem .rmLink:hover
{
background-color: rgb(1, 31, 81);
color: White;
}
.RadMenu_Skin .rmItem .rmLink:hover
{
}
.RadMenu_Skin .rmItem .rmFocused, .RadMenu_Skin .rmItem .rmSelected
{
border: 1px solid white;
border-bottom: 0;
border-left: 0;
border-right: 0;
height:  auto;
}
.RadMenu_Skin ul.rmRootGroup, .RadMenu_Skin div.rmRootGroup
{
border: 1px solid white;
background-color: white;
border-top: none !important;
border-bottom: none !important;
}
.RadMenu_Skin .rmGroup
{
border-top: none !important;
border-bottom: none !important;
}
.RadMenu_Skin .rmItem .rmExpanded:hover
{
/*background:border: 1px solid white;     border-bottom: 0;     border-left: 0;     border-right: 0;*/
}
.rmItem rmLast
{
background-color: #34C6F9;
}
/*Selected item CSS Style */
.RadMenu_Skin .rmLink:hover, .RadMenu_Skin .focused
{
color: Black;
background-image: url( "../images/Menu_Hover_Back.png" ) !important; /*background-image: url("/GSBADNN/Menu_Hover_Back.png")!important;*/
background-repeat: no-repeat;
text-decoration: none;
background: url( "../images/arrow.png" ) no-repeat right center; /*background:  url("/GSBADNN/arrow.png") no-repeat right center;*/
}

.RadMenu_Skin a.expanded
{
/*background:  url("/GSBADNN/arrow.png") no-repeat right center;*/
background: url( "../images/arrow.png" ) no-repeat right center;
}
div.RadMenu .rmGroup .rmText {
   margin:0 0 0 14px;
   padding:0 0px 0 0px;
   text-align: left;
 }
 
 div.RadMenu .rmGroup  .rmText
{
    width: 198px !important;
}

div.RadMenu .rmRootGroup .rmText 
{      
    width: 198px !important;  
   padding: 0px; 
   
}

Thanks for time and Support.
 Vivek

4 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 22 Mar 2010, 04:23 PM
Hi Vivek Kumar,

I couldn't test your skin, because of the missed images, but generally you should reduce the line-height of the items with the following css styles:

div.RadMenu a.rmLink {
  line-height: 15px;
}

If that doesn't help, please send us a live url demonstrating the issue.

Best regards,
Yana
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.
0
Vivek Kumar
Top achievements
Rank 1
answered on 22 Mar 2010, 07:40 PM
Hi Yana,
Thanks for the Quick reply.
I opened a support ticket for this. Please see that.

Thanks,
Vivek
0
Vivek Kumar
Top achievements
Rank 1
answered on 29 Mar 2010, 12:48 PM
Hi Yana,

I  opened a support ticket for this.

Could you please look into?

Thanks,
Vivek Kumar
0
Yana
Telerik team
answered on 29 Mar 2010, 01:21 PM
Hi Vivek Kumar,

I've just answered to the support ticket regarding this issue.

All the best,
Yana
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.
Tags
Menu
Asked by
Vivek Kumar
Top achievements
Rank 1
Answers by
Yana
Telerik team
Vivek Kumar
Top achievements
Rank 1
Share this question
or