Right align items on Toolbar

4 Answers 1857 Views
Toolbar
squawk
Top achievements
Rank 1
squawk asked on 22 Jul 2014, 05:42 AM
I'm trialing Kendo UI and currently experimenting with the Toolbar widget.  Got it working ok, but I need to right align certain items on the toolbar - any idea how I would do this?
Danny Fritz
Top achievements
Rank 1
commented on 22 Jul 2014, 02:51 PM

In the source code I'm seeing an option for align, but it isn't documented. Try passing in align: 'right'.

4 Answers, 1 is accepted

Sort by
1
Ivan Danchev
Telerik team
answered on 30 Mar 2021, 03:19 PM

Hello Umutcan,

See this documentation section for more information on how to move tools to the right in the ToolBar: https://docs.telerik.com/kendo-ui/backwards-compatibility/2019-backward-compatibility#kendo-ui-2019-r2-sp1

Here's a dojo example showing how the spacer can be used to move a DropDownList and its label to the right: https://dojo.telerik.com/ajEleren

Regards,
Ivan Danchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Iliana Nikolova
Telerik team
answered on 22 Jul 2014, 03:18 PM
Hi,

To achieve this you should override the default styling using custom CSS rules. For your convenience here is a simple example which demonstrates a possible implementation. 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Marcel
Top achievements
Rank 1
commented on 03 Sep 2014, 12:34 PM

Hi,

Using float:right on the items works fine in all browsers except Firefox (latest version).
In Firefox the menu item floats right, but doubles the height of the toolbar with that item at the right-bottom.
You can reproduce this using Firefox with the example you gave.

Any ideas how to fix this ?

Thanks in advance.
Marcel
Top achievements
Rank 1
commented on 04 Sep 2014, 07:23 AM

Never mind... I found the problem (as i suspected) and fix.
If you use float:right on toolbar items, make sure to add them as the First items in the options.items.
Apparently Firefox is very strict on floats.
0
Ivan Danchev
Telerik team
answered on 23 Jul 2019, 05:41 PM
Hi,

Since the 2019 R2 SP1 release aligning tools to the right in the Toolbar can be done with the new Spacer command type. For more details on this change and a workaround for aligning tools without using the Space, refer to the Breaking Changes section of the documentation.

Regards,
Ivan Danchev
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.
Ben
Top achievements
Rank 1
commented on 02 Apr 2020, 05:26 PM

Hello Ivan,

I am trying to achieve something similar but I am using Razor, and the page you put a link to only has javascript examples.  The spacer solution looks like exactly what I need since I am trying to have my Excel button, and my Add New button on opposite sides of the screen. Here is the code for my grid:

@(Html.CapGrid<Intra.Common.Crr>("gridCrrss", "Cs.xlsx")
        .ToolBar(tb => tb.Create())
        .Columns(columns =>
        {
            columns.Bound(crr => crr.id).Editable("readOnlyColumn").Hidden(true);
            columns.Bound(crr => crr.Name).Title("Name*").Width(200);
            columns.Bound(crr => crr.stuff).Title("stuff").Width(200);
            columns.Bound(crr => crr.things).Title("things).Width(200);
            columns.Bound(crr => crr.whatnots).Title("whatnots").Width(200);
            columns.Command(command =>
            {
                command.Edit();
            }).Width(200);
        })
        .Pageable()
        .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Events(events => events.Error("error_handler").RequestEnd("onRequestEnd"))
            .Model(model => model.Id(crr => crr.ID))
            .Read(read => read.Action("getCrrs", "Crr").Type(HttpVerbs.Get))
            .Create(create => create.Action("AddItem", "Crr"))
            .Update(update => update.Action("UpdateItem", "Crr"))
        )
        .Events(events =>
        {
            events.DataBound("gridCrrs_DataBound");
        })
        )

Any assistance you can provide would be very helpful.

Sincerely

Ben Parker

 

Ivan Danchev
Telerik team
commented on 06 Apr 2020, 03:13 PM

Hello Ben,

The "spacer" command exists only in the context of the Toolbar component: https://demos.telerik.com/aspnet-mvc/toolbar

However, from the posted code-snippet I see you are using the Grid component. The Grid's toolbar is not the Toolbar standalone component, and the "spacer" command is not applicable in this case.

To align a Grid toolbar button to the right, you can use CSS rules with the respective selector. For example, if you have "Add new record" and "Export to Excel" buttons and you want the former to remain on the left and the latter to be displayed at the right side, you can use the following rule:

.k-grid-excel {
  float: right;
}

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Umutcan
Top achievements
Rank 1
Iron
answered on 29 Mar 2021, 08:08 AM
[quote]Iliana Nikolova said:Hi,

To achieve this you should override the default styling using custom CSS rules. For your convenience here is a simple example which demonstrates a possible implementation. 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

[/quote]

In my scenario, I had to move my dropdownlist with its label to the right, instead of toggle button. 

  • I tried .k-toolbar #dropdown and .k-toolbar .k-dropdown but they didn't work.
  • I moved dropdownlist and its label to the place of toggle button and tried them again but they didn't work.
  • I tried adding attribute directly to the dropdown as it is shown here: http://dojo.telerik.com/EFeFi, it also didn't work.

Is there any way to align dropdownlist and its label in toolbar?

Tags
Toolbar
Asked by
squawk
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Iliana Nikolova
Telerik team
Umutcan
Top achievements
Rank 1
Iron
Share this question
or