test

Dialogs' overlays on the demo page are missing transparency. Overlay is transparent only during show and hide animation, else overlay is not transparent (have same color).

Overlay show and hide animation shoul not be slide up and down but fade in and out. Only dialog should slide up and down.

I am using iPad 2 with iOS 5.

Hello. When using this styles in a Retina display device, here's how the disclosure indicator looks:

Theme is broken with Windows Phone IS12T.

Trying to add some data-icon but not working anyone idea ?

Compatibility issue with 1.0.1

It doesn't look like the header buttons are quite vertically centered, it looks like there's slightly more space below the button than above (tested in iPad, Chrome, Firefox). Is this something that can fixed with a little style tweak?

Also - is there any chance you could add the PSDs to Git that you used to create that button backgrounds? It might make it easier to build customized themes this way.

Thanks for all of your hard work on this theme!

Darken dialog background as currently it looks a little off.

Add bottom footer to demo, style it to look like iPhone and consider embedding Glyphish.

Ensure all CSS gradients work in Firefox and Opera.

So when you tap on a list item, it's supposed to turn blue when you tap and when you release it the text is supposed to turn black again.

But if you tap quickly the blue background never comes in and the words just turn white with a blue drop shadow.

I'm running the demo on my iphone 4s.

Box shadow issue with compatibility in 1.0.1

Investigate replacing the back button CSS transforms technique with a webkit mask image

So if you have a list item, tap and hold it so that it opens the web view dialog (open, copy, cancel). The background of the list item turns blue, but when you hit cancel the blue background stays on and doesn't reset back to white.

It seems that you don't have a hack / replacement for controlgroup vertical which is fine.

However, the default css is not displaying the icons in this controlgroup vertical,

e.g.

     <div id="navigation" data-role="controlgroup" data-type="vertical">
        <a href="#" data-role="button" data-icon="plus" id="plus"
           data-iconpos="notext"></a>
        <a href="#" data-role="button" data-icon="minus" id="minus"
           data-iconpos="notext"></a>
      </div>

as demonstrated in the zoom in / zoom out in JQuery mobile Openlayers.

You can see it here (zoom bar) (left hand side below of the map).
http://openlayers.org/dev/examples/mobile-jq.html#mappage

How can we hack this problem (i.e. not displaying the icons (e.g. + and -)) to display those symbols.

I think you have to retain, the default behaviours of those JQM controls that you have not ported. In the case, the icon inside the vertical controlgroup.

This problem is also in present in the "layerlist" in Mobile JQuery Openlayer, the icon "check" for the grouplist is not present.

http://openlayers.org/dev/examples/mobile-jq.html#layerspage

The above page /link would have not a "check" icon in iOS inspired style.

Thanks.

Footer icon does not show up, if this example below

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
          <ul>
           <li><a href="#searchpage" id="tabA" data-icon="custom">Search</a></li>          


           <li><a href="#" id="locate" id="tabB" data-icon="custom" >Location</a></li> 



           <li><a href="#layerspage" id="tabB" data-icon="custom"  data-transition="flip">Layers</a></li>
             <li><a href="#database" id="tabC" data-icon="custom" class="ui-btn-active">Spatialite</a></li>             <li><a href="#aboutpage" id="tabC" data-icon="custom" data-transition="flip">About</a></li>          

        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

How do we remedy this 2 ids? One for the event and the other for the icon.

I think it would be good to have a look at this jQuery moble example and see these series of errors and messed ups.

http://openlayers.org/dev/examples/mobile-jq.html#mappage

Another thing, how many icons can be included in tabSprite.png?

And how do you add it? I tried to place another one (i.e. TabD) but it did not work as well.

Any instruction how and what is the format so the icons can be seen and displayed.

Thanks.

Hey, maintainer(s) of taitems/iOS-Inspired-jQuery-Mobile-Theme!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library taitems/iOS-Inspired-jQuery-Mobile-Theme is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "taitems/iOS-Inspired-jQuery-Mobile-Theme",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

With the release of the jQuery Mobile v 1.1.0 today, it appears that some of the styling overrides that previously worked in 1.0.1 are no longer working as intended. In playing around with things briefly I noticed that a second header section on an iPhone (such as a data selector) rendered with the background image being extremely thin and not taking up the whole header section. On an iPad, both the primary and secondary headers had major rendering issues involving the background image height. I'm sure there are a number of little tweaks that will be necessary to get everything to play well with the latest JQM version, so I just wanted to drop an issue in the queue as a heads up. Thanks for all your hard work on this project!

Add disabled blue to "Header Buttons" list.

Example Glyphish images and native jQuery mobile search icons will need to be retina-fied.

I am trying to include, icons in the list. It is undocumented in jQTouch. It works in jQTouch.

It works also here, but BIG List and small icon and not align properly.

It looks like this in your index.html

    <ul data-role="listview" data-inset="true"> 
        <li><a href="#headers">Header Bars</a></li>

        <li><a href="#map"><img src="Images/Maps_iNS.png" class="ico" >Map</a></li> 

        <li><a href="#headerButtons">Header Buttons</a></li> 
        <li><a href="#footerTabs">Footer Tabs</a></li> 
        <li><a href="#formElements">Form Elements</a></li> 
        <li><a href="#listViews">List Views</a></li> 
        <li><a href="#dialogs">Dialogs</a></li> 
        <!--<li><a href="api-pages.html">API documentation</a></li>--> 
    </ul> 

