Toolbar skin

[Naisha]

Hi, 
I tried to set the height of an item to 100px, but than the text go to down.
what should I need to change in the css?

10x

[Princy]

Hello,

Try the following CSS.
CSS;

<style type="text/css">
 .rtbIn
  {
     line-height: 24px ! important;
  }
</style>

Thanks,
Princy.

[Naisha]

Hi,
10x for the answer' but there is still problem if the text contains 2 liens.
pls see attached.

[Kate]

Hi Itai,

I tested your code with the latest version of the controls and I am not able to get the appearance that you do. Please refer to the attached image that demonstrates the look that I get. I also pasted the code that I used for testing:

<telerik:RadToolBar runat="server" ID="radtoolbar">
            <Items>
                <telerik:RadToolBarButton Text="toobBar Button" ImageUrl="../images/Paste.png" Height="100px" ImagePosition="AboveText">
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>

In case this does not help, can you please elaborate a bit more on your scenario - the version of the controls that you use, the browser where you encounter this appearance? If you could send us some sample code that we could test would be very helpful as well. 

Regards,
Kate
the Telerik team

[Naisha]

This is the code in the aspx file:
   

<telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical"
      Skin="Main" EnableEmbeddedSkins="False">
  <Items>
  <telerik:RadToolBarButton runat="server" Text="Dashboard"
          ImageUrl="~/img/Main/dashboard-icon.png" ImagePosition="AboveText" ></telerik:RadToolBarButton>
  <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Sep1"></telerik:RadToolBarButton>
  <telerik:RadToolBarButton runat="server" CheckOnClick="true" CheckedCssClass="NewChk"
  CheckedImageUrl="~/img/Main/orders-icon-selected.png" Checked="true" Text="Orders" ImageUrl="~/img/Main/orders-icon.png" ImagePosition="AboveText"></telerik:RadToolBarButton>

and this is the css file code:

/* <RadToolBar / Default> */

/* <tool wrapper> */

/* <horizontal> */

.RadToolBar_Main .rtbOuter
{
    border: 0px;
}

.RadToolBar_Main .rtbMiddle
{
    border: 0px;
    /*background: #fafafa url('ToolBar/rtbControlBg.png') repeat-x 0 100%;*/
}



/* </horizontal> */

/* <vertical> */

.RadToolBar_Main_Vertical .rtbMiddle
{
    /*background: #fafafa url('ToolBar/rtbVerticalControlBg.png') repeat-y 100% 0;*/
    background: #fafafa url('ToolBar/left-menu-strip.png') repeat-y 100% 0;
    width:147px;

    vertical-align:top;

}

.RadToolBar_Main_Vertical .NewChk
{
    background: #fafafa url('ToolBar/left-menu-strip-selected.png') repeat-y 100% 0;
    width:147px;
}


/* </vertical> */

/* </tool wrapper> */

/* <buttons> */

.RadToolBar_Main .rtbWrap,
.RadToolBar_Main .rtbTemplate
{
    font: normal 15px Tahoma, Arial, sans-serif;
    color: #4f4849;
    /*color: Red;*/

}

/* <button states> */

.RadToolBar_Main .rtbSplBtnFocused .rtbWrap, .RadToolBar_Main .rtbSplBtnFocused .rtbOut, .RadToolBar_Main .rtbSplBtnFocused .rtbMid, .RadToolBar_Main .rtbSplBtnFocused .rtbIn,
.RadToolBar_Main .rtbItemFocused .rtbWrap, .RadToolBar_Main .rtbItemFocused .rtbOut, .RadToolBar_Main .rtbItemFocused .rtbMid, .RadToolBar_Main .rtbItemFocused .rtbIn,
.RadToolBar_Main .rtbItemHovered .rtbWrap, .RadToolBar_Main .rtbItemHovered .rtbOut, .RadToolBar_Main .rtbItemHovered .rtbMid, .RadToolBar_Main .rtbItemHovered .rtbIn
{
    background-color: transparent;
    background-repeat: no-repeat;
    /*background-image: url('ToolBar/rtbHoverBg.png');*/
}

.RadToolBar_Main .rtbItemClicked .rtbWrap, .RadToolBar_Main .rtbItemClicked .rtbOut, .RadToolBar_Main .rtbItemClicked .rtbMid, .RadToolBar_Main .rtbItemClicked .rtbIn
{
    background-color: transparent;
    background-repeat: no-repeat;
    /*background-image: url('ToolBar/rtbClickedBg.png');*/
}

