There’s no padding by default, so you basically need to style text like you would with regular HTML elements.
See here for some examples of how to do that: https://onsen.io/playground/?framework=vanilla&category=reference&module=input
Also check the User Interface Tutorials section (at the bottom of the drop-down menu) for some more complicated UI examples.
Hmmm… I think both the toolbars from your screenshot might actually be the same size, but the iPad one is overlapping with the device status bar. You can see the blue icon on the right is overlapping.
By the way, that overlapping behaviour shouldn’t happen. Does it still happen if you remove the icon and just have a text in the toolbar? I’m guessing that the problem is because the icon height is larger than the toolbar height and the toolbar is not automatically resizing.
From the OnsenUI source code, it looks like the height is set to 46px. It should be possible to override this by applying your own CSS class to the toolbar.
https://github.com/OnsenUI/OnsenUI/blob/master/css-components/src/components/toolbar.css#L6
The problem is that you have currently have the splitter inside the navigator, when you actually need the navigator inside the splitter.
Copy the example from the link I already posted. It defines a splitter, and within the splitter content is a navigator. That means that the splitter is available on every page, no matter what page the navigator shows.
Then for the tabbar, just define a page with a tabbar and push it using the navigator. That means you have:
It might work to set the icon attribute of ons-tab, then inspect the tab in your browser’s dev tools, and copy the compiled result from the inspector into your source code. This way Onsen doesn’t compile the tab because you’re already using the transformed version of the tab. Then you should be able to put HTML child elements in the tab.
Onsen should scale components automatically to look good on whatever size of device.
You might be able to do it directly in CSS, or you could check if the device is an iPad with ons.platform.isIpad and apply your own CSS classes accordingly.
https://onsen.io/v2/api/js/ons.platform.html#method-isIPad
Maybe something like this? https://onsen.io/playground/?framework=vanilla&category=common patterns&module=splitter_navigator
But instead of navigator use tabbar.
@icangeek Basically, just use ons-page and template and don’t bother about ons-template.
I don’t have a good understanding of angular-fontawesome, but the fa-icon included with it is an Angular component, right? In that case, I don’t think it’s going to work with Onsen because Onsen works by reading the string in the icon attribute and compiling it internally. You can see the result of this by inspecting an ons-icon in your browser dev tools.
Is the issue that you want to use icons that are not included in OnsenUI already?
Sorry, I’m not sure I understand the question.
Can you provide an example of what you mean here? https://onsen.io/playground/
Then click Export to Codepen and post the link here
Maybe try using OnsenUI core https://onsen.io/v2/guide/appsize.html#removing-icon-packs
This is Onsen without the icons included so you should be able to use it to avoid conflicts with your own icons.
