Bộ chọn ngày jQuery lớn hơn trang xem trước

Question

Tôi đang thử nghiệm công cụ lịch jQuery, nhưng nó là appears to be too big, lớn hơn preview page.

Bất kỳ ý tưởng nào?

Cảm ơn!

Answer 1

Tôi đã gặp phải vấn đề tương tự. Tôi đã phải thay đổi kích thước phông chữ trong CSS tùy chỉnh thành một cái gì đó khác hơn 1.25em. Tôi tin rằng tôi đã sử dụng nhỏ vì đó là những gì tôi đã sử dụng ở nơi khác trong ứng dụng của mình.

Trong khi duyệt trang trong FireFox, tôi có thể kiểm tra toàn bộ điều khiển lịch trong FireBug và thay đổi cỡ chữ thành vừa (tôi nghĩ, có thể nhỏ) và nó được hiển thị hoàn hảo tại điểm đó. Chỉ cần đi vào giao diện người dùng CSS và vĩnh viễn thay đổi nó và không có khiếu nại kể từ đó.

Check-out my post here ...

Answer 2

Bạn có bất kỳ CSS cụ thể nào điều chỉnh kích thước phông chữ không? Điều đó sẽ điều chỉnh bất kỳ kích thước phông chữ jQuery nào.

Answer 3

Rất có khả năng biểu định kiểu đang kiểm soát việc này. Nhìn vào nguồn của trang web, nó là this one hoặc this one.

Như bạn có thể thấy, chúng khá xấu xí, nhưng bạn có thể chạy nó thông qua trình tạo hình như this one.

Hoặc bạn chỉ cần tải xuống phiên bản giao diện người dùng JQuery có chủ đề nhẹ nhàng trong đó. Tôi đoán là nó có kích thước chính xác trong nó rồi.

Answer 4

Kiểm tra kỹ xem bạn có đang sử dụng cùng một chủ đề jQueryUI mà trang demo đang sử dụng hay không. Tôi đã thấy vấn đề chính xác này do có chủ đề sai được tải trên trang web của tôi.

Answer 5

Bạn có thể sử dụng Firebug's Inspect feature để chọn một trong các giá trị và bạn sẽ thấy bảng định kiểu nào đặt kích thước phông chữ. Sau đó, bạn có thể thay đổi nó để phù hợp với nhu cầu của bạn.

Answer 6

này có một cái gì đó để làm với phong cách css jquery đang sử dụng (Điều này được buộc vào với câu trả lời của những người khác về css), đặc biệt là font-size là trong em so để px - Tôi nghĩ rằng nó đang cố gắng để kế thừa phong cách từ trang chính nó, hoặc một cái gì đó như thế.

Đối với tôi, giải pháp là thay đổi font-size css lớp của ui-widget để 11px, kết quả là lớp css sau:

.ui-widget { 
-x-system-font:none; 
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif; 
**font-size:11px;** 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:normal; 
line-height:normal; 
} 

Answer 7

Trong tập tin css thay đổi font-size ví dụtập tin css của tôi xảy ra là

/css/smoothness/jquery-ui-1.8.1.custom.css 

và tôi đã thay đổi

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

để

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 0.7em; 
} 

Answer 8

Hoặc chỉ cần thêm dòng css này:

#ui-datepicker-div { 
    font-size:12px !important; 
} 

Answer 9

Chỉ cần thêm trong css của bạn dòng:

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

như thế này:

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

Answer 10

Tôi chạy vào một vấn đề tương tự. Tôi đã giải quyết nó bằng cách kiểm tra các phần tử sử dụng công cụ phát triển của chrome và nhận ra rằng phần tử div chứa datepicker (tức là div có id ui-datepicker-div) đã được thêm vào phần tử body. Div datepicker có thuộc tính css font-size css được đặt thành 1.1em (từ lớp ui-widget trong tệp css cơ sở từ jQuery UI). Vì tôi chưa đặt kích thước phông chữ trên thành phần body (tức là phần tử chứa trình giữ ngày tháng), mặc định nó sẽ sử dụng 16px theo this blog. Đặt rõ ràng font-size trên phần tử nội dung đã giải quyết vấn đề cho tôi.