[jquery-ui] jQuery DatePicker 컨트롤의 크기를 조정하는 방법

Program / 글쓴이

jQuery DatePicker 컨트롤을 처음 사용하고 있습니다. 내 양식에서 작동하지만 jQuery UI 페이지의 데모보다 약 2 배, 데모의 약 1.5 배입니다. 크기를 제어하기 위해 누락 된 간단한 설정이 있습니까?

편집 : 단서를 찾았지만 새로운 문제가 발생합니다. CSS 파일에서 구성 요소는 부모 요소의 글꼴 크기에 따라 크기가 조정됩니다. 그들은 설정을 권장합니다

body {font-size: 62.5%;}

1em = 10px로 만듭니다. 이렇게하면 멋진 크기의 날짜 선택기가 제공되지만 분명히 내 사이트의 나머지 부분을 엉망으로 만듭니다 (현재 글꼴 크기는 .9em입니다).

텍스트 상자 주위에 DIV를 던지고 글꼴 크기를 설정하려고 시도했지만 무시하는 것 같습니다. 따라서 부모의 글꼴을 변경하여 datepicker를 줄이는 방법이 있어야하지만 나머지 사이트를 망칠 필요없이 어떻게해야합니까?

답변

jquery-ui css 파일에서 변경할 필요가 없습니다 (기본 파일을 변경하면 혼란 스러울 수 있음). 추가하면 충분합니다.

div.ui-datepicker{
 font-size:10px;
}

UI 파일 다음에로드 된 스타일 시트

선언에서 ui-datepicker 다음에 ui-widget이 언급 된 경우 div.ui-datepicker가 필요합니다.

답변

의견을 추가 할 수 없으므로 Keijro가 수락 한 답변과 관련이 있습니다. 실제로 대신 스타일 시트에 다음을 추가했습니다.

    div.ui-datepicker {
    font-size: 62.5%;
}

그리고 그것은 효과가 있었다. 이것은 10px의 절대 값보다 선호 될 수 있습니다.

답변

일부 신체가 다음과 같은 방법으로 제안했는지 확실하지 않은 경우, 내 의견을 무시하십시오. 나는 이것을 오늘 시험했고 그것은 나를 위해 일한다. 컨트롤이 표시되기 전에 글꼴 크기를 조정하면됩니다.

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){
           $(".ui-datepicker").css('font-size', 12)
    }
});

beforeShow 콜백 함수 사용

답변

ui.theme.css에서 다음 줄을 변경합니다.

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

에:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }

답변

더하다

div.ui-datepicker, .ui-datepicker td{
 font-size:10px;
}

UI 파일 다음에로드 된 스타일 시트에서. 날짜 항목의 크기도 조정됩니다.

답변

나를 위해, 이것은 가장 쉬운 해결책이었다 : 나는 추가 font-size:62.5%;처음에.ui-datepicker .jquery 사용자 정의 CSS 파일 태그에 .

전에:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}

후:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

답변

나는 성공하지 않고이 예제를 시도하고있었습니다. 페이지의 다른 스타일 시트는 다른 태그의 기본 글꼴 크기를 설정 한 것 같습니다. ui-datepicker를 조정하면 div가 변경됩니다. div를 변경하면 해당 div의 내용이 해당 크기를 상속하는지 확인해야합니다. 이것이 마침내 나를 위해 일한 것입니다.

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

행운을 빕니다!