Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • martin griffiths 763 posts 1148 karma points
    1 week ago
    martin griffiths
    0

    Fix for ListPicker icons being invisible #191

    Any idea when this will land for nuPickers?

  • Steve Smith 57 posts 132 karma points
    7 days ago
    Steve Smith
    0

    Good morning,

    I was just coming here to ask about something similar.

    We have been using NuPickers on a project - and locally in our development environment, the back office UI seems to work fine.

    However, when we deploy the build to the production Azure app, the button styling is not right (even though the functionality works).

    Is this similar to the issue you're having?

    edit: just investigated this and it seems we still had the umbraco.css file for 7.11 in our dev environment - so our problem is the same as yours - we would also really appreciate the NuGet package for NuPickers to be updated to support the CSS changes made in Umbraco 7.12 :-)

    Steve.

  • Steve Smith 57 posts 132 karma points
    6 days ago
    Steve Smith
    1

    In the meantime, we found a temporary way of fixing the problem.

    In the app_plugins folder, create a new sub-folder called nupickerfix

    Inside that folder, create a CSS file called nupickerfix.css, with this CSS:

    .list-picker .button 
    { 
        margin:0; padding:0; 
    } 
    
    .list-picker .blue { 
        color:#2196f3  !important; 
    } 
    
    .list-picker .red { 
        color:#f44336  !important; 
    } 
    
    .list-picker [class*=" icon-"]:before, [class^=icon-]:before 
    { 
        text-decoration:none; 
    }
    

    In the same folder, create a file called package.manifest with this content:

    { 
        css: [ 
            "~/App_Plugins/nupickerfix/nupickerfix.css" 
        ] 
    } 
    

    This reverses the CSS changes that Umbraco made in 7.12, but only within the context of the class .list-picker

    We'll remove it when nuPickers gets updated.

  • martin griffiths 763 posts 1148 karma points
    6 days ago
    martin griffiths
    0

    Hey thats handy i'll give it a go!

  • martin griffiths 763 posts 1148 karma points
    5 days ago
    martin griffiths
    0
    .list-picker .button {
        margin: 0;
        padding: 0;
    }    
    .list-picker .blue {
        color: #2196f3 !important;
    }   
    .list-picker .red {
        color: #f44336 !important;
    } 
    .list-picker [class*=" icon-"]:before, .list-picker [class^=icon-]:before {
        text-decoration: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    

    A small fix added as one of the .list-picker classes was missing from the code which causes the tree to break!

    Also added a little extra gloss to ensure the icons appear vertically and horizontally centred.

  • Steve Smith 57 posts 132 karma points
    5 days ago
    Steve Smith
    0

    Thanks - will update our hasty hack :)

Please Sign in or register to post replies

Write your reply to:

Draft