CODEWITHSUNDEEP
jquerycsstwitter-bootstraptwitter-bootstrap-3adminlte
Zarzamora
Zarzamora

Reputation: 45

Bootstrap colorpicker doesn't work

Bootstrap colorpicker doesn't work. This is my code

 <div class="form-group"style="margin-top:-10px">
   <label style=" height:20px !important ;font-size: 12px;" class="col-sm-4 
    control-label">Kurye Durum Renk</label>
   <div class="col-sm-7">
      <input id="ColorPickerKuryeDurumRenk" type="text" class="form-control">
   </div>
 </div>


<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">
<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

<script>

    $(document).ready(function(){

        $("#ColorPickerKuryeDurumRenk").colorpicker();
    });

</script>

When i runned the code like this, I didn't get any error but the colorpicker doesn't work . Where is my fail ?

Upvotes: 1

Views: 4358

Answers (2)

Dinesh K
Dinesh K

Reputation: 651

<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">

To import a stylesheet you need to use href="PATH_OF_FILE"

Upvotes: 2

Dalin Huang
Dalin Huang

Reputation: 11342

Pretty sure it is your lib path wrong or reference not correct.

try to use the following, if it is working then you can debug by removing them one by one (and use your local reference instead)

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

<div class="form-group"style="margin-top:-10px">
   <label style=" height:20px !important ;font-size: 12px;" class="col-sm-4 
    control-label">Kurye Durum Renk</label>
   <div class="col-sm-7">
      <input id="ColorPickerKuryeDurumRenk" type="text" class="form-control">
   </div>
 </div>


<link rel="stylesheet" src="plugins/colorpicker/bootstrap-colorpicker.min.css">
<script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

<script>
    $(document).ready(function(){
        $("#ColorPickerKuryeDurumRenk").colorpicker();
    });
</script>

Upvotes: 1

Related Questions