Buttons on bootstrap timepicker is not showing


Tags: javascript,css,twitter-bootstrap,timepicker

Problem :

I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.

enter image description here

Here's how I render it.

<input type="text" class="form-control timepicker appt_time" style="width:200px;">

<script>
$('.timepicker').timepicker();
</script>

Here's how I set them in my header

<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">

<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>

I got the css files and the js files for the timepicker Here.

Any ideas what's causing this? Thanks!



Solution :

You have got css and js files but you've missed to capture the glyphicons.

The glyphicons are responsible for showing the buttons on the timepicker.

If you can inspect your developer tools on your buttons you can see that the images seems to be missing.

Here is what i've found on the site that you have picked timepicker

enter image description here

Include the glyphicons png file on your site to get the images work perfect.

Hope this helps


    CSS Howto..

    How do I put an image on top of an image without using absolute positioning?

    How to make footer responsive through CSS?

    How to make a CSS bar go from right to left?

    how to gap a list in half

    How to apply advanced styling for all portlets of one kind

    How to do CSS wild card search? [duplicate]

    How to avoid line breaks inside `->` operator in `` blocks?

    How to apply CSS page-break to print a table with lots of rows?

    how to add css for div tag

    How to set a timer for CSS animation-timing-function?

    How to colorize an image in CSS?

    How to make heading appear in different colors

    Some doubts about how make an image clickable using CSS

    xHTML/CSS: How to make inner div get 100% width minus another div width

    How to to select the last class or last of type in css

    How to float element next to line?

    How to transform a production to LL(1) for a list separated by a semicolon?

    How to set CSS attributes to default values for a specific element (or prevent inheritance)

    How to select the las Li with Xpath or Css Selector

    How do I remove the last border on my nav bar?

    How to make a pure css based dropdown menu?

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How to use SVG fragment identifier for CSS background image on iOS?

    How can I make jQuery's draggable function expand the container?

    How To Do A Webkit Slide Cover Page Transition

    How to make css smaller?

    how do I float a div over a background image in a different div

    BackboneJS + HandlebarsJS - how to add image based on css

    How to display a div over other content and in the center of webpage using CSS?

    How to embed css to HTML in laravel?