Распределитель даты jQuery растянут (неправильное расположение) - PullRequest
Новая
       2

Распределитель даты jQuery растянут (неправильное расположение)

0 голосов
/ 19 октября 2011

enter image description here

По какой-то причине мой указатель даты jQuery выглядит так, как показано выше ... Не могу понять, как это исправить.

Код (сокращенный): 

//References

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

//Datepicker code

<div id="datepicker" name="datepicker"></div>
<script>
    $(document).ready(function() {
        $("#datepicker").datepicker({
            altField: "#realdate",
            altFormat:"yy-mm-dd",
            dateFormat: "yy-mm-dd"
        });
    });
</script>

//Hidden field to store my date

<input type="hidden" name="realdate" value="" id="realdate">

Размещение div под сценарием не работает.Что работает, однако, это следующее: 

<input type='text' id='datepicker' name='datepicker' />

Это отображает поле ввода, при щелчке на котором отображается правильно отрисованный указатель даты.Но я не хочу, чтобы поле ввода, я просто хочу DatePicker ...

РЕДАКТИРОВАТЬ

Хорошо, кажется, янашел злодея: 

.ui-helper-clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

из jquery css.Моя проблема устранена путем удаления "display: block;"Проблема в том, что этот файл CSS находится в сети.Я не могу перевести его в автономный режим в своей собственной папке css, потому что он ссылается на кучу изображений и т. Д. Есть ли способ переопределить этот класс или что-то еще, чтобы заставить работать мое исправление?

1 Ответ

2 голосов
/ 20 октября 2011

Дублируйте определение стиля в вашей собственной таблице стилей с более сильным селектором, переопределяя оскорбительный стиль: 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<style type="text/css">
    .ui-helper-clearfix::after {
        display: inline;  /* or whatever it should be */
    }
</style>

Достаточно иметь определение стиля позже в документе, чтобы сделать селектор сильнее. Но вы можете избежать опасностей, также усилив селектор, добавив имя элемента: div.ui-helper-clearfix::after. (предполагая, что элемент является div ... я не знаю, что это на самом деле.)

...