How to remove Wrapped item text space

[Vivek Kumar]

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

[Yana]

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.

[Vivek Kumar]

Hi Yana,

Thanks for the Quick reply.

I opened a support ticket for this. Please see that.

Thanks,

Vivek

[Vivek Kumar]

Hi Yana,

I  opened a support ticket for this.

Could you please look into?

Thanks,

Vivek Kumar

[Yana]

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.