Appery.io tester app UI

[Yan Yi]

I recently downloaded the Appery.io tester app and found the UI to be simple but beautiful - something I wish my app can follow! I am assuming you guys built this app with Appery

Here are some features I have attempted to implement myself but did not work very well. May I know how you all did it?

1. Nicely Aligned header text and header buttons.
   I have a hard time getting the header text and buttons to be aligned using CSS. They are not aligned properly as I increased the height of the header using CSS. How to get them all on the same line and is it better to use margins in the visual app builder or CSS selector?

2. header button animation
   The app has header buttons which turn opaque when tapped. Should we use the css selector "button hover" or "button down" for this? I tried both but the opacity sets in quite slow - I need to hold the button down for about 0.5 seconds.

3. header button bug
   Not sure why, but my header buttons jump up and down when the user taps on any area outside of the header. Have tried to remove all css but it still bounces.

[Illya Stepanov]

Hi Yan -

On what device have you tested the Appery.io tester?

Can you show what code have you used? Or you can post a public link that we can test that?

[Yan Yi]

Hi IIIya, the problems I mentioned above were not with the Appery.io tester, but with my own app. I just used the Appery.io tester as an example for the type of UI I am trying to achieve.

I have sent the link to a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a! try clicking anywhere outside the header and you can see the button move.

[Illya Stepanov]

Ok, thanks we'll test it.

[Maryna Brodina]

Hello!

[quote:]use margins in the visual app builder or CSS selector[/quote]it's up to you. You set margins for one specific element, but with one CSS selector you can describe all buttons on all screens.

Not sure, but seems to be there is no option in jqm to set animation time of button click. You can try to add custom JS to add/delete class for button which is pressed.
[quote:]header button bug[/quote]it's not a bug, on button click to header is added/deleted class ui-fixed-hidden. And if there is/there is no this class, there is set different button position. Change your rule pre.ui-header .ui-btn-left {
right: 10px;
top: 25px;
}/preto the following prediv .ui-header .ui-btn-left, div.ui-header.ui-header-fixed .ui-btn-left {
right: 10px;
top: 25px;
}
div.ui-header-fixed {
top: 0;
}
div.ui-header-fixed.ui-fixed-hidden {
padding-top: 1px;
}/pre

[Yan Yi]

Thanks Maryna! Unfortunately, that code did not work - but I have solved it using another method.

Just add codedata-tap-toggle="false"/code to header properties to prevent tap/toggle. However, I will have to do this manually for all my screens. Is there a way to set this property for all screens at once?

[Maryna Brodina]

Hello!

Thank you for sharing!
Unfortunately there is no to do that.