Как установить размер и положение jQuery.

Я использую jquery date picker. Значок триггера значка календаря рядом с текстовым полем по умолчанию находится сверху. Я хочу установить размер изображения (высота) так же, как высота текстового поля, пожалуйста, дайте мне несколько предложений мой код

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};

Ответ 1

Проверяя элемент firebug, я получил следующее:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

Затем вы можете работать с этим классом CSS ui-datepicker-trigger.

Ответ 2

Добавить пользовательский CSS на своей странице

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>

Ответ 3

Вы можете редактировать класс .ui-datepicker-trigger с помощью jQuery, но важно сделать редактирование после функции datepicker.

Пример:

$(#textbox1).datepicker({
        showOn: "button",
        buttonImage: "calendar_1.png",
        buttonImageOnly: true )};

$(".ui-datepicker-trigger").css("margin-bottom","-6px");

Ответ 4

Ничего из этого не сработало для меня. Похоже, что jQuery устанавливает свойство высоты кнопки изображения при выходе из функции готовности. Поэтому, если вы попытаетесь установить свойство height в готовой функции, оно будет перезаписано до 26px. Поэтому я создал отдельную функцию для запуска в событии onload тега body. Он обновляет свойство высоты кнопки так, чтобы я хотел:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

Я сделал еще немного работы над этим, и я обнаружил, что в приведенном выше коде есть ошибка. Это приводит к сбою события клика, и календарь не отображается при нажатии на изображение. Я не знаю почему, но я нашел лучший способ, который работает. Метод выше был неуклюжим (ленивым?) Способом изменения стиля. Правильный способ таков:

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }

Ответ 5

Если вы используете свое собственное персонализированное изображение для значка календаря, вы можете просто сделать изображение требуемого размера. Для моего случая высота входного окна была 24px, а размер значка был 16X16. Я только что отредактировал размер изображения и сделал его 24X24, и проблема была решена.

Ответ 6

Применить этот CSS:

.ui-datepicker-trigger {
   position: absolute;
}