OuterCssClass="rightButton"

[Bernard]

Hello,
When I try to use a RadToolBar with a RadToolBarButton OuterCssClass="rightButton", The bouton is not in the good position. (see attched file). I have Internet Explorer 7.0.5730.13. is it a problem of IE ?

Regards
Bernard

div.RadToolBar .rtbUL
{
    width: 100%;
}
div.RadToolBar .rightButton
{
     float: right;
}

<telerik:RadToolBar ID="toolBar" runat="server" BackColor="White" Width="850px" AutoPostBack="True"

OnButtonClick="toolBar_ButtonClick">

<Items>

<telerik:RadToolBarButton runat="server" ToolTip="Slection" Value="RET" ImageUrl="~/images/Retour.gif">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" ToolTip="Affichage Ua" Value="DUA" ImageUrl="~/images/DescrUA.gif"

Enabled="False">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" ToolTip="Mettre dans la corbeille" Value="OK"

ImageUrl="~/images/Valider.gif" OuterCssClass="rightButton">

</telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar>

[Kate]

Hello Bernard,

I tried the code that you provided but it does not seem to match the screenshot that you attached. Can you clarify what the issue is and how exactly to reproduce it?

Greetings,
Kate
the Telerik team

[Bernard]

Hello Kate,

Many thanks for your answer.

Actually, when I use a RadToolBar with more than one RadToolBarButton.
If I specify for one of them the class="rightButton" to put it on right position, the result depends of the navigator version.
If I use "Internet Explorer 8" There is no problem.
If I use "Internet Explorer 7" or "9" The right Button is not in the good position. It is under the toolbar (like the sceenshoot).

Is there another way to put a RadToolBarButton on right position ?
I have tried ImagePosition="Right" but It doesn't work.
Regards
Bernard

 

 

 

 

[Kate]

Hello Bernard,

Here I have attached a sample page demostrating how you can place an image to the right and to the left side of a RadToolBarButton.

Regards,
Kate
the Telerik team

[Bernard]

Hello Kate,

Thanks for your answer,

Your sample works very well but it's not exactly what I try to do...
I try to put the Button on the right in relation of the Toolbar.
 _______________________________________________
| Button Button Button                                                 Button |
 _______________________________________________

In your example, the ImagePosition="Right" put the image on the right in relation of the Button.

Regards
Bernard

[Kate]

Hi Bernard,

You can apply the following css and attach it to the RadToolBarButton to its CssClass property as shown below:

.rightposition
      {
          padding-left: 50px;
      }

<telerik:RadToolBarButton runat="server" Text="Button 3"  CssClass="rightposition">
                </telerik:RadToolBarButton>

Regards,
Kate
the Telerik team

[Bernard]

Hello Kate,

Thanks for trying to help me but if I try your solution, the button has a wrong behaviour. If I click on left of it, It's the same as if I click on it.

I use Telerik 2010.3.1317.35. Which browsers that support with this release ?

Anyway, thanks for all

Regards
Bernard

[Kate]

Hi Bernard,

Another approach could be to use a simple RadToolBarButton as a separator and place it between the two RadToolBarButtons as shown below. Then to remove the image of the separator and apply margin(the width between the two RadToolbarButtons), you could use the the following css classes:

<telerik:RadToolBarButton runat="server" Text="Button 1">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton runat="server" IsSeparator="true" CssClass="rightposition">
 </telerik:RadToolBarButton>
 <telerik:RadToolBarButton runat="server" Text="Button 2">
</telerik:RadToolBarButton>

.rightposition
        {
           margin-right:100px;
        }
div.RadToolBar_Default_Horizontal li.rtbSeparator
        {
            border:none;
            background:none;
            }

Regards,
Kate
the Telerik team

[Bernard]

Hi Kate,

Good idea, Finally, depending of the browser version, I use your approach only for IE7

div.RadToolBar .rtbUL
{
    width: 100%;
}
div.RadToolBar .rightButton
{
     float: right;
}

/*850 - (3 * 70)*/

.rPosIE73
{
    margin-right:650px;
}

<telerik:RadToolBarButton  Value="SEP" runat="server" IsSeparator="true" CssClass="rPosIE73">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" ToolTip="Mettre dans la corbeille" Value="OK"
                ImageUrl="~/images/Valider.gif">
            </telerik:RadToolBarButton>

if (CurrentInterlocuteur.estIE7)
                    {
                        toolBar.FindItemByValue(@"SEP").Visible = true;
                    }
                    else
                    {
                        toolBar.FindItemByValue(@"SEP").Visible = false;
                        toolBar.FindItemByValue(@"OK").OuterCssClass = @"rightButton";
                    };

 and It's work !

Many thanks...

Bernard

[jlj30]

Hi Kate,

I have a similar challenge.
I want to leave more space just before the last 2 buttons on my toolbar - see the attached screenshot.
The solution you provided to Bernard works well for me (I get the gap I want), but the vertical line still appears on the left side of this gap.

How do I hide this line?

Thanks in advance.

Jim

[jlj30]

Hi,

Never mind.  Figured it out.
I used the following:

.wideSeparator {
            margin-right: 20px !important;
            border: none !important;
            background: none !important;
            background-image: none !important;
        }

<telerik:RadToolBarButton runat="server" IsSeparator="True" Visible="true" CssClass="wideSeparator" />

Jim