Text allignment on radButton when using as ImageButton

7 posts, 0 answers
  1. Farrukh
    Farrukh avatar
    2 posts
    Member since:
    Dec 2011

    Posted 23 Sep 2013 Link to this post

    I have a scenario that i want to use radButton as image button where i can easily adjust text-allign property to Left but i want to use text on the bottom of the button Like a scenario If we put an image/icon and Below that icon a label is placed and together they are encapsulated in a Panel. can we use RadButton in the same way? A complete example code 'll be highly appreciated while u can also pasted the code for this scenario.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Sep 2013 Link to this post

    Hi Farrukh,

    Please take  a look into the following code snippet I tried to show the text below the image icon of the Radbutton.

    ASPX:
    <span class="txtImg">
        <telerik:RadButton ID="btnBgrImg1" runat="server" Width="42px" Height="43px" ForeColor="Black"
            CssClass="goButtonClassHov" Text="GO!">
            <Image ImageUrl="../Images/cb_go_empty.png" IsBackgroundImage="true"></Image>
        </telerik:RadButton>
    </span>

    CSS:
    <style type="text/css">
        .goButtonClassHov .rbText
        {
            margin-top: 55% !important;
            font-size: 10px !important;
        }
        #btnBgrImg1
        {
            background-repeat: no-repeat !important;
        }
        .txtImg
        {
            display: block !important;
            float: left !important;
            width: 150px !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Farrukh
    Farrukh avatar
    2 posts
    Member since:
    Dec 2011

    Posted 24 Sep 2013 Link to this post

    i have tried with your code. I have an image of almost 90 * 85, i exactly want to achieve what you have attached as a screen shot. I have copy and pasted your code but still its not working in my case.I also have changed width and height to adjust the used image display but its not working :(
    a screen shot is attached, the above part is my desired part while the below part reflects the code which you have provided..
    Any help would be appreciated.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Sep 2013 Link to this post

    Hi Farrukh,

    Try to adjust the margin-top property of the CSS class '.goButtonClassHov .rbText'. Please have a look into the following CSS that I have tried.

    CSS:
    <style type="text/css">
        .goButtonClassHov .rbText
        {
            margin-top: 100% !important;
            font-size: 10px !important;
        }
        .txtImg
        {
            display: block;
            float: left;
            width: 150px;
        }
        .RadButton_Default
        {
            background-repeat: no-repeat;
            width: 165% !important;
        }
    </style>

    Thanks,
    Shinu.
  6. Dwight
    Dwight avatar
    27 posts
    Member since:
    Aug 2011

    Posted 26 Apr 2014 Link to this post

    Hi

    I want to achieve a similar effect but with a radmenu

    Is it possible to have an icon positioned above the text in the root menu only? if so how would I achieve that?

    I can easily get an icon to the left of the text but I cant work out how to place it above it


    Thx for any assistance

  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Apr 2014 in reply to Dwight Link to this post

    Hi Dwight,

    Please try the following CSS to achieve your scenario.

    ASPX:
    <telerik:RadMenu ID="radmenuIconPosition" runat="server">
        <Items>
            <telerik:RadMenuItem Text="Item1" ImageUrl="../Images/plus.gif" Height="30px">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
        .rmText
        {
            margin-top: 10px !important;
            float: left !important;
        }
        .RadMenu .rmLeftImage
        {
            margin: 0px 0px 0 -11px !important;
            float: left !important;
        }
    </style>

    Thanks,
    Shinu.
  8. Dwight
    Dwight avatar
    27 posts
    Member since:
    Aug 2011

    Posted 28 Apr 2014 in reply to Shinu Link to this post

    Thx Shinu, it was good to learn about the float element however it was not what i wanted

    I have opened a support ticket as i want three changes to the menu that I currently have so I will wait for a reply from that one


    I appreciate your reply though :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017