.RadToolBar_Main .rtbSplBtnExpanded .rtbWrap, .RadToolBar_Main .rtbSplBtnExpanded .rtbOut, .RadToolBar_Main .rtbSplBtnExpanded .rtbMid, .RadToolBar_Main .rtbSplBtnExpanded .rtbIn,
.RadToolBar_Main .rtbDropDownExpanded .rtbWrap, .RadToolBar_Main .rtbDropDownExpanded .rtbOut, .RadToolBar_Main .rtbDropDownExpanded .rtbMid, .RadToolBar_Main .rtbDropDownExpanded .rtbIn,
.RadToolBar_Main .rtbChecked .rtbWrap, .RadToolBar_Main .rtbChecked .rtbOut, .RadToolBar_Main .rtbChecked .rtbMid, .RadToolBar_Main .rtbChecked .rtbIn,
.RadToolBar_Main li.rtbChecked .rtbWrap:hover, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbOut, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbMid, .RadToolBar_Main li.rtbChecked .rtbWrap:hover .rtbIn
{
    background-color: transparent;
    background-repeat: no-repeat;
    /*background-image: url('ToolBar/rtbActiveBg.png');*/
}

.RadToolBar_Main .rtbItemFocused .rtbWrap,
.RadToolBar_Main .rtbItemHovered .rtbWrap
{
    color: #000;
}

.RadToolBar_Main .rtbDropDownExpanded .rtbWrap,
.RadToolBar_Main .rtbSplBtnExpanded .rtbWrap,
.RadToolBar_Main .rtbChecked .rtbWrap,
.RadToolBar_Main .rtbItemClicked .rtbWrap
{
    color: #fff;
}

/* </button states> */

/* <Drop Down Arrows> */


.RadToolBar_Main .rtbSplBtn .rtbChoiceArrow,
.RadToolBar_Main .rtbItem .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Main .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbDropArrows.png');
}

* html .RadToolBar_Main .rtbSplBtn .rtbChoiceArrow,
* html .RadToolBar_Main .rtbItem .rtbVOriented .rtbChoiceArrow,
* html .RadToolBar_Main .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbDropArrows.gif');
}

.RadToolBar_Main .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Main .rtbExpandUp .rtbVOriented .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbUpArrows.png');
}

* html .RadToolBar_Main .rtbExpandUp .rtbChoiceArrow,
* html .RadToolBar_Main .rtbExpandUp .rtbVOriented .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbUpArrows.gif');
}

.RadToolBar_Main .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Main .rtbSplBtnClicked .rtbChoiceArrow,
.RadToolBar_Main .rtbItemClicked .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Main .rtbItemClicked .rtbChoiceArrow
{
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('ToolBar/rtbClickedDropArrows.png');
}

* html .RadToolBar_Main .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,
* html .RadToolBar_Main .rtbSplBtnClicked .rtbChoiceArrow,
* html .RadToolBar_Main .rtbItemClicked .rtbVOriented .rtbChoiceArrow,
* html .RadToolBar_Main .rtbItemClicked .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbClickedDropArrows.gif');
}

.RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,
.RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
.RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbClickedUpArrows.png');
}

* html .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
* html .RadToolBar_Main .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,
* html .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,
* html .RadToolBar_Main .rtbItemClicked .rtbExpandUp .rtbChoiceArrow
{
    background-image: url('ToolBar/rtbClickedUpArrows.gif');
}

/* </Drop Down Arrows> */

.RadToolBar_Main_Horizontal li.rtbSeparator
{
    /*border-left: 1px solid #939393;
    background: #f7f7f7;*/
}

.RadToolBar_Main_Vertical li.rtbSeparator
{
    /*border-top: 1px solid #939393;
    background: #f7f7f7;*/
    /* ITAI */
    background-image: url('ToolBar/saparate-line-left-menu.png')  ;
    width: 147px;
    height:3px;
    padding-left:3px !important;


}

/* </buttons> */


/* <disabled states> */

.RadToolBar_Main .rtbDisabled .rtbWrap:hover,
.RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbOut,
.RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbMid,
.RadToolBar_Main .rtbDisabled .rtbWrap:hover .rtbIn
{
    background-image: none;
}

