I have put this all in a sample website at:

http://grouplist.azurewebsites.net

I could not port it to a JSFiddle (the cut/paste styling was completely ignored when I tried, but maybe someone else could try).

Basically I built an IOS style group list in jQuery but my conditional ISO styling does not seem to work:

[data-ios="true"] .groupList-Fake
{
    right: 0; /* no scrollbars in iOS devices */
    width: 100%;
}

The site looks like this on standard web:

enter image description here

but the site looks like this on an iPhone:

enter image description here

The fake header does not fill the full width of the control.

The relevant css is below (generated from .LESS hence a little wordy):

.groupList-Wrapper {
    position: relative;
    height: 300px;
    width: 100%;
    margin: 10px;
    overflow: hidden;
}

.groupList-Wrapper .groupList-Header {
    background: #B8C1C8;
    padding: 2px 0 0 12px;
    color: #FFF;
    font: normal 18px/21px Helvetica, Arial, sans-serif;
    text-shadow: 0 1px #646A6E;
    -moz-text-shadow: 0 1px #646A6E;
    -webkit-text-shadow: 0 1px #646A6E;
    border-bottom: 1px solid #989EA4;
    border-top: 1px solid #717D85;
}

.groupList-Wrapper .groupList-Header.groupList-Fake {
    position: absolute;
    top: 0;
    z-index: 1000;
    width: auto;
    left: 0;
    right: 15px;
}

.groupList-Wrapper .groupList {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    position: relative;
    height: 100%;
}

.groupList-Wrapper .groupList .groupList-Group .groupList-Items {
    margin: 0;
    padding: 0;
    top: 80px;
}

.groupList-Wrapper .groupList .groupList-Group .groupList-Items .groupList-Item {
    font: normal 20px/45px Helvetica, Arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-top: 1px solid #CCC;
    background-color: #f9faf9;
}

[data-ios="true"] .groupList-Fake {
    right: 0;
    /* no scrollbars in iOS devices */
    width: 100%;
}

I based it loosely on the IOSList at https://github.com/brianhadaway/iOSList but that one did not meet my needs (and I wanted touch & momentum scrolling, variable height elements, list and div support etc)

I have tried making the selector more specific, but no luck:

[data-ios="true"] .groupList-Wrapper .groupList-Header.groupList-Fake {
有帮助吗?

解决方案

The cause was so simple, answer points just got thrown away :)

The CSS selector included [data-ios="true"], as that was the styling from the Brian Dadaway control, but the "data-ios" attribute was missing in mine as I wrote it from scratch.

The fix in code was to add

 if (navigator.userAgent.match(/ipad|iphone|ipod/gi))
 {
     THIS.$wrapper.addClass("ios");
 }

and change the css to:

.groupList-Wrapper.ios .groupList-Header.groupList-Fake
{
    right: 0; /* no scrollbars in iOS devices */
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top