Probably, you can fix it using the jQTouch css or iUIKit css. I think they are the same.

Thanks in advance.

Edi: I guess we can use this syntax

 <li><a href="#map"><img src="Images/Maps_iNS.png" alt="map" class="ui-li-icon">Map</a></li>

However, the alignment in not correct. It is aligned with the text. It must be center align, not top align.

Note: Making the icon smaller help the appearance of the list. It works but not as flash as the regular list icons in Apple iOS list.

When I use the html5 attribute placeholder in a input field it show aligned top and is not very aesthetic, when I fill the input the text show centered, do you how why it happens??

I want iOS-like button styles: on click, change the background color to a colourful gradient and text to white. To let this setting cascade in a right way, the "important" background color must be assigned only to inactive buttons, i.e. on :not(.ui-btn-down-c). Similarly act on .ui-btn-text only when inactive=not down. The code necessary to fix this follows:

Please consider changing button background styles to match only non-active styles:

styles.css:209

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    padding: 0;
    background: #FFF !important;
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    box-shadow: none;
    background-clip: padding-box;
}

... into:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    padding: 0;
    border: 1px solid #bbbbbb;
    border-radius: 10px;
    box-shadow: none;
    background-clip: padding-box;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-btn-down-c):not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    background: #FFF !important;
}

And similarly, for button texts, lines 220:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    font-weight: bold;
    font-size: 17px;
    color: #000;
    text-shadow: none;
}

... into:

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    font-weight: bold;
    font-size: 17px;
    text-shadow: none;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-btn-down-c):not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    color: #000;
}

Then add the following directives to see iOS like click changes:

.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
    /* #015DE6*/
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #015DE6),
        color-stop(1, #058CF5)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #015DE6 0%,
        #058CF5 100%
    );
}

.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
    color: white;
}

Round off and perfect the slider toggle as currently it's square and noticeably off.

Embed "Black Bar" in page like how the "Header Buttons" list works.

The current toggle slider was never quite finished, and now that iOS5 is public we should replace the broken one with the official one.

The selects looks strange - probably highlighted some way, so i applied data-native-menu="false". The select's now look good, but I now get some kind of blue, rounded padding on top when the value list is expanded. The padding is not present with data-native-menu="true"
Example code: http://www.dreier.no/morten/selectexample/

Please, can you fix the Problem since iOS7 and Safari on button with data-rel="back".

the corners of list view with an attribute data inset aren't represented correctly.

Add strong blue to "Header Buttons" list

I created a quick fix to highlight listview links via CSS on tap/hold (more responsive!). This is the code I added to a custom style sheet:

.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text,
.ui-btn.ui-btn-down-c:not(.ui-slider-handle):not(label):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text a,
.ui-page:not(.ui-dialog) .ui-content li.ui-btn.ui-btn-down-c p {
    color: white !important;
    text-shadow: none;
}

Also, it makes the text white & readable, which currently isn't the case (but it is like this on iOS).

Compatibility issue with jQuery Mobile 1.0.1

Beta version just has been release. The theme pack doesn't work properly with JQM 1.3 . Any plans to support it?

please add support of button themes which are not lay on dialog, including it's shadows...

This "Popup" dialog is messed up. The header bar is inside the first record of the table. In order words, the table is not aligning the bottom part of the header. The close icon is also missing in the left hand side of the header.

    <div id="popup" data-role="dialog">
        <div data-position="inline" data-theme="b" data-role="header">
           <h1>Details</h1>
        </div>
        <div data-theme="c" data-role="content">
            <ul id="details-list" data-role="listview">
            </ul>
        </div>
    </div>

You can see this in OpenLayers JQuery Mobile example here:

http://openlayers.org/dev/examples/mobile-jq.html#mappage

Click on the black location icons and you will see this dialog popup windows.

How do I fix this?

This is the windows that is messed up (below) when using iOS-Styled.

http://openlayers.org/dev/examples/mobile-jq.html#mappage&ui-state=dialog

This is the JQM code.

// This is the popup form for the sprinters
$('div#popup').live('pageshow',function(event, ui){
    var li = "";
    for(var attr in selectedFeature.attributes){
        li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>" 
        + selectedFeature.attributes[attr] + "</div></li>";
    }
    $("ul#details-list").empty().append(li).listview("refresh");
});

Something seems to be broken with buttons?

http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/#formElements

navbar in footer is broken with jqm1.2.0-rc.1.

Example code is here:

    <div data-role="footer">
      <div data-role="navbar">
        <ul>
          <li><a href="#" id="page1" data-icon="custom">nav1</a></li>
          <li><a href="#" id="page2" data-icon="custom" class="ui-btn-active">nav2</a></li>
          <li><a href="#" id="page3" data-icon="custom">nav3</a></li>
        </ul>
      </div>
    </div>

Above code is work with jqm 1.1.1.