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 779 posts 1176 karma points
    Nov 30, 2018 @ 14:59
    martin griffiths
    0

    Fix for ListPicker icons being invisible #191

    Any idea when this will land for nuPickers?

  • Steve Smith 66 posts 146 karma points
    Dec 04, 2018 @ 09:18
    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 66 posts 146 karma points
    Dec 05, 2018 @ 11:58
    Steve Smith
    2

    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 779 posts 1176 karma points
    Dec 05, 2018 @ 14:30
    martin griffiths
    0

    Hey thats handy i'll give it a go!

  • martin griffiths 779 posts 1176 karma points
    Dec 06, 2018 @ 10:49
    martin griffiths
    1
    .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 66 posts 146 karma points
    Dec 06, 2018 @ 15:11
    Steve Smith
    0

    Thanks - will update our hasty hack :)

  • Thomas Haggren 27 posts 127 karma points
    Dec 11, 2018 @ 21:22
    Thomas Haggren
    0

    Great "hack/fix" - Thanks guys :=)

Please Sign in or register to post replies

Write your reply to:

Draft