Trying to align search input and help icon to the right?

Webix JS
1
  1. How do I align the search and help icon to the right?
  2. How can increase the size of the help icon?
 var iconHelp = "<span class='webix_icon fa-question-circle'></span>";
 var list = [];
 var toolbar = {
			  view:"toolbar",
			  elements:[
		      { 
					  view:"richselect", width:170, labelWidth:90,
					  label: 'View Pages', labelAlign:"left",
					  value:1, options:[
						  { id:1, value:"4"   }, 
						  { id:2, value:"5"   }, 
						  { id:3, value:"6"   }
					  ],
                		on:{
						onchange:function(){
							pagerSize = this.data.text;
							$$("pagerA").define("size", pagerSize);
							$$("chk").refresh();
						}
				  }
              },
				{ 
					view:"richselect", width:170, id:"batchAction", labelWidth:90,
					labelAlign:"left",
					value:1, options:[
						{ id:1, value:""   }, 
						{ id:2, value:"red background"   }, 
						{ id:3, value:"green background"   }, 
						{ id:4, value:"blue background"   }, 
						{ id:5, value:"yellow background" }
					],
					on:{
						onchange:function(){
                          		alert($$('batchAction').getText());
//							if($$('batchAction').getValue() == 2) $$('chk').addRowCss(1, "red"); 
//							if($$('batchAction').getValue() == 3) $$('chk').addRowCss(2, "green"); 
//							if($$('batchAction').getValue() == 4) $$('chk').addRowCss(3, "blue"); 
//							if($$('batchAction').getValue() == 5) $$('chk').addRowCss(4, "yellow"); 
						}
					}

				},
			    { view:"search", align:"right", placeholder:"Search by keyword", id:"searchfilter", inputWidth: 220},
                { view:"button",id:"helpIcon", align:"left", template:iconHelp} 
			  ]
      };

      var pagerData = {
        id:'pagerA',
        template:"{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
        container:"pager",
        size:4,
        group:5
      };

var grid = {
                           view:"datatable",margin:50,
            id:"chk",
            columns:[
        //checkbox column
        { 
         id:"status",header:{ content:"masterCheckbox" }, checkValue:"on", uncheckValue:"off",template:"{common.checkbox()}",      width:40,margin:100},
{ id:"title",header:"Title", width:200},
{ id:"year",header:"Year", width:200}

            ],
            on:{
              onCheck:function(id, col, status){ 
                //var list = [];
                if (status) list += id + ', ';
                //else $(id, list).remove();
                arr = list.split(',');
//                alert(arr.length-1);
                alert(arr);
                console.log(list);
              }
            },
            autoheight:true,
//            autowidth:true,
            multiselect:true,
  			pager:pagerData,
            select:'row',

            data: [
	{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
	{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
	{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
	{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
	{ id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
	{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
]
            };
                    
			webix.ui({
				container:"areaA",
				rows:[ toolbar, grid]
			})
2

When I switch the search input and help icon … help icon goes to the left, but I would need it to stay aligned to the right…next to the search input. How to do?

The align:“right” only works with the search input below:
{view:“icon”, align:“right”,icon:“question-circle”, id:“helpIcon”},
{view:“search”, align:“right”, placeholder:“Search by keyword”, id:“searchfilter”, inputWidth: 220}

3

You can alter the icons through css - they are just symbols from icon font, so by using font-size and text-align styles you can change their size and position.

4

Still unable to use text-align:right nor align:right in css to get the help icon next the search input…

 var iconHelp = "<span class='webix_icon fa-question-circle'></span>";
 var toolbar = {
			  view:"toolbar",
			  elements:[
		      { 
					  view:"richselect", width:170, labelWidth:90,
					  label: 'View Pages', labelAlign:"left",
					  value:1, options:[
						  { id:1, value:"4"   }, 
						  { id:2, value:"5"   }, 
						  { id:3, value:"6"   }
					  ],
                		on:{
						onchange:function(){
							pagerSize = this.data.text;
							$$("pagerA").define("size", pagerSize);
							$$("chk").refresh();
						}
				  }
              },
				{ 
					view:"richselect", width:170, id:"batchAction", labelWidth:90,
					labelAlign:"left",
					value:1, options:[
						{ id:1, value:""   }, 
						{ id:2, value:"red background"   }, 
						{ id:3, value:"green background"   }, 
						{ id:4, value:"blue background"   }, 
						{ id:5, value:"yellow background" }
					],
					on:{
						onchange:function(){
                          		alert($$('batchAction').getText());
						}
					}

				},
                {view:"icon", icon:"question-circle", id:"helpIcon" },
			    { view:"search", align:"right", placeholder:"Search by keyword", id:"searchfilter", inputWidth: 220}
			  ]
      };

webix.ui({
				container:"areaA",
				rows:[ toolbar]
			})
5

Check
http://webix.com/snippet/8929323d