+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Vertical Space Issue in RadMenu

Vertical Space Issue in RadMenu

4 posts, 0 answered
  1. Salman
    Salman avatar
    18 posts
    Registered:
    07 Nov 2007
    07 Nov 2007
    Link to this post
    Hi,

    I added RadMenu control on the page and used Default skin after binding it with an XML file as its Data Source. The menu is created however, the vertical space between menu items (shown vertically in the DropDownMenu) is larger. How can is reduce this vertical space so that menu items don't look odd?
  2. Peter
    Peter avatar
    13 posts
    Registered:
    24 Sep 2012
    08 Nov 2007
    Link to this post
    Hi Salman,

    The skin css class responsible for the child items is .RadMenu_Default .group .link . If you want to reduce the vertical space between the child items, set the height property explicitly to a value of your choice. For example:

    .RadMenu_Default .group .link
    {
      text-decoration: none;
      color: #333;
      background: #fff;
      height: 18px;
    }



    Best wishes,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Salman
    Salman avatar
    18 posts
    Registered:
    07 Nov 2007
    08 Nov 2007
    Link to this post
    Dear Peter,

    Thanks for your reply but i don't know why is it not working. I tweaked CSS file to set height as you suggested but it doesn't have any effect on the vertical space between child menu items. I am pasting my CSS file here so that you may check it by yourself to see where the problem is:

    1 /* RadMenu Default skin */  
    2  
    3 .RadMenu_Default  
    4 {  
    5 border: 1px solid #010101;  
    6 border-bottom-width: 0;  
    7 border-top-color: #383838;  
    8 background: #444 url("img/MenuBackground.gif") repeat-x top left;  
    9 text-align: left;  
    10 }  
    11  
    12 .RadMenu_Default_rtl  
    13 {  
    14 text-align: right;  
    15 }  
    16  
    17 .RadMenu_Default_Context  
    18 {  
    19 background: none;  
    20 border: 0;  
    21 }  
    22  
    23 .RadMenu_Default a  
    24 {  
    25 text-decoration: none;  
    26 }  
    27  
    28 .RadMenu_Default .link  
    29 {  
    30 line-height: 0px;  
    31 font-weight: bold !important;  
    32 text-decoration: none;  
    33 color: #1363b8;  
    34 position: relative;  
    35 display: inline-block !important;  
    36 }  
    37  
    38 .RadMenu_Default .link:focused,  
    39 .RadMenu_Default .focused  
    40 {  
    41 outline: 0;  
    42 }  
    43  
    44 .RadMenu_Default .expanded  
    45 {  
    46 z-index: 10000;  
    47 }  
    48  
    49 .RadMenu_Default .rootGroup .link:hover,  
    50 .RadMenu_Default .rootGroup .focused,  
    51 .RadMenu_Default .rootGroup .expanded  
    52 {  
    53 background-color: none;  
    54 color: #333;  
    55 }  
    56  
    57 .RadMenu_Default .rootGroup .link .text  
    58 {  
    59 font: normal 12px Arial, sans-serif;  
    60 }  
    61  
    62 .RadMenu_Default .group  
    63 {  
    64 background: #fff;  
    65 }  
    66  
    67 .RadMenu_Default .group .link  
    68 {  
    69 text-decoration: none;  
    70 color: #333;  
    71 background: none;  
    72 height: 8px;  
    73 }  
    74  
    75 .RadMenu_Default_rtl .group .link  
    76 {  
    77 text-align: right;  
    78 font-weight: bold !important;  
    79 padding-top: 0px !important;  
    80 padding-bottom: 0px !important;  
    81 margin-right: 0px !important;  
    82 margin-bottom: 0px !important;  
    83 }  
    84  
    85 .RadMenu_Default .group .link:hover,  
    86 .RadMenu_Default .group .focused,  
    87 .RadMenu_Default .group .expanded  
    88 {  
    89 color: #fff;  
    90 border: #72cee6 0x solid;  
    91 background: #1363b8;  
    92 }  
    93  
    94 .RadMenu_Default .text  
    95 {  
    96 padding: 3px 16px 5px 16px;  
    97 }  
    98  
    99 .RadMenu_Default .group .link .text  
    100 {  
    101 font-size: 11px;  
    102 }  
    103  
    104 /* <expand arrows styling> */  
    105  
    106 .RadMenu_Default .group .link .expandLeft  
    107 {  
    108 background: transparent url("img/ArrowExpand.gif") no-repeat right -3px;  
    109 }  
    110  
    111 .RadMenu_Default .group .link .expandRight  
    112 {  
    113 background: transparent url("img/ArrowExpandRTL.gif") no-repeat left -3px;  
    114 }  
    115  
    116 .RadMenu_Default .group .link:hover .expandLeft,  
    117 .RadMenu_Default .group .focused .expandLeft,  
    118 .RadMenu_Default .group .expanded .expandLeft  
    119 {  
    120 background-image: url("img/ArrowExpandHovered.gif");  
    121 }  
    122  
    123 .RadMenu_Default .group .link:hover .expandRight,  
    124 .RadMenu_Default .group .focused .expandRight,  
    125 .RadMenu_Default .group .expanded .expandRight  
    126 {  
    127 background-image: url("img/ArrowExpandHoveredRTL.gif");  
    128 }  
    129  
    130 /* </expand arrows styling> */  
    131  
    132 .RadMenu_Default .horizontal .item { border-right: 0px solid #fff; }  
    133 .RadMenu_Default .horizontal .last { border-right: 0; }  
    134  
    135 .RadMenu_Default .vertical .item { border-bottom: 0px solid #fff; }  
    136 .RadMenu_Default .vertical .last { border-bottom: 0; padding-top: }  
    137  
    138 .RadMenu_Default_rtl .horizontal .item { border-left: 0; }  
    139  
    140 .RadMenu_Default .rootGroup .group .item { border-right: 0; border-bottom: 0; }  
    141  
    142 .RadMenu_Default .group  
    143 {  
    144 border: 1px solid #1363b8;  
    145 background-color: #fff;  
    146 }  
    147  
    148 .RadMenu_Default .group .expanded  
    149 {  
    150 z-index: 11;  
    151 }  
    152  
    153 .RadMenu_Default .topArrowDisabled,  
    154 .RadMenu_Default .bottomArrowDisabled,  
    155 .RadMenu_Default .leftArrowDisabled,  
    156 .RadMenu_Default .rightArrowDisabled  
    157 {  
    158 display: none;  
    159 }  
    160  
    161 .RadMenu_Default .topArrow,  
    162 .RadMenu_Default .bottomArrow,  
    163 .RadMenu_Default .leftArrow,  
    164 .RadMenu_Default .rightArrow  
    165 {  
    166 font-size: 0;  
    167 line-height: 0;  
    168 color: #fff;  
    169 }  
    170  
    171 .RadMenu_Default .topArrow,  
    172 .RadMenu_Default .bottomArrow  
    173 {  
    174 height: 10px;  
    175 width: 100%;  
    176 background: #fff url("img/ArrowScrollUpDown.gif") no-repeat top center;  
    177 }  
    178  
    179 .RadMenu_Default .bottomArrow  
    180 {  
    181 background-position: center -18px;  
    182 }  
    183  
    184 .RadMenu_Default .leftArrow,  
    185 .RadMenu_Default .rightArrow  
    186 {  
    187 width: 10px;  
    188 height: 100%;  
    189 background: #fff url("img/ArrowScrollLeftRight.gif") no-repeat left center;  
    190 }  
    191  
    192 .RadMenu_Default .rightArrow  
    193 {  
    194 background-position: -18px center;  
    195 }  
    196  
    197 .RadMenu_Default .rootGroup .item .disabled .text,  
    198 .RadMenu_Default .group .item .disabled .text  
    199 {  
    200 color: #999;  
    201 }  
    202  
    203 .RadMenu_Default .rootGroup .item .disabled  
    204 {  
    205 background: none;  
    206 }  
    207  
    208 .RadMenu_Default .group .item .disabled  
    209 {  
    210 background-color: #fff;  
    211 }  
    212  
    213 .RadMenu_Default .horizontal .separator  
    214 {  
    215 height: 20px;  
    216 width: 1px;  
    217 }  
    218  
    219 .RadMenu_Default .rootGroup .separator  
    220 {  
    221 background-color: #8f8f8f;  
    222 border-top: 1px solid #676767;  
    223 }  
    224  
    225 .RadMenu_Default .vertical .separator  
    226 {  
    227 height: 1px;  
    228 margin: 0px 0px 0px 0px;  
    229 border: 0;  
    230 background-color: #8f8f8f;  
    231 }  
    232  
    233 .RadMenu_Default .separator .text  
    234 {  
    235 display: none;  
    236 }  
    237  
    238 .RadMenu_Default .slide  
    239 {  
    240 margin: -1px 0 0 -1px !important;  
    241 }  
    242  
    243 * html .RadMenu_Default .vertical .slide  
    244 {  
    245 margin-left: -2px !important;  
    246 }  
    247  
    248 * html .RadMenu_Default .horizontal .slide  
    249 {  
    250 margin-top: -2px !important;  
    251 }  
    252  
    253 .RadMenu_Default_rtl .slide  
    254 {  
    255 margin: -1px 0 0 2px !important;  
    256 }  
    257  
    258 * html .RadMenu_Default_rtl .vertical .slide  
    259 {  
    260 margin-left: 3px !important;  
    261 }  
    262  
    263 * html .RadMenu_Default_rtl .horizontal .slide  
    264 {  
    265 margin-top: -2px !important;  
    266 margin-left: 0 !important;  
    267 }  
    268  
    269 .RadMenu_Default .rootGroup .item .disabled:hover  
    270 {  
    271 background: none;  
    272 }  
    273  
    274 .RadMenu_Default .group  
    275 {  
    276 padding-top: 0px !important ;  
    277 padding-bottom: 0px !important ;  
    278 }  
    279  

    Thanks for your help in advance.

    Yours Truly,
    Salman Sarfraz
  4. Peter
    Peter avatar
    13 posts
    Registered:
    24 Sep 2012
    08 Nov 2007
    Link to this post
    Hello Salman,

    Thank you for the additional information, but unfortunately, it is not enough to reproduce the problem locally. Could you please also send us  xml file, master page and the css styles for the master page and specify the Sitefinity version which you use?


    Greetings,
    Peter
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
4 posts, 0 answered