Materialize integration?

[brylie]

We are trying to implement material design in conjunction with Meteor Admin. Our designer is having a lot of struggles making the two projects work together. What are some recommendations as to how we can proceed, if we wish to implement a material design framework with Meteor Admin?

[mpowaga]

Is materialize breaking admin lte style or other way around? Admin styles are loaded lazily on admin pages so they shouldn't clash with other parts of the app.

[brylie]

Thanks for the response. I have pinged our designer, so he can hopefully clarify the difficulties.

[lyricalpolymath]

+1 same problem here @mpowaga It's admin's bootstrap that is braking the materialize main website. For some reasons it is "leaking" into the main app. at least this is what I'm assuming since you say that is should be lazy loaded only in the admin

I've had to force the update of the packages to use the latest version now using yogiben:admin 1.2.2 aldeed:autoform 5.4.1 // had to force this to load the latest yogiben

before I was stuck with yogiben:admin 1.1.2* aldeed:autoform 4.2.2*

can you point us in the direction where to check the laizy load? any idea why this might be happening? I've tryed to meteor remove twbs:bootstrap but it doesn´t work: I get the warning twbs:bootstrap is not in this project.

I've also tried to hook into Iron router and create a plugin to load bootstrap only when openin /admin, but I'm not succeding ... I'm not sure it is actually possible.

the only solution I can come up with is to create another app for the admin that connects to another app / mongo db via ddp.

[lyricalpolymath]

I've downgraded progressively and found that this issue appears starting from yogiben:admin@=1.2.1 maybe inside the 2 packages that have been added after that mfactory:admin-lte twbs:bootstrap

now with yogiben:admin 1.2.0 the website's css is right, but the admin's layout is broken. What is broken seems to be some minor layout issues and, the most annoying of all, missing glyphicon glyphicon-plus(it displays the blue button but not the icon

temporary solution (horrible hack)

1. force the version of yogiben to the last working one `meteor add yogiben:admin@=1.2.0``
2. download the latest bootstrap.css and put in your /public/css folder https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.min.css
3. launch meteor and head to the /admin page
4. inject the css in the admin through this Router hook

Router.onAfterAction(function(){
    var routeName = Router.current().route.getName();
    if ( routeName.indexOf("adminDashboard") == 0 ) {
        $("head #injectedBootstrap").remove(); //removes duplicates
        $("head").append($("<link rel='stylesheet' id='injectedBootstrap' href='/css/bootstrap.min.css' type='text/css' media='screen' />"));
    }
}

this should solve the admin layout problems. Warning: if you are on IE you should, either change browser ;) or use

document.createStyleSheet('/css/bootstrap.min.css');

any ideas on your side?

[sachinkrishna]

@lyricalpolymath this seems to be the only possible fix.

[lucasdavid]

+1 for solving this problem. Admin styles ARE leaking to the rest of the app.

[jmares93]

when I try: meteor add yogiben:admin@=1.2.0 I I get: error: Conflict: Constraint [email protected] is not satisfied by less 2.6.0. Constraints on package "less":

• less@=2.6.0 <- top level
• [email protected] <- yogiben:admin 1.2.0

Anyone else seeing this?