.RadToolBar_Main .rtbDisabled .rtbWrap { color: #888 }

.RadToolBar_Main .rtbDisabled .rtbChoiceArrow,
.RadToolBar_Main .rtbDisabled .rtbWrap .rtbChoiceArrow
{ background-image: url('ToolBar/rtbDropArrows.gif')\9 }

@media screen and (-webkit-min-device-pixel-ratio:0)  /* WebKit alpha + opacity/cleartype bug, like IE wasn't enough... */
{
    .RadToolBar_Main .rtbDisabled .rtbWrap { color: #888; }

    .RadToolBar_Main .rtbDisabled .rtbChoiceArrow,
    .RadToolBar_Main .rtbDisabled .rtbWrap .rtbChoiceArrow
    {
        background-image: url('ToolBar/rtbDropArrows.gif');
    }
}

/* </disabled states */

/* <drop-down> */


/* <Drop Down rounded corners and shadows> */

.RadToolBarDropDown_Main .rtbTopFix,
.RadToolBarDropDown_Main .rtbBottomFix,
.RadToolBarDropDown_Main .rtbGroup
{
    background-image: url('ToolBar/rtbDropDownBg.png');
    background-color: #fff;
    background-repeat: repeat-y;
}

.RadToolBarDropDown_Main .rtbBottomLeft,
.RadToolBarDropDown_Main .rtbRoundedCorners
{
    /*background-image:  url('ToolBar/rtbRoundedLeft.png');*/
    background-color:blue;/* transparent; */
    background-repeat: no-repeat;
}

.RadToolBarDropDown_Main .rtbTopRight,
.RadToolBarDropDown_Main .rtbBottomRight
{
    background-image:  url('ToolBar/rtbRoundedRight.png');
    background-color: Red;/* transparent; */
    background-repeat: no-repeat;
}

.RadToolBarDropDown_Main .rtbTopFix,
.RadToolBarDropDown_Main .rtbBottomFix,
.RadToolBarDropDown_Main .rtbRoundedCorners .rtbFirst
{
    border-color: Fuchsia;/* #979797;*/
}

.RadToolBarDropDown_Main_rtl .rtbBottomLeft,
.RadToolBarDropDown_Main_rtl .rtbRoundedCorners
{
    background-image: url('ToolBar/rtbRoundedLeft_rtl.png');
}

.RadToolBarDropDown_Main_rtl .rtbTopRight,
.RadToolBarDropDown_Main_rtl .rtbBottomRight
{
    background-image: url('ToolBar/rtbRoundedRight_rtl.png');
}

.RadToolBarDropDown_Main_rtl div.rtbTopFix,
.RadToolBarDropDown_Main_rtl div.rtbBottomFix,
.RadToolBarDropDown_Main_rtl .rtbGroup
{
    background-position: 100% 0;
}

/* </Drop Down rounded corners and shadows> */

.RadToolBarDropDown_Main
{
    border-color: #828282;
    background-color: #fff;
    background-image: url('ToolBar/rtbDropDownBg.png');
}

.RadToolBarDropDown_Main .rtbWrap,
.RadToolBarDropDown_Main .rtbTemplate
{
    font: normal 15px Tahoma, Arial, sans-serif;
    color:  #4f4849;
    /*color: Green;*/
}

.RadToolBarDropDown_Main .rtbItemHovered,
.RadToolBarDropDown_Main .rtbItemFocused,
.RadToolBarDropDown_Main .rtbItemHovered .rtbWrap,
.RadToolBarDropDown_Main .rtbItemFocused .rtbWrap
{
    background-image: url('ToolBar/rtbDropDownHover.png');
}

.RadToolBarDropDown_Main .rtbDisabled .rtbWrap
{
    color: #999;
}

.RadToolBarDropDown_Main .rtbSeparator
{
    /*border-color: #939393;
    background: #f7f7f7;*/
    background-image: url('ToolBar/saparate-line-left-menu.png');
    width: 147px;


}

/* </drop-down> */

/* </RadToolBar / Default> */

[Kate]

Hello Itai,

I tried to reproduce the issue that you describe but unfortunately I am still not able to get the appearance that you do. Here I have attacher my testing page as well as am image that represents what I get. Can you please try to modify it so that I can get the look that you currently experience and help you out?

Thank you very much in advance.

Regards,
Kate
the Telerik team