light-bootstrap-dashboard This dashboard doesn't play well with datetime pickers

I have been trying to put this library: https://github.com/Eonasdan/bootstrap-datetimepicker

In a website which uses light bootstrap dashboard, but they simply wont work with each other. What happens is the datetimepicker doesn't show up at all.

When I remove the CSS of light bootstrap dashboard, the datetime picker starts working fine again.

I was having the same problem with this datetime picker too: https://github.com/smalot/bootstrap-datetimepicker

So I'd say that this theme wont play along nicely with other libraries...

Reproduced error on this fiddle using the first library linked: http://jsfiddle.net/La8z2b8s/9/ To see it work, simply remove the light-bootstrap-dashboard.css from the resources list and the calendar will be shown.

To trigger the calendar, you need to click on the tiny calendar icon on the right of the input.

screenshot

Help would be appreciated.

Feb 14 '17 18:02 ghost

Try putting the datetimepicker css before the light bootstrap css.

Feb 18 '17 15:02 gbertl

Did it here: http://jsfiddle.net/La8z2b8s/10/

No difference.

Feb 19 '17 11:02 ghost

Add this code below the light bootstrap css:

.dropdown-menu {
          opacity: 1;
          filter: alpha(opacity=100);
          visibility: visible;
}

Feb 20 '17 12:02 gbertl

@jdeen93 and @gilbertlacas thank you for using our product and sorry for the late response. It seems there is a bug on our dropdown because we added an animation on it. So, to fix that please go inside assets/css/light-bootstrap-dashboard.css to line: 1447 and replace the .dropdown-menu with .dropdown .dropdown-menu and then the problem will be fixed.

Please let us know if that is working fine.

Best, Alex

Feb 20 '17 13:02 alexandru-paduraru

@alexandru-paduraru Now the dropdown menu wont open up from the top navbar. The class open gets added on click, but it doesn't show up.

Mar 21 '17 20:03 ghost

@jdeen93 can you please send a link to your web app? Just did that on my local product and it is working fine:

Best, Alex

Mar 29 '17 09:03 alexandru-paduraru

Same issue, please help! I tried to remove all occurrencies of dropdown-menu from lbd css since i don't use them but it doesn't make any difference. The only way I managed to make calendar visible is by removing the whole light-bootstrap-dashboard.css.

May 11 '17 14:05 dariodipalma

@dariodipalma did you made the change that I wrote here: https://github.com/creativetimofficial/light-bootstrap-dashboard/issues/16#issuecomment-281076200 ?

Best, Alex

May 11 '17 20:05 alexandru-paduraru

I resolved problem.. my solutions ;

I change addClass parameter on bootstrap-datetimepicker.min.js file.

I replaced bootstrap-datetimepicker-widget dropdown-menu to bootstrap-datetimepicker-widget dropdown-menu custom-datetimepicker

function(){var b=a("<div>").addClass("bootstrap-datetimepicker-widget dropdown-menu custom-datetimepicker");

light-bootstrap-dashboard.css

.bootstrap-datetimepicker-widget.dropdown-menu.custom-datetimepicker {
   opacity: 1 !important;
    filter: alpha(opacity=100);
    visibility: visible;
    margin-top: 5px;    
}