2017-01-10 8 views
0

私はTrent Richardsonのタイムピッカーを使用しています。 (http://services.xample.ch:8080/static/js/trentrichardson-jQuery-Timepicker-Addon/タイムピッカーの幅を設定する

以下

私のコードです:
画像の下に

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="js/jquery-ui-timepicker-addon.css"> 
    <link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css"> 
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-slider-access-addon.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider_example_2').timepicker({ 
     timeFormat: 'HH:mm:ss', 
    }); 
    }); 
    </script> 
    <style> 
    #slider_example_2 
    { 
    width: 150px; 
    } 

    .ui-widget-header 
    { 
    width: 220px; 
    font-size: 12px; 
    color: #102132; 
    background: #D7E5F2; 
    } 

    .ui-timepicker-div dl 
    { 
    width: 230px; 
    font-size: 11.5px; 
    font-weight: bold; 
    } 
    </style> 
</head> 

<body> 
    <input type="text" name="time" id="slider_example_2" value="00:00:00"/> 
</body> 
</html> 

は私出力されます:

enter image description here

すべては、以下の(赤い長方形で述べたように)を除き、私にとっては結構です enter image description here

タイムピッカーの幅を制御するにはどうすればよいですか?
は、私は以下のように試してみました:

(1) 
-ui-widget 
{ 
    width: 200px; 
} 

(2) 
-ui.timepicker 
{ 
    width: 200px; 
} 

しかし、私はtimepickerの幅を小さくすることはできません。
誰かが私を助けることができますか?

+0

あなたのスクリプトを参照する前に、あなたのスタイルを定義する必要があり、あなたのスクリプトを置くのに適した場所は、ちょうど身体終了タグの前にあります –

答えて

0

私はあなたのコードをコピーしましたが、私はあなたの質問に記載された出力を得ることができません。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
    $('#slider_example_2').timepicker({ 
 
     timeFormat: 'HH:mm:ss', 
 
    }); 
 
    }); 
 
    </script> 
 
    <style> 
 
    #slider_example_2 
 
    { 
 
    width: 150px; 
 
    } 
 

 
    .ui-widget-header 
 
    { 
 
    width: 220px; 
 
    font-size: 12px; 
 
    color: #102132; 
 
    background: #D7E5F2; 
 
    } 
 

 
    .ui-timepicker-div dl 
 
    { 
 
    width: 230px; 
 
    font-size: 11.5px; 
 
    font-weight: bold; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <input type="text" name="time" id="slider_example_2" value="00:00:00"/> 
 
</body> 
 
</html>

関連する問題