Hi Marc-Olivier and welcome to our :)

What does your package.manifest configuration look like? You should reference your CSS in there.

I think you should use the assetService to load the javascript and css for Angular UI Bootstrap rather than then app.requires stuff I think - You can learn more here http://umbraco.github.io/Belle/#/api/umbraco.services.assetsService

/Jan

Hi Jan Skovgaard,

My package.manifest look like this:

    {
    javascript: [
        '~/App_Plugins/AdminSection/PluginDependencies.js',
        '~/App_Plugins/AdminSection/backoffice/AdminSectionTree/CustomSectionEditController.js',
        '~/App_Plugins/AdminSection/backoffice/AdminSectionTree/ReservationsController.js',
        '~/App_Plugins/AdminSection/Resources/reservation.resource.js',
        '~/App_Plugins/AdminSection/Resources/CalendarEvent.resource.js',
        '~/App_Plugins/AdminSection/Resources/Lodging.resource.js',
        '~/Scripts/fullcalendar/lib/moment.min.js',
        '~/Scripts/fullcalendar/fullcalendar.min.js',
        '~/Scripts/fullcalendar/lang/fr-ca.js',
        '~/Scripts/fullcalendar/calendar.js',
        '~/App_Plugins/AdminSection/Angular/ui-bootstrap.min.js'
    ],

    css: [
        '~/Scripts/fullcalendar/fullcalendar.css',
        '~/App_Plugins/AdminSection/Angular/bootstrap.min.css'
        ]
}

As you can see, i already used another Angular module (fullcalendar) and it works great.

The ui bootstrap work but if i do not add the bootstrap css, the calendar look like this:

When i include the bootstrap css, the calendar style works (exept for the arrow), but it breaks all the css of umbraco.

I already try to use assetService but the result is the same.

For the app.requires stuff, i use it to tell umbraco that i want to add this module to it. I follow the instruction in this issue: http://issues.umbraco.org/issue/U4-2769

Thanks for the help

Hi Marc-Oliver

Ok, so the CSS you include - Does it contain much more selectors than those you need specifically for your calendar? If so then you should of course remove those rules and selector. Those selectors that are left should probably be made more specific so they only target the HTML in your property editor - So if you have wrapped it in a div with an id of #full-calendar then you can use this to make the selectors only target the elements and classes in that particular div.

Hope this makes sense.

/Jan

Hi Jan,

The Css I include is the standard bootstrap Css ( http://getbootstrap.com/css/ ). It is needed for the ui bootstrap angular module to work.

I don't want to edit this css to make it work in umbraco as i do not know what selector are use for what ui component.

I was just wondering if there is a trick to include bootstrap in Umbraco without breaking the umbraco style.

Thanks.

Hi Marc, How are you referencing the date picker in your html? I'm trying to do a similar thing, but cannot get the date picker to appear.

The umbraco back office already uses bootstrap,. but it's version 2. something (it's outdated).

As such you can't referrence Bootstrap 3.0+ in your package manifest, this will causes Bootstrap 2 and 3 to bash together and version 3 has breaking changes with version 2 (in short, adding version 3 on top of version 2 breaks both).

When adding things for the backoffice that rely on bootstrap you need to use things that work with bootstrap 2.0..

You can tell what umbraco uses in the back office by looking in the umbraco -> lib

In there you see umbraco's back office already uses angular and angular-bootstrap (old versions) and bootstrap.

Angular is : ver 1.1.5 Angular bootstrap is: ver 0.10.0 Bootstrap is: ver 2.3.1

Because of this, when I design sites I generally try to reserve the back office for savy tech's developers.

Then I build a front end experience for users to change things, like editing a date with a fancy calendar.

On the front end you can use anything you want, no risk of version conflicts.

is working on a reply...