GWT: Thay đổi đệm của hàng cây?

cây

Một GWT trông gần như thế này:GWT: Thay đổi đệm của hàng cây?

<div class="gwt-Tree"> 
    <div style="padding-top: 3px; padding-right: 3px; 
       padding-bottom: 3px; margin-left: 0px; 
       padding-left: 23px;"> 
     <div style="display:inline;" class="gwt-TreeItem"> 
       <table> 
        ... 
       </table> 
     </div> 
    </div> 
    <div ...> 
    </div> 
    ... 
</div>

Câu hỏi của tôi là: làm thế nào tôi nên thay đổi miếng đệm của các hàng cây cá nhân? Tôi cho rằng tôi có thể làm điều gì đó dọc theo các dòng thiết lập các quy tắc CSS cho .gwt-Tree > div nhưng điều đó có vẻ như là hacky. Có cách nào thanh lịch hơn không?

Độ phân giải: Rõ ràng không có một cách thanh lịch hơn. Đây là những gì chúng tôi đã làm, FWIW:

.gwt-Tree > div:first-child { 
     width: 0px !important; 
     height: 0px !important; 
     margin: 0px !important; 
     padding: 0px !important; 
} 

.gwt-Tree > div { 
     padding: 0px 5px !important; 
} 

.gwt-Tree > div[hidefocus=true] { 
     width: 0px !important; 
     height: 0px !important; 

     margin: 0px !important; 
     padding: 0px !important; 
}

Nguồn

2010-03-22 Epaga

Bạn có thể làm điều đó như thế này:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    .gwt-Tree {background:green;} 
    .gwt-Tree div {padding-top: 3px; padding-right: 3px;padding-bottom: 3px; margin-left: 0px;padding-left: 23px;background:gray;} 
    .gwt-Tree div .gwt-TreeItem {padding:0;margin:0;background:red;color:#fff;} 
    </style> 
</head> 
<body> 
<div class="gwt-Tree"> 
    <div> 
     <div class="gwt-TreeItem"> 
      random 
     </div> 
    </div> 
    <div> 
     <div class="gwt-TreeItem"> 
      random 
     </div> 
    </div> 
</div> 
</body> 
</html>

Lưu ý rằng .gwt-Tree div sẽ ảnh hưởng đến tất cả các div đứa trẻ, vì vậy bạn phải thiết lập lại chúng trở lại phong cách bạn muốn với .gwt-Tree div .gwtTreeItem.

Giới thiệu về "hacky>" bạn đã nói -> bộ chọn được hỗ trợ trong tất cả các trình duyệt ngoại trừ IE6, những người sẽ không nhận ra nó.

Nguồn

2010-03-22 13:38:45 easwee

xin lỗi tôi không nghĩ rằng đó là những gì tôi tìm kiếm: cho phép tôi tùy chỉnh CSS của div cấp đầu tiên hoặc cấp thứ ba, nhưng không phải là div thứ hai, một với phần đệm ... – Epaga

Aha xin lỗi - tôi đã hiểu sai câu hỏi của bạn - câu trả lời đã chỉnh sửa. – easwee

Tôi đã xem GWT Tree Documentation. Các quy tắc phong cách CSS cho cây và cây mục là

CSS Style Rules

.gwt-Tree
cây thân

.gwt-Tree .gwt-TreeItem
một mục cây

.gwt-Tree .gwt-TreeItem chọn
một cây chọn mục

Bạn có thể muốn thêm padding để .gwt-Tree .gwt-TreeItem và .gwt-Tree. gwt-TreeItem-selected

Nguồn

2010-03-22 14:46:49 Carnell

Câu hỏi không phải về div TreeItem, mà là div giữa Tree và TreeItem. – gamma

@gamma ... Trang tôi tham chiếu đến danh sách TreeItem và Tree. Vì vậy, tên div/css cho TreeItem được liệt kê ở đó. Nó cũng được liệt kê trong văn bản câu trả lời của tôi. Đọc toàn bộ tài liệu trước khi bỏ phiếu xuống. – Carnell

@Carnell không may Gamma là đúng mặc dù: nếu bạn nhìn thấy câu hỏi của tôi, bạn sẽ thấy ba cấp độ: cây (gwt-tree), cấp độ thứ hai với padding mà tôi muốn thay đổi, và treeitem (gwt-treeitem) . Và câu hỏi đặt ra là tạo kiểu div cho CONTAINS treeitem. – Epaga

Tôi đã gặp vấn đề tương tự và đã cố gắng giải quyết nó bằng CSS, nhưng không may mắn. Cuối cùng tôi quản lý để thay đổi đệm trên và dưới trong các mã java:

/** 
    * handle top and bottom padding issue of leafs the grandparent DOM element (div) has disturbing top and bottom 
    * padding of 3px, which is changed here to 0px 
    * 
    * @param uiObject 
    *   uiObject which is a leaf in the tree 
    */ 
    private static void correctStyle(final UIObject uiObject) { 
     if (uiObject instanceof TreeItem) { 
     if (uiObject != null && uiObject.getElement() != null) { 
      Element element = uiObject.getElement(); 
      element.getStyle().setPaddingBottom(0, Unit.PX); 
      element.getStyle().setPaddingTop(0, Unit.PX); 
     } 
     } else { 
     if (uiObject != null && uiObject.getElement() != null && uiObject.getElement().getParentElement() != null 
       && uiObject.getElement().getParentElement().getParentElement() != null 
       && uiObject.getElement().getParentElement().getParentElement().getStyle() != null) { 
      Element element = uiObject.getElement().getParentElement().getParentElement(); 
      element.getStyle().setPaddingBottom(0, Unit.PX); 
      element.getStyle().setPaddingTop(0, Unit.PX); 
     } 
     } 
    }

tôi sử dụng phương pháp này như thế này trong các mã:

Anchor fileDownloadLink = new Anchor(); 
fileDownloadLink.setStyleName(ViewConstants.STYLE_LINK_FILE_DOWNLOAD); 
fileDownloadLink.setText(subSubStructure.getName()); 
fileDownloadLink.setHref(ViewConstants.HREF_DOWNLOAD_FILE_EXTRACTED_DATA + subSubStructure.getPath()); 
treeItem.addItem(fileDownloadLink); 
StyleCorrector.correctStyle(fileDownloadLink);

Nguồn

2011-07-08 11:52:29 chux

GWT: Thay đổi đệm của hàng cây?

Trả lời

Các vấn đề liên quan