Dart webUI Các vấn đề về CSS

Question

Tôi gặp sự cố khi tạo kiểu tóc khi sử dụng webUI.

Khi tôi tiêm dataValues ​​của mình, thiết kế của tôi bị hỏng.

Trong trường hợp cụ thể của tôi, menu của tôi không được hiển thị đúng. Từ những gì tôi có thể thấy, có vẻ như {{dataValue}} có độ dài chuỗi ban đầu là 0 và html và css được áp dụng trước khi webUI thực hiện việc tiêm.

Vì vậy, bây giờ khi tôi đặt chuỗi của tôi, có vẻ như nó được tính toán với độ dài sai.

Trong khi gỡ lỗi, khi tôi chỉnh sửa lại tệp css (tôi không thay đổi chiều rộng: 100% tôi chỉ chỉnh sửa lại và lưu để css được áp dụng lại), và sau đó có vẻ tốt.

tôi đã cố gắng sử dụng (từ tập tin phi tiêu):

element.style.width = "100%"; 
element.classes.add("classWithWidth100Percent"); 

Nhưng không ai trong số này dường như làm việc.

Vì vậy, về cơ bản tôi nghĩ rằng tôi có thể giải quyết vấn đề này bằng cách tải lại/đăng ký lại css. Bất cứ ai biết làm thế nào người ta sẽ đạt được điều này?

EDIT: {{datavalue}} là gì? ..put chuỗi của tôi .... < - chuỗi gì? .. chiều dài không chính xác .. < - điều gì sai về nó? Nếu bạn 'Chạy như Javascript' trong Dart Editor và chỉ chạy tệp HTML từ đĩa cứng - nó có hoạt động không? Kiểu CSS có hiển thị chính xác không? Trong trình duyệt nào?

• {{dataValue}} là ký hiệu từ Darts webUI.
• Chuỗi của tôi là một chuỗi ký tự thông thường - ví dụ: "Word"
• Thông dịch phi tiêu {{dataValue}} là chuỗi có chiều dài 0. Khi tôi "chèn" chuỗi của tôi bằng webUI, css được áp dụng như thể chiều dài là 0. Vì vậy, bây giờ, tôi có thể thấy ngắt dòng nơi không nên có bất kỳ. width = 100% không được áp dụng lại với độ dài chuỗi mới.
• Javascript hoặc Dartium không có sự khác biệt.
• Tôi đang sử dụng Chromium.

EDIT 2:

Vâng, dataValue có giá trị ban đầu, vẫn phá vỡ thiết kế.

String dataValue = "some text"; 

Đây là mã:

<div id='headerContainer'> 
    <div id='headerBg' class="displaying_theFlow"></div> 
    <header id="header"> 
     <nav id='menu'> 
      <a href="#theFlow">{{theFlow}}</a> 
      <a href="#connect">{{connect}}</a> 
      <a id="logoLink" href="#welcomeScreen"> 
       <div id="logoBg"></div> 
       <div id="logo" alt="LogoImg">LogoImg</div> 
      </a> 
      <a href="#business">{{business}}</a> 
      <a href="#aboutUs">{{aboutUs}}</a> 
     </nav> 
    </header> 
</div> 

Trong file .dart i am chỉ cần gán giá trị cho chuỗi theFlow, connect, business vv và sau đó gọi watcher.dispatch();

Đây là bên trong Tệp CSS:

#headerContainer { 
    /*height: 180px;*/ 
    z-index: 1000; 
    } 
#header{ 
    position: fixed; 
    top: 15px; 
    width: 100%; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: 600; 
    z-index: 1000; 
    -webkit-transition: top .2s; 
    -moz-transition: top .2s; 
    -ms-transition: top .2s; 
    -o-transition: top .2s; 
    transition: top .2s; 
    } 

#header.up { 
    top: -30px; 
    } 
#headerBg { 
    position: fixed; 
    background-color: #274a80; 
    height:8px; 
    width: 100%; 
    z-index: 1000; 
    -webkit-transition: height .2s; 
    -moz-transition: height .2s; 
    -ms-transition: height .2s; 
    -o-transition: height .2s; 
    -webkit-transition: background-color .6s; 
    -moz-transition: background-color .6s; 
    -ms-transition: background-color .6s; 
    -o-transition: background-color .6s; 
    } 

#headerBg.long{ 
    height: 75px; 
    } 

#header a { 
    font-size: 15px; 
    color: #ffffff; 
    margin-left : .4em; 
    margin-right: .4em; 
    text-decoration: none; 
    display:inline-block; 
    vertical-align:middle; 
    opacity : .3; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    } 

#header a:hover { 
    opacity: .5; 
    } 
#header a.active { 
    opacity: 1; 
    } 

Answer 1

Tôi đã sao chép vấn đề của bạn và sửa chữa (mặc dù tôi sợ nó là một hack).
Tôi đã tạo một ứng dụng mới sử dụng mã sơ khai WebUI, sau đó thay thế nội dung của xclickcomponent.phi tiêu với những sản phẩm sau (Tôi cũng sử dụng HTML đã cung cấp của bạn như nội dung của các thành phần và CSS của bạn):

@observable 
String theFlow = ""; 
String connect = "connect"; 
String aboutUs = ""; 
String business = "business"; 

CounterComponent() { 
    // Delay adding the value so CSS has a chance to be drawn. 
    new Timer(new Duration(seconds: 3),() {this.setFlow();}); 
} 

void setFlow() { 
    theFlow = "New Flow"; 

    // Now refresh the CSS by removing then adding the stylesheet 
    var style = query("head>link[rel=stylesheet]"); 
    style.remove(); 
    var elem = new LinkElement(); 
    elem.attributes["rel"] = "stylesheet"; 
    elem.attributes["href"] = "../stackoverflow.css"; 
    var header = query("head"); 
    header.append(elem); 
} 

Thậm chí nếu điều này là quá hacky cho bạn, hy vọng nó sẽ giúp bạn cùng :)

UPDATE: Issue nuôi: https://github.com/dart-lang/web-ui/issues/487

Answer 2

Nhìn vào này hơn một chút, một repro đơn giản là:

<!DOCTYPE html> 
<html> 
<head> 
    <title>JS</title> 
    <style> 
span { 
    display:inline-block; 
    text-transform: uppercase; 
} 
    </style> 

    <script> 
window.setTimeout(function() { 
    var s1 = document.getElementById('s1').textContent = 'Something'; 
}, 1000); 
    </script> 
</head> 
<body> 
    <span id='s1'></span>Else 
</body> 
</html> 

này dường như là một lỗi Chrome: https://code.google.com/p/chromium/issues/detail?id=111299