Dart webUI CSS-Probleme

Question

Ich habe Probleme mit dem Styling WebUI verwenden.

Wenn ich meine dataValues ​​injiziere, ist mein Design gebrochen.

In meinem konkreten Fall wird mein Menü nicht richtig angezeigt. Von was ich sehen kann, sieht es so aus, als hätte die {{dataValue}} anfängliche String-Länge 0, und HTML und CSS wird angewendet, bevor WebUI seine Injektionen gemacht hat.

Also jetzt, wenn ich meine Zeichenfolge, es sieht aus wie es mit falscher Länge berechnet wird.

Während des Debuggens, wenn ich die CSS-Datei neu bearbeite (ich ändere nicht die Breite: 100% ich nur neu bearbeiten und speichern, so dass CSS wieder angewendet wird), und dann sieht es gut aus.

Ich habe versucht (von Dart-Datei):

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

Aber nichts davon scheint zu funktionieren.

Also im Grunde denke ich, ich könnte das lösen, indem ich css nachladen/erneut anwenden. Weiß jemand, wie man das erreichen würde?

EDIT: Was ist es {{Datenwert}}? ..put mein String .... < - welche Zeichenfolge? ..wrong Länge .. < - was ist daran falsch? Wenn Sie im Dart-Editor als Javascript ausführen und die HTML-Datei einfach von der Festplatte ausführen - funktioniert das? Werden CSS-Stile korrekt angezeigt? In welchem ​​Browser?

• {{dataValue}} ist eine Notation von Darts webUI.
• Mein String ist eine regelmäßige Reihe von Zeichen - zum Beispiel "Word"
• Dart interpretiert {{datavalue}} als String der Länge 0. Wenn i „injizieren“ my Strings WebUI verwenden, wird die CSS als angewendet, wenn die Länge war 0. So, jetzt kann ich Zeilenumbrüche sehen, wo es keine geben sollte. width = 100% wird nicht erneut mit neuen String-Längen angewendet.
• Javascript oder Dartium macht keinen Unterschied.
• Ich verwende Chrom.

EDIT 2:

Ja, dataValue Anfangswert hat, bricht noch das Design.

String dataValue = "some text"; 

Dies ist der Code:

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

In .dart Datei i nur Werte zuweisen bin theFlow, in Strings connect, business usw. und danach watcher.dispatch();

Aufruf dieser innerhalb der ist CSS-Datei:

#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

Ich habe Ihr Problem repliziert und eine Fehlerbehebung erhalten (obwohl ich befürchte, dass es sich um einen Hack handelt).
Ich habe eine neue Anwendung mit dem WebUI-Stubcode erstellt und dann den Inhalt von xclickcomponent ersetzt.Dart mit der folgenden (habe ich auch Ihre mitgelieferten HTML als den Inhalt der Komponente und CSS):

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

Auch wenn dies für Sie zu Hacky ist, hoffentlich wird es Ihnen helfen, zusammen :)

UPDATE: Problem aufgeworfen: https://github.com/dart-lang/web-ui/issues/487

Answer 2

in diesen Sieht ein bisschen mehr, ein vereinfachtes repro ist:

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

Dies scheint ein Chrome Bug zu sein: https://code.google.com/p/chromium/issues/detail?id=111299