Dart webUI CSS問題

我在使用webUI時遇到樣式問題。Dart webUI CSS問題

當我注入我的dataValues時，我的設計被打破。

在我的具體情況下，我的菜單顯示不正確。從我可以看到，它看起來像{{dataValue}}具有初始字符串長度爲0，並且html和css在webUI完成注入之前應用。

所以，現在當我把我的字符串，它看起來像它計算錯誤的長度。當我調試時，當我重新編輯css文件（我不改變寬度：100％，我只是重新編輯和保存，所以css被重新應用），然後它看起來很不錯。

我嘗試使用（從DART文件）：

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

但這一切似乎工作。

所以基本上我想我可以通過重新加載/重新應用css來解決這個問題。任何人都知道如何實現這一目標？編號：什麼是{{datavalue}}？ ..put我的字符串.... < - 什麼字符串？ ..wrong長.. < - 它有什麼不對？如果您在Dart Editor中'以Javascript運行'並且只是從硬盤運行HTML文件 - 它是否工作？ CSS樣式是否正確顯示？在哪個瀏覽器中？

{{dataValue}}是來自飛鏢webUI的符號。
我的字符串是一個普通的一系列字符 - 例如"Word"
達特解釋{{dataValue}}如長度爲0當我「注入」的字符串中使用WEBUI我的字符串，則CSS被應用爲如果長度是所以現在，我可以看到換行符不應該有的地方。寬度= 100％不會重新應用新的字符串長度。
Javascript或Dartium沒有區別。
我正在使用Chromium。

編輯2：

是，dataValue有初始值，還打破了設計。

String dataValue = "some text";

這是代碼：

<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>

在.dart文件我只是分配值轉換爲字符串theFlow，connect，business等，之後調用watcher.dispatch();

這裏面的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; 
    }

來源

2013-04-22 deloki

它是什麼'{{datavalue}}'？ ..put我的字符串.... < - 什麼字符串？ ..錯誤的長度.. < - 它有什麼不對？如果您在Dart Editor中'以Javascript運行'並且只是從硬盤運行HTML文件 - 它是否工作？ CSS樣式是否正確顯示？在哪個瀏覽器中？ – Jasper 2013-04-22 14:01:34

嘿賈斯珀，我重新編輯了我的問題，我希望現在更清楚 – deloki 2013-04-22 14:14:24

請添加一些代碼以便更清楚。歡呼:) – Jasper 2013-04-22 14:23:29

我複製了你的問題，並得到了一個修復（雖然我怕它是一個黑客）。
我使用WebUI存根代碼創建了一個新應用程序，然後替換了xclickcomponent的內容。

@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); 
}

即使這是對你來說太哈克，希望它會幫助你一起:)

：滿足以下（我還用你提供的HTML作爲組件的內容和你的CSS）鏢

UPDATE：問題提出：https://github.com/dart-lang/web-ui/issues/487

來源

2013-04-27 23:32:06 lizard

看着這個多一點，一個簡化的攝製是：

<!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>

這似乎是Chrome錯誤：https://code.google.com/p/chromium/issues/detail?id=111299

來源

2013-06-06 00:48:26

Dart webUI CSS問題

回答

相關問題