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

OuterCssClass="rightButton"

10 Answers 58 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Bernard
Top achievements
Rank 1
Bernard asked on 25 Mar 2011, 05:03 PM
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>

10 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 30 Mar 2011, 11:25 AM
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
0
Bernard
Top achievements
Rank 1
answered on 30 Mar 2011, 01:16 PM

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

 

 

 

 

0
Kate
Telerik team
answered on 04 Apr 2011, 11:06 AM
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
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
Bernard
Top achievements
Rank 1
answered on 04 Apr 2011, 02:08 PM
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
0
Kate
Telerik team
answered on 07 Apr 2011, 09:43 AM
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
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
Bernard
Top achievements
Rank 1
answered on 07 Apr 2011, 01:12 PM

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

0
Kate
Telerik team
answered on 07 Apr 2011, 02:29 PM
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
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
Bernard
Top achievements
Rank 1
answered on 08 Apr 2011, 02:50 PM
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
0
jlj30
Top achievements
Rank 2
answered on 07 May 2014, 12:46 AM
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
0
jlj30
Top achievements
Rank 2
answered on 08 May 2014, 12:08 PM
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
Tags
ToolTip
Asked by
Bernard
Top achievements
Rank 1
Answers by
Kate
Telerik team
Bernard
Top achievements
Rank 1
jlj30
Top achievements
Rank 2
Share this question
or