Align icon to the right of Button text

[Leo Drozda]

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 ?

[Iliana Dyankova]

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

 

 

[Daniel]

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.

[Preslav]

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

[Daniel]

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.

[Preslav]

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