Grid Command Alignment - Float not working

1 Answer 60 Views
Grid
Cristian
Top achievements
Rank 1
Iron
Cristian asked on 14 Apr 2023, 07:07 AM

Hi guys.

I have a grid with 4 command buttons. I need to align the last one to the right. I try some ways I find on the support furum but I can't obtain my goal. Can you help me? This is my code:

</style>
    .impExcel a { float: right; }
    .impExcel { float: right; }
</style>

then...

            @(
                Html.Kendo().Grid<MCP310.Models.MCP_Detail>()
                .Name("Grid_MCP_Detail")
                .ToolBar(toolbar => {
                    toolbar.Create().HtmlAttributes(new { @class = (Model.idStatoRichiesta > 0 ) ? "k-button-outline-primary  k-state-disabled" : "k-button-outline-primary k-state-default" });
                    toolbar.Save().HtmlAttributes(new { @class = "k-button-outline-primary"});
                    toolbar.Custom().Text("t").IconClass("k-icon k-i-file-excel impExcel").HtmlAttributes(new { @class = "k-button-outline-primary impExcel", @id = "btnImportExcel"});
                })
                .Columns(columns => {
.....

Thanks

Cristian

1 Answer, 1 is accepted

Sort by
0
Cristian
Top achievements
Rank 1
Iron
answered on 14 Apr 2023, 08:28 AM
Using Sass-based themes the toolbar container is a flex container. So we can use the following CSS to align the last button (excel button) to the right:

    .k-grid-toolbar a:last-child {
        margin-left: auto;
    }

Tags
Grid
Asked by
Cristian
Top achievements
Rank 1
Iron
Answers by
Cristian
Top achievements
Rank 1
Iron
Share this question
or