PrimeFaces AutoComplete thay đổi kích thước mặc định

Question

Tôi đang cố gắng thay đổi kích thước của autoComplete (thủ tục 3.3), tôi đã thử tất cả các tùy chọn bên dưới nhưng kích thước vẫn giữ nguyên.

size="600" 
Style="width:600px;" 
StyleClass > css file with width:600px; 

nhưng không ai trong số chúng tăng kích thước, vì vậy, tôi làm như thế nào.

Lưu ý: Tôi nhận thấy rằng nếu tôi chỉ định (chiều rộng> Kích thước PanelGrid) thì kích thước lưới bảng điều khiển sẽ tự động thay đổi nhưng tự động hoàn thành vẫn ở kích thước mặc định.

Cập nhật: đang AutoComplete của tôi

<p:autoComplete id="autoTest" value="#{testMB.selectedTest}" 
completeMethod="#{testMB.completeTest}" var="test" 
itemLabel="#{test.name}" itemValue="#{test}" converter="#{testConverter}" 
forceSelection="TRUE" queryDelay="1000" multiple="TRUE" size="600" 
process="@this"> 

Answer 1

tôi đã làm nó bằng cách sử dụng dưới đây css

.ui-autocomp .ui-inputfield { 
clear: left; 
cursor: text; 
list-style-type: none; 
margin: 0; 
min-height: 1px; 
overflow: hidden; 
width: 250px; 
} 

Chỉ cần chắc chắn rằng lựa chọn doesn' t vượt quá 250px, nếu không biểu tượng đóng + văn bản bổ sung sẽ không hiển thị.

Lưu ý:. Tôi đã nhận này từ primeface tập tin css

Answer 2

Nó chỉ là cần phải thay đổi của size;

 size="30" 

    <p:autoComplete id="yourId" value="#{YourBean.value}" completeMethod="#{YurBean.complete}" size="30"/> 

Answer 3

cách đơn giản nhất tôi biết là thế này: thêm một thẻ phong cách vào trang của bạn đặt lớp này trong nó: .ui-inputfield với thuộc tính này: width: 600px;

nhưng hãy cẩn thận bởi điều này, bạn sẽ thay đổi tất cả các đầu vào mà trong trang của bạn :)

Answer 4

Để thay đổi kích thước của AutoComplete, bạn cần phải ghi đè styleClass mặc định primefaces cho AutoComplete. Sử dụng firebug bạn có thể tìm ra tên styleclass chính xác. Nếu bạn kiểm tra phần tử AutoComplete bằng cách sử dụng firebug., Bạn có thể ghi đè lên bút styleclass như .ui-autocomplete-input.ui-inputfield { width : 50px !important;
}

! Điều quan trọng cần lưu ý ở đây là nhấn mạnh để ưu tiên cao.

Answer 5

Tôi đã thay đổi kích thước mặc định cho Tự động hoàn thành trong Primefaces 5.2 bằng cách sử dụng thuộc tính inputStyle.

Ví dụ:

inputStyle="width: 100px" 

Answer 6

sử dụng như thế này:

<p:autoComplete 
    ... 
    style = "width: 100%" 
    inputStyle = "width: 100%" /> 

chỉ cần thay đổi 100% đối với các kích thước bạn cần bằng pixel ..

Answer 7

Trên tất cả các giải pháp không hoạt động nếu chúng tôi sử dụng [multiple]="true" chỉ thị. Ngoài ra câu hỏi này cũng được hỏi trong các diễn đàn chính và không có giải pháp.

Nếu bạn không sử dụng ở trên [multiple]="true" chỉ thị Các giải pháp dưới đây sẽ hoạt động.

• [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"

• class="p-autocomplete" và trong hồ sơ phong cách bạn có thể định nghĩa lớp này như .p-autocomplete{ width: 100%; }

Vui lòng kiểm tra tất cả trong số họ.

Answer 8

Điều này làm việc để tôi thay đổi chiều rộng của p: autoComplete với [multiple] = "true".

Trước tiên, hãy kiểm tra mã html và css được tạo bởi Primefaces bằng trình duyệt của bạn và tìm kiểu p: autoComplete. Trong trường hợp của tôi, sử dụng Primefaces 6.1, phong cách được định nghĩa như thế này:

.ui-autocomplete-multiple-container.ui-inputfield {...

Sau đó, sử dụng các id của AutoComplete trong hồ sơ phong cách của bạn theo cách này:

#myAutoCompleteId .ui-autocomplete-multiple-container.ui-inputfield { width: 330px !important; }

này cách bạn có thể nhận được một chiều rộng khác nhau cho mỗi autoComplete.