how to scale group buttons to 100% width?

[John Herdean]

I didnt see anywhere I can add a class name to the mobilegroupbuttons to expand the width to take the full screen size... Any ideas here?

[maxkatz]

According to jQuey Mobile docs, they will only stretch as long as the content: http://jquerymobile.com/demos/1.2.0/d...

You can check what CSS is generated -- and update it.

[Hawk]

Hi Max,

What CSS do I need to check? I need to make these group button cover the entire screen width regardless of the contents, as well as removing the rounded corners.

Is this possible?

thanks,

[Illya Stepanov]

Hi Hawk -

The easiest way would be to use Navbar and not a Group Buttons.

If you want to remove the rounded corners in your group-controls use something like this, based on the needed CSS rules:
pre
code.ui-controlgroup-controls {
border-radius: initial !important;
}/code
/pre

Or you can use Responsive approach with Buttons: http://view.jquerymobile.com/master/d...

To use this example in Appery.io, create HTML component and define it as a codediv/code with following properties:

here is used code from jQuery Mobile example inside html component :

The results would be the following in different resolutions:

[Hawk]

Thanks Illya,

In fact NavBar would be perfect for me. However, when I tried the NavBar, I could not drag and drop without having a page footer. My page does not have footer or header. And the group buttons should be somewhere below the top.
How can I go around this?

Thanks,

[Illya Stepanov]

In this case you can try HTML component this way:

Inside html define Navbar this way:

And the result would be the following:

[Hawk]

Thanks Illya,

May I have you advice on how to 'addClass' and 'removeClass' for these buttons?
For normal buttons, I used something like this to change the styling on click:

pre $(element).find('[name="mobilegrid_303"]').addClass('highlighted-red');
$(element).find('[name="mobilegridcell_285"]').addClass('highlighted-red');
$(element).find('[name="mobilegridcell_284"]').addClass('highlighted-red');
$(element).find('[name="mobilegridcell_317"]').addClass('highlighted-red');
$(".C_dateTime").addClass('highlighted-red');
$(".MsgTitle").addClass('highlighted-red');/pre

How to apply the same logic to these buttons in the HTML? (What names should I use?

Many thanks,

[Hawk]

Hi Illya,

Is there any update on my question?
I also need to know how to fire onclick event for these buttons?

Regards,

[Illya Stepanov]

You will need to address your HTML components and apply events on them.

[Hawk]

Is there any example for that? How to add onclick event?