Làm thế nào để tăng chiều cao tế bào của celltable GWT: Vấn đề với IE?

Question

Làm thế nào để tăng chiều cao tế bào của celltable GWT?

Trong mozilla chiều cao tế bào firefox thích hợp (theo nội dung) nhưng trong trường hợp của Internet explorer một số phần của nội dung không hiển thị đúng

thấy hình ảnh

Celltable.css của tôi là như sau:

@def selectionBorderWidth 0px; 
.cellTableWidget { 
    border: 1px solid red; 
} 

.cellTableFirstColumn { 

} 

.cellTableLastColumn { 

} 

.cellTableFooter { 
    text-align: left; 
    color: #4b4a4a; 
    overflow: hidden; 
} 

.cellTableHeader { /** COLUMN HEADR TEXT */ 
    text-align: left; 
    color: #4b4a4a; 
    overflow: hidden; 
    background-color: #E1E1E1; 
    font-family: arial, Helvetica, sans-serif; 
    font-size: 8pt; 
    font-weight: bold; 
    padding-left: 10px; 
    height: 20px; 
    border-bottom: #e6e6e6 1px solid; 
    border-left: #a6a6af 0.5px solid; 
    border-right: #e6e6e6 1px solid; 
    border-top: #a6a6af 0.5px solid; 
} 

.cellTableCell { 
    overflow: hidden; 
    padding-left: 10px; 
    height: 20px; 
    font-family: Arial; 
    font-size: 11px; 
    font-weight: normal; 
    border-bottom: #e6e6e6 1px solid; 
    border-left: #a6a6af 0.5px solid; 
    border-right: #e6e6e6 1px solid; 
    border-top: #a6a6af 0.5px solid; 
} 

.cellTableFirstColumnFooter { 

} 

.cellTableFirstColumnHeader { 

} 

.cellTableLastColumnFooter { 

} 

.cellTableLastColumnHeader { 

} 

.cellTableSortableHeader { 
    cursor: pointer; 
    cursor: hand; 
} 

.cellTableSortableHeader:hover { 
    color: #6c6b6b; 
} 

.cellTableSortedHeaderAscending { 

} 

.cellTableSortedHeaderDescending { 

} 

.cellTableEvenRow { 
    background: #ffffff; 
} 

.cellTableEvenRowCell { 

} 

.cellTableOddRow { 
    background: #f8f8f8; 
} 

.cellTableOddRowCell { 

} 

.cellTableHoveredRow { /** background: #eee;*/ 

} 

.cellTableHoveredRowCell { 
    /** border: selectionBorderWidth solid #eee; */ 

} 

.cellTableKeyboardSelectedRow { 
    background: #ffc; 
} 

.cellTableKeyboardSelectedRowCell { 

} 

.cellTableSelectedRow { 
    background-image: url("images/row_Highlight.jpg"); 
    color : black; 
    height: auto; 
    overflow: auto; 
} 

.cellTableSelectedRowCell { 

} 

/** 
* The keyboard selected cell is visible over selection. 
*/ 
.cellTableKeyboardSelectedCell { 

} 


@sprite .cellTableLoading { 
    gwt-image: 'cellTableLoading'; 
    /*margin: 20px; 
*/} 

Những thay đổi nào tôi cần thực hiện trong css để đảm bảo tính nhất quán (chiều cao ô) trong tất cả trình duyệt?

Answer 1

nó Làm việc cho tôi :)

/** Cell height */ 
.mainCellTable tbody tr td{ 
    height: auto; 
} 

Answer 2

Trước hết, bạn có đặt lại CSS không? Bài viết sau đề cập đến cùng một vấn đề tôi đoán. Why is box sizing set to border-box for tables in Firefox?

Sự cố có thể do sự khác biệt giữa các trình duyệt theo cách xử lý mô hình hộp. Đọc this post để biết thêm thông tin.

Tôi sẽ đặt thuộc tính kích thước hộp. IE sử dụng hộp biên giới, mọi trình duyệt khác là nội dung-hộp-modell. Bạn có thể xác định, cái nào nên được sử dụng với quy tắc css sau:

table { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

hoặc

table { 
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: content-box; /* Firefox, other Gecko */ 
    box-sizing: content-box;   /* Opera/IE 8+ */ 
} 

Answer 3

Bạn có thể sử dụng

.cellTableKeyboardSelectedRow { 
    background: #ffc; 
    height:30px !important 
} 

Answer 4

chiều cao không phải là giải pháp tốt nhất để gán nơi nội dung văn bản được tăng hoặc giảm. Vì vậy, có hai trường hợp để làm ví dụ trên của bạn như sau.

A) Sử dụng CSS thuần túy. B) Sử dụng Javascript

Giải thích A: Trong CSS, chúng tôi phụ thuộc vào 2 điều nữa cho dù chúng tôi đang sử dụng cấu trúc DIV hoặc chúng tôi đang sử dụng phương pháp TABLE.

A.1 Sử dụng DIV:

Nếu chúng ta đang sử dụng cấu trúc div xây dựng trang web của tôi và tôi sử dụng line-height để class dọc các văn bản và text-align sang phương ngang align văn bản.

A.2 Sử dụng bảng: Nếu tôi đang sử dụng bảng phương pháp, thì tôi muốn căn giữa văn bản ở giữa ô. Phép lạ này sẽ đúng nếu và chỉ khi tôi sử dụng văn bản dọc-align: giữa và ngang-align: center. Lưu ý: văn bản phải được viết bằng thẻ.

CSS trong cơ thể như:

Tôi yêu Allah I Love Hồi giáo

B: Sử dụng Javascript

Sử dụng min-height trong td và sử dụng class dọc và texl các thuộc tính căn giữa để căn giữa và giữa các văn bản theo trục x và trục y tương ứng. Nhưng chỉ có một vấn đề nó sẽ tạo ra một báo cáo lỗi trong IE6, 7. bởi vì IE7, IE8 không hiểu min-height. Vì vậy, chúng tôi có tập tin IE9.js mà bạn tải nó bằng cách sử dụng google. và đặt kịch bản vào phần đầu của tài liệu html. Ngoài ra, hãy đặt tệp jquery mới nhất đầu tiên và sau đó đặt tập lệnh IE9.js sau nó.

và trong css tận hưởng thuộc tính chiều cao tối thiểu và cách văn bản của bạn phát triển, văn bản sẽ tự động ở giữa các ô trong bảng.

Nếu bạn đang sử dụng DIV thì đó là quá trình tương tự.

Tôi hy vọng điều này sẽ giúp bạn thêm điều gì đó. Và bạn sẽ không cần sử dụng lại google nữa. nếu bạn không hiểu thì hãy hỏi lại. tôi sẽ trả lời bạn với giai điệu khác nhau với ví dụ jfiddle. Cảm ơn bạn thân yêu. :)

Answer 5

Tôi nghĩ rằng vấn đề có thể là phong cách CSS của bạn cho ô có "overflow: hidden;".

.cellTableCell { 
    overflow: hidden; 
    ... 
} 

Mang điều đó đi và xem điều gì xảy ra. Tôi nghĩ rằng các tế bào và hàng sẽ mở rộng để phù hợp với nội dung.

Có một hiệu chỉnh khác cho CSS của cellTableRow. Kiểu hàng nên được ghi đè bằng kiểu ô, nhưng GWT có thể đang làm điều gì đó dưới mui xe để bù đắp cho sự khác biệt của trình duyệt trong IE. Để đảm bảo nó luôn áp dụng cho các TDs chứa trong TR, hãy viết nó như thế này:

.cellTableRow, 
.cellTableRow td { 
    overflow: auto; 
    ... 
} 

Answer 6

Đôi khi chúng ta có vấn đề với IE phá vỡ bố cục, bởi vì trang hoàn trả trước tất cả mọi thứ đã sẵn sàng. Hãy thử nếu gán một lớp CSS giả cho một số phần tử trong DOM thay đổi bất cứ điều gì.

Nếu có, mã sau có thể giúp bạn. Nó chỉ đặt một số lớp ngẫu nhiên tại các yếu tố cơ thể và reset nó để buộc một rerendering of the page:

/** 
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This 
* method only works for Internet Explorer 8. 
* 
* @param delayInMillis delay in milliseconds 
*/ 
public void forceIe8ToReRender(final int delayInMillis) { 
    // call timer to force ie8 to re-render page without page refresh 
    final Timer t = new Timer() { 

     @Override 
     public void run() { 
      doForceBrowserToReRender(); 
      // timer should only run once 
      this.cancel(); 
     } 
    }; 
    t.schedule(delayInMillis); 
} 

/** 
* Force Browser to render the page again without a page refresh 
*/ 
private native void doForceBrowserToReRender()/*-{ 
               var doc = $doc; 
               var originalClassName = doc.body.className; 
               doc.body.className = "foobar"; 
               doc.body.className = originalClassName; 
               }-*/; 

Answer 7

sử dụng này

.cellTableCell { min-height : 20px ; ..... } 

Answer 8

Mở rộng AbstractCellTableBuilder và sau đó đề cập đến thuộc tính chiều cao của TableRow