This dashboard doesn't play well with datetime pickers

[ghost]

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.

Help would be appreciated.

[gbertl]

Try putting the datetimepicker css before the light bootstrap css.

[ghost]

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

No difference.

[gbertl]

Add this code below the light bootstrap css:

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

[alexandru-paduraru]

@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

[ghost]

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

[alexandru-paduraru]

@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

[dariodipalma]

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.

[alexandru-paduraru]

@dariodipalma did you made the change that I wrote here: #16 (comment) ?

Best,
Alex

[HBurakKaradag]

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;    
}

[morbak]

@alexandru-paduraru, your solution work fine for me, thx.

[squido75]

@alexandru-paduraru your solution works for me! altho for me it's at line 2061 now... :)

[benjieperez]

The solution of @HBurakKaradag works for me

[truskul]

@HBurakKaradag, your solution works fine, thanks a lot!

[ghost]

@alexandru-paduraru, the solution which you gave is not working ...

[uzkurama]

@alexandru-paduraru many thx, works for me!