This dashboard doesn't play well with datetime pickers

creativetimofficial / light-bootstrap-dashboard

Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple.

https://www.creative-tim.com/product/light-bootstrap-dashboard

MIT License

1.35k stars 709 forks source link

This dashboard doesn't play well with datetime pickers #16

Open ghost opened 7 years ago

ghost commented 7 years ago

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.

gbertl commented 7 years ago

Try putting the datetimepicker css before the light bootstrap css.

ghost commented 7 years ago

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

No difference.

gbertl commented 7 years ago

Add this code below the light bootstrap css:

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

alexandru-paduraru commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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

Best, Alex

HBurakKaradag commented 7 years ago

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