Đặt chiều cao của hộp chọn nhiều lựa chọn

Question

Tôi đang sử dụng Chọn bằng menu thả xuống chọn nhiều và muốn đặt chiều cao của hộp đã chọn thành kích thước đã đặt.

Tôi có một hộp được chọn trong hộp thoại bị tràn: bị ẩn và hộp được chọn được đặt hoàn toàn bên ngoài vùng chứa (để menu thả xuống được chọn bật ra khỏi hộp thoại chính xác.) Thật không may, "position: absolute;" loại bỏ nó khỏi dòng chảy, và kết quả không có chiều cao ... làm cho hộp thoại co lại và đa lựa chọn xuất hiện để bật ra khỏi nó. Tôi có thể đặt vùng chứa mẹ thành một chiều cao cố định, nhưng đa lựa chọn sẽ mở rộng khi nhiều tùy chọn hơn được chọn và tôi vẫn sẽ gặp sự cố tương tự trên danh sách dài.

Có cách nào để đặt đa lựa chọn đã chọn thành một chiều cao cụ thể không? Cảm ơn!

Answer 1

Nevermind ... figured it out trên của riêng tôi sử dụng CSS:

.mycontainer { 
    height: 120px; 
} 

.mycontainer .chzn-container-multi .chzn-choices { 
    height: 120px !important; 
    overflow-y: auto; 
} 

.mycontainer là div chứa thả xuống chọn.

---

Vui lòng thoát chỉnh sửa câu trả lời. Câu trả lời này phù hợp với phiên bản Lựa chọn đã có sẵn cách đây 2 năm khi tôi hỏi câu hỏi ban đầu. Đối với những người đang sử dụng các phiên bản mới hơn (ví dụ 1.4.2), bạn có thể thử thay đổi tiền tố "chzn" trong CSS ở trên để "chọn" ... nhưng không đảm bảo điều này sẽ hoạt động (tôi chưa xem xét . styling)

Answer 2

tôi đã có thể giải quyết được chiều cao danh sách trong lớp css dưới đây:

.chzn-container .chzn-results { 
height: 150px;} 

và tôi đã nhận cuộn cho phần còn lại trong danh sách.

Answer 3

.chzn-container .chzn-results { max-height: 150px; } 

Answer 4

Tất cả các câu trả lời khác làm việc, nhưng tôi tin rằng đây là giải pháp thanh lịch nhất: Thiết lập chiều cao tối đa mới cho .chzn-results (ví dụ 150px). Tất cả các khối khác có liên quan sẽ theo sau. Bằng cách này, trình đơn thả xuống sẽ không quá lớn với chỉ một vài kết quả.

.chzn-results { 
    max-height: 150px; 
} 

Nếu bạn thực sự muốn có một chiều cao cố định, ngay cả với vài kết quả, chỉ cần sử dụng đoạn mã sau:

.chzn-results { 
    height: 150px; 
} 

(Thêm !important để lót nếu bạn cần thay đổi hành vi chosen.css 's)

Answer 5

Đây là mẹo đã làm cho tôi:

.mycontainer .chosen-choices { 
    max-height: 150px; 
    overflow-y: auto; 
} 

Y về cơ bản bạn muốn giới hạn chiều cao của ul giữ các tùy chọn.