Option for something similar to jQM HeaderBar

1

I’m in the process of moving one of my apps from jQM to Bootstrap using NSB 6.3. I’m having some challenges though trying to find a way to simulate the HeaderBar Control in JQM using Bootstrap.

headerbar

The app is built with phonegap for iOS and Google stores and I use the Headerbar at the top with icons on the left and right, to go “home” or bring up an "info’ box about the current screen.

I briefly looked at having a container with 2 buttons and label in the middle, but running into challenges with icon vs button sizes (icons are too small), making the buttons invisible except the icon to simulate the HeaderBar look.

Before i spend too much time thought I would see if anyone else has had an alternative solution

Any suggestions/ideas would be most welcome,
Thanks,
Malcolm

2

Trying to simulate creates a lot of headache…

But your task is quite simple.
Place common/header

  • header.top = 0
  • header.left = 0

Place two Bootstrap/Button somewhere on the form
Then drag both Button on top of the headerbar. Then it becomes a child of it.
Left Button:

the button on the right side the same, but:

  • icon: info
  • style: float:right;

I would recommend to add the same way a label to print the text: AirFlow. otherwise you’ll run into trouble

boots.nsx (19.0 KB)

1 Like
3

Thank you very much, that’s very helpful. I’ll just have to play around with the padding and size of the icon to tweak, to get a large icon to fit in.