OuterCssClass="rightButton"

11 posts, 0 answers
  1. Bernard
    Bernard avatar
    41 posts
    Member since:
    Jun 2010

    Posted 25 Mar 2011 Link to this post

    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>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Mar 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bernard
    Bernard avatar
    41 posts
    Member since:
    Jun 2010

    Posted 30 Mar 2011 Link to this post

    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

     

     

     

     

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Apr 2011 Link to this post

    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
  6. Bernard
    Bernard avatar
    41 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2011 Link to this post

    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
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Apr 2011 Link to this post

    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
  8. Bernard
    Bernard avatar
    41 posts
    Member since:
    Jun 2010

    Posted 07 Apr 2011 Link to this post

    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

  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Apr 2011 Link to this post

    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
  10. Bernard
    Bernard avatar
    41 posts
    Member since:
    Jun 2010

    Posted 08 Apr 2011 Link to this post

    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
  11. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 06 May 2014 in reply to Kate Link to this post

    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
  12. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 08 May 2014 in reply to jlj30 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017