Forum | Appery.io

Does anyone have the procedure for inserting IPhone-like icons?

I have these other problems with my test app:

Scrollbar
- Going through the Header and Footer -- anyway to contain it?
- Looks like Windows scrollbar -- anyway to make it look like IPhone's

Navbar
- Too high -- anyway to shorten it?

Hello!

• Going through the Header and Footer -- anyway to contain it? Sorry, not sure I understand

• Looks like Windows scrollbar -- anyway to make it look like IPhone's - please take a look here https://getsatisfaction.com/tiggzi/to..., we're going to add iOS theme

  Too high -- anyway to shorten it? - You would need to use CSS to change it's height

I mean is there any way to make the Scrollbar not go through the Header and Footer? If the item to display exceeds the length of the screen the scrollbar shows up from the Header to the Footer. I expected that it would be automatically contained within the container.

The Navbar section currently show this in the css:
code
/* mystartNav */
.mobilenavbar1 {

}
.mobilenavbar1 .ui-grid-a .ui-block-a {
clear:none;
}
/code
I wanted to put:
code
/* mystartNav */
.mobilenavbar1 {
width: 320px; height: 35px;
}
/code
but it appears that mystartScreen.css is locked and wouldn't allow me to edit it. Is that the right place to make the change?

If you mean the Scrollbar you see in desktop browser then it won't be shown after you install app on device.

I'll update about NavBar.

Ok. Thanks. That's what I mean. Will expect.

You would need to create custom CSS with the next rule:

codediv.mobilenavbar1 {
width: 350px !important;
}/code

To shorten Navbar manipulate paddings:

code.mobilenavbar1 li .ui-btn-icon-top .ui-btn-inner {
padding-top: 20px !important;
padding-bottom: 2px !important;
}
.mobilenavbar1 li .ui-icon {
top: 2px !important;
}/code

Want to be sure I got you correctly, since I'm just trying to understand how Tiggzi works.
1 I create a custom CSS named testCustom.css
2 In testCustom.css I put these rules and settings:

code
div.mobilenavbar1 {
width: 350px !important;
}

.mobilenavbar1 li .ui-btn-icon-top .ui-btn-inner {
padding-top: 20px !important;
padding-bottom: 2px !important;
}

.mobilenavbar1 li .ui-icon {
top: 2px !important;
}
/code

If so, where do I reference and link testCustom.css to the mobilenavbar1?
Is it linked to the whole project, page or mobilenavbar1 only?

Hi Leonardo,

In this CSS code, only "mobilenav1" component name is mentioned.
That's why the CSS will be applied to NavBar only.

Sorry, I meant to ask how would I connect testCustom.css to the page?

Hi, you don't need to do any additional steps - just create CSS and apply it to components you need to change. It will be linked automatically.