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.

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.

Hey thats handy i'll give it a go!

.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.

Thanks - will update our hasty hack :)

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

is working on a reply...