Moving toolbar items to the right side of toolbar

[Me]

Hey,

I need to move some of the items to the right side of ejToolbar. How can I achieve that?

P.S. I add items to ejToolbar via dataSource.

[Prince Oliver]

Hi Me, 

 

Thank you for contacting Syncfusion support.   

   

If you have a single <ul> element without separators in toolbar, then you need to set CSS float property for both <ul> and <li> element. Kindly refer to the following code snippet.   

 

<style> 

   .e-toolbar>.e-horizontal.e-ul { 

    float:none; 

    } 

   .e-toolbar ul:last-child>li:last-child { 

    float:right; 

    } 

</style> 

 

Refer to the following link for the sample: http://jsplayground.syncfusion.com/edlvtlpj 

 

If you need to move the entire <ul> elements to the right, you need to set CSS float property to right for the <ul> element. Kindly refer to the following code snippet.   

 

<style> 

   .e-toolbar>.e-horizontal.e-ul { 

    float:right; 

    } 

</style> 

Regards, 

Prince 

[Me]

Hey,In my case I have multiple UL, but would like to move only the last two, what is the best way to achieve that ?

[Me]

[Prince Oliver]

Hi Me, 

Thank you for your update. 

To move only the last two <ul> elements, add a class to the <ul> elements and using CSS set float property to right. Kindly refer to the following code snippet.   

<script type="text/javascript"> 

   var tObj = $("#editingToolbar").data("ejToolbar"); // get the toolbar object 

   $(tObj.itemsContainer[tObj.itemsContainer.length - 2]).addClass("float"); //last before UL element 

   $(tObj.itemsContainer[tObj.itemsContainer.length - 1]).addClass("float"); //last UL element 

</script> 

<style type="text/css" class="cssStyles"> 

   .e-toolbar>.e-horizontal.e-ul.float {  

        float:right;  

   }  

</style 

Alternatively, you can use the CSS alone to set the float property. Kindly refer to the following code snippet. 

<style type="text/css" class="cssStyles"> 

    .e-toolbar>.e-horizontal.e-ul:nth-last-child(2), .e-horizontal.e-ul:nth-last-child(1){  

         float:right;  

    }  

</style> 

Regards, 

Prince 

[Me]

Hey,

I used your part of code which uses addClass, bet there is not completely fine behavior:

1. Seperator is not moved to the right

2. After moving to the right, order is incorrect.

How can I fix that?

[Prince Oliver]

Hi Me, 

Thank you for your update. 

We have checked your requirement.  

Query 1. Seperator is not moved to the right 

 

Response: To move the separator to the right, you need to move it using CSS. Kindly refer to the following code snippet.    

<style type="text/css" class="cssStyles"> 

.e-toolbar>.e-horizontal.e-ul.e-separator.float{ 

      border-left: 1px solid #c8c8c8; /* separator border color for default theme */ 

      border-right: none; 

} 

</style> 

Query 2:   After moving to the right, order is incorrect. 

 

Response:  By default, setting float to right for elements will place the elements in Right to Left order. If you need to change the default order, then you need to change the <ul> element order. Kindly refer to the following code snippet. 

<script type="text/javascript"> 

    var tObj = $("#editingToolbar").data("ejToolbar"); // get the toolbar object  

    $(tObj.itemsContainer[tObj.itemsContainer.length - 2]).addClass("float"); //Second to the last UL element  

    $(tObj.itemsContainer[tObj.itemsContainer.length - 1]).addClass("float"); //last UL element  

    tObj.element.append(tObj.itemsContainer[tObj.itemsContainer.length - 2]); //Moving second to the last UL element to last 

</script> 

Note: if you are moving the second to last <ul> element to last, then you don’t need to set CSS for adding separator, as it would also be moved along the element. 

 

Regards, 

Prince 

[Agne]

Hello,

there is again one more problem now: after reducing to one button and returning back, order again incorrect.

How can I fix that?

Before resize (correct order):

After reducing and returning back (incerrect order):

[Prince Oliver]

Hi Me,   

  

Thank you for your update.   

  

After resizing the toolbar, try moving the second to the last element to the last. Kindly refer to the following code snippet.   

<script> 

var tObj = $("#editingToolbar").data("ejToolbar"); // get the toolbar object   

tObj.element.append(tObj.itemsContainer[tObj.itemsContainer.length - 2]); //Moving second to the last UL element to last  

</script> 

If this doesn’t solve you issue, please provide additional information on the issue with code snippet or an issue reproducible sample. It will help us provide you solution.   

Regards, 

Prince 

[Agne]

Hello,

How can I catch ejToolbar event when buttons are added into menuButton and removed from menuButton and added to ejToolbar again? Also, is there a way to know which button is added/removed? - I will need that because I want to move to the right only specific buttons, not all of them.

[Prince Oliver]

Hi Me, 

Thank you for your update. 

We are unable to fully get your requirement, please provide us more information about your requirement. Also provide us a sample replicating your issue, it will help us provide you solution. 

Regards, 

Prince