Align icon to the right of Button text

6 posts, 0 answers
  1. Leo Drozda
    Leo Drozda avatar
    1 posts
    Member since:
    May 2005

    Posted 06 Aug 2014 Link to this post

    Is there anyway of aligning a custom icon to the right of a mobile button's text? I noticed there was a CSS class called 'k-space-right' for text fields in Kendo UI Web that is used for positioning icons to the right of inputs. Is there a similar class in the mobile kit or is there anyway I can reliable position icons to the right of a buttons title ?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Aug 2014 Link to this post

    Hi Leo,

    The following CSS rule should help to achieve the desired outcome: 
    .km-button .km-icon {
        float: right;
        margin-left: 0.3em;
    }

    For your convenience here is a simple example which demonstrates the suggested approach in action. 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jul 2018

    Posted 06 Sep in reply to Iliana Nikolova Link to this post

    What if you only want the icon on the right for one button.  For example, I want a next and previous page button with the appropriate chevron.  For the previous page the icon is correct but for the next page the chevron is on the left when I want it on the right.
  4. Preslav
    Admin
    Preslav avatar
    440 posts

    Posted 10 Sep Link to this post

    Hi Daniel,

    To apply this effect only for specific buttons, you should change the class selector. For example, add another class or use the ID of the button.

    If you share a runnable page I would be able to help you in finding these selectors.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Daniel
    Daniel avatar
    4 posts
    Member since:
    Jul 2018

    Posted 5 days and 7 hours ago in reply to Preslav Link to this post

    Using the example page you provided earlier I created a copy of the home button and used a class to have one of them with the icon on the right.  This works.

    Now when I try to apply that to my page the .km-button and .km-icon don't seem to do anything.  The differences could be the versions I'm using.  I'm doing a ASP.NET Core 2.1 MVC 6 application.  My button is in the syntax of an html helper:

    <div class="row" style="margin-top: 20px; margin-bottom: 10px;">
        <div class="col-md-2" style="padding-top: 15px;">
            @(Html.Kendo().Button()
                        .Name("previousDayButton")
                        .Content("Previous Day")
                        .Icon("arrow-chevron-left")
                        .HtmlAttributes(new { type = "button", title = "Previous Day" })
                        .Events(ev => ev.Click("previousDayButtonClick"))
            )
        </div>

        <div class="col-md-8 center-block">
            <h2>@Model.DateDisplay</h2>
            <input asp-for="DateSelected" type="hidden" />
        </div>

        <div class="col-md-2" style="text-align: right; padding-top: 15px;">
            @(Html.Kendo().Button()
                               .Name("nextDayButton")
                               .Content("Next Day")
                               .Icon("arrow-chevron-right")
                               .HtmlAttributes(new { type = "button", title = "Next Day", @class = "iconRight" })
                               .Events(ev => ev.Click("nextDayButtonClick"))
            )
        </div>
    </div>

    I tried removing the .iconRight class selector from my site.css hoping that all buttons would align the icon to the right but it seems to do nothing.  Are there different classes using my method?  When I inspect the button it has the classes k-button and k-button-icontext so I tried changing my css to those classes but still nothing.

  6. Preslav
    Admin
    Preslav avatar
    440 posts

    Posted 2 days and 11 hours ago Link to this post

    Hello Daniel,

    Thank you for elaborating on the scenario. The regular buttons(not the mobile ones) are styled in a different way. In this case, the correct CSS should look like:

    <style>
        .iconRight > .k-icon {
            order: 1;
            margin: 0 -.125em 0 .1875em;
        }
    </style>

    For your convenience, I am attaching a sample ASP.NET Core project that demonstrates the above.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top