leonardo
Posts: 0
Joined: Thu Mar 14, 2013 7:04 pm

IPhone-like Icons and UI problems

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?

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

IPhone-like Icons and UI problems

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

leonardo
Posts: 0
Joined: Thu Mar 14, 2013 7:04 pm

IPhone-like Icons and UI problems

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?

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

IPhone-like Icons and UI problems

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.

leonardo
Posts: 0
Joined: Thu Mar 14, 2013 7:04 pm

IPhone-like Icons and UI problems

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

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

IPhone-like Icons and UI problems

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

leonardo
Posts: 0
Joined: Thu Mar 14, 2013 7:04 pm

IPhone-like Icons and UI problems

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?

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

IPhone-like Icons and UI problems

Hi Leonardo,

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

leonardo
Posts: 0
Joined: Thu Mar 14, 2013 7:04 pm

IPhone-like Icons and UI problems

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

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

IPhone-like Icons and UI problems

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.

Return to “Issues”