How to position the Toolbar at the bottom in the iOS and Android Tablet?
By default, Toolbar is positioned as follows:
- iOS Tablet and Android Tablet and Mobile - Top
- iOS Mobile and Windows Tablet and Mobile - Bottom
The Toolbar in the iOS and Android Tablet mode can be positioned at the bottom of the Tablet or anywhere in the page by setting the position as normal. So, the Toolbar is rendered relative to the position of the parent element.
In the following example, Toolbar position is set as normal and is rendered relative to the parent div element.
HTML
<div style="margin:550px auto;width:100%;position:fixed;"> <div data-role="ejmtoolbar" id="toolbar" data-ej-position="normal"> <ul> <li data-ej-iconname="add"></li> <li data-ej-iconname="cut"></li> </ul> </div> </div> |
In the case of Android Mobile, Toolbar can be brought to the bottom by setting the in-built property, enablesplitview to true. This splits up the element as the header at the top and toolbar item display at the bottom. Refer to the following code example.
HTML
<div data-role="ejmtoolbar" id="toolbar" data-ej-android-enablesplitview=true > <ul> <li data-ej-iconname="add"></li> <li data-ej-iconname="cut"></li> </ul> </div> |
