Page 1 of 1

Group Buttons in header

Posted: Tue Jun 10, 2014 1:07 pm
by Slava Balabanov

Hi,
So i'm trying to add 2 or more buttons to the header. I know its possible to use that with the NavBar but its not possible for me, i'll explain why:
I'm using the FontAwesome pack in order for me to use different icons than the default ones. I'm able to put them on the page itself how it want.
I've also managed to put a button with the icon in the header by placing an HTML component there and adding the following code:
precode
<a name="addDishBtn" data-role="button" class="ui-link ui-btn ui-btn-right ui-shadow" data-corners="false" data-inline="true" data-theme="b" role="button">
<i class="fa fa-plus"></i>
</a>
/code/pre

I've also read here that its possible to put a controlgroup there and place several buttons. http://demos.jquerymobile.com/1.4.2/t...
I've tried that by placing the following code in the HTML component that i've put in the header but it creates a vertical list for some reason
precode
<div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
<a name="addDishBtn" data-role="button" class="ui-link ui-btn ui-shadow ui-first-child" data-corners="false" data-inline="true" data-theme="b" role="button">
<i class="fa fa-plus fa-1x"></i>
</a>
<a name="refreshBtn" data-role="button" class="ui-link ui-btn ui-shadow ui-last-child" data-corners="false" data-inline="true" data-theme="b" role="button">
<i class="fa fa-refresh fa-1x"></i>
</a>
<>
/code/pre

Please advise on how to do this.
My project is already shared with you. Its name is Plate-O
The public link is:
http://appery.io/app/mobile-frame?src...
Login with user: t@t pass: 123


Group Buttons in header

Posted: Tue Jun 10, 2014 2:11 pm
by Evgene Karachevtsev

Helli Slava,

Please add this castom CSS:

code[data-role="controlgroup"]{
width: auto !important;
left: auto;
right: 0;
padding: 0;
}/code


Group Buttons in header

Posted: Tue Jun 10, 2014 3:17 pm
by Slava Balabanov

Thanks, working now =]