Paginator in IE11 and Primefaces 6.0.4

[mhor]

Using Primefaces 6.0.4 with Omega Theme, Mojarra 2.2.8, Tomcat 7.0.56. In Internet Explorer 11 the paginator buttons of the datatable show a part of the letter, which is in the <span> of the button-link. For example i can see a part of "N"-letter on the button for "next". No problem in Chrome Browser.

[cagatay.civici]

Thanks we'll fix this in next maintenance release.

[mert.sincan]

I couldn't replicate this issue. Can you please try it after removing your custom css Or with 6.0?

[mhor]

Windows 7, Tomcat 7.0.67, using unmodified omega-1.1.1.war with Primefaces 6.0.4:

[mhor]

With Primefaces 6.0: no Problem

[mert.sincan]

Thanks for the screenshot. Fixed for next Omega Layout version; https://github.com/primefaces/layouts/issues/112

[mhor]

When will 1.1.2 be released? Or can you provide the fix here (I assume it is just a CSS Problem)?

[mert.sincan]

Please change the following lines;

in _theme.scss

Code: Select all

// (line 187) please add new .ui-paginator block instead of old .ui-paginator block
.ui-paginator {
    > a {
        box-sizing: border-box;
        height: 23px;
        width: 24px;
        
        span {
            display: none;
        }
        
        &:before {
            position: relative;
            top: 1px;
        }
    }
    
    .ui-paginator-next {
        @include icon-override("\f04b");
    }
    
    .ui-paginator-last  {
        @include icon-override("\f051");
    }
    
    .ui-paginator-prev {
        @include icon-override("\f04b");
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .ui-paginator-first {
        @include icon-override("\f048");
    }
    
    .ui-paginator-pages {
        padding: 0;
        vertical-align: top;
        
        .ui-paginator-page {
            height: 17px;
        }
    }
}

in _icons.scss

Code: Select all

//line 2
@mixin icon-override($icon) {
    background-image: none !important;         /* instead of background: none !important; */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    
    &:before {
        content: $icon;
    }
}