We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Moving toolbar items to the right side of toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

131318 Jul 4,2017 06:28 PM UTC Jul 21,2017 09:24 AM UTC Angular 10
loading
Tags: ejToolbar
Me
Asked On July 4, 2017 06:28 PM UTC

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 [Syncfusion]
Replied On July 5, 2017 07:22 AM UTC

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
Replied On July 12, 2017 05:30 AM UTC

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
Replied On July 12, 2017 05:30 AM UTC


Prince Oliver [Syncfusion]
Replied On July 13, 2017 08:33 AM UTC

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
Replied On July 18, 2017 02:49 PM UTC

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 [Syncfusion]
Replied On July 19, 2017 12:30 PM UTC

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
Replied On July 19, 2017 02:13 PM UTC

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 [Syncfusion]
Replied On July 20, 2017 07:26 AM UTC

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
Replied On July 20, 2017 12:27 PM UTC

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 [Syncfusion]
Replied On July 21, 2017 09:24 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;