डार्ट वेबयूआई सीएसएस मुद्दे

Question

मुझे वेबयूआई का उपयोग करते समय स्टाइल के साथ परेशानी हो रही है।

जब मैं अपना डेटा इंजेक्ट करता हूं, तो मेरा डिज़ाइन टूट जाता है।

मेरे ठोस मामले में, मेरा मेनू सही प्रदर्शित नहीं होता है। जो मैं देख सकता हूं, ऐसा लगता है कि {{dataValue}} में प्रारंभिक स्ट्रिंग लंबाई 0 है, और वेबयूआई ने इंजेक्शन करने से पहले एचटीएमएल और सीएसएस लागू किया है।

तो अब जब मैं अपनी स्ट्रिंग डालता हूं, ऐसा लगता है कि यह गलत लंबाई के साथ गणना की जाती है।

डीबगिंग करते समय, जब मैं सीएसएस फ़ाइल को दोबारा संपादित करता हूं (मैं चौड़ाई नहीं बदलता: 100% मैं फिर से संपादित और सहेजता हूं ताकि सीएसएस को दोबारा बनाया जा सके), और फिर यह ठीक दिखता है।

मैं (डार्ट फ़ाइल से) उपयोग करने की कोशिश:

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

लेकिन इस से कोई भी काम करने लगता है।

तो मूल रूप से मुझे लगता है कि मैं इसे सीएसएस पुनः लोड/पुनः लागू करके हल कर सकता हूं। किसी को पता है कि यह कैसे प्राप्त करेगा?

संपादित करें: यह {{datavalue}} क्या है? ..put मेरी स्ट्रिंग .... < - क्या स्ट्रिंग? ..wrong लंबाई .. < - इसके बारे में क्या गलत है? यदि आप डार्ट संपादक में 'जावास्क्रिप्ट के रूप में चलाएं' और केवल हार्ड डिस्क से HTML फ़ाइल चलाएं - क्या यह काम करता है? सीएसएस शैलियों सही ढंग से प्रदर्शित करता है? किस ब्राउज़र में?

• {{dataValue}} डार्ट्स वेबयूआई से नोटेशन है। उदाहरण के लिए "Word"
• डार्ट की व्याख्या {{dataValue}} लंबाई 0. जब मैं "इंजेक्षन" की स्ट्रिंग के रूप में WebUI उपयोग करते हुए मेरे तार, सीएसएस के रूप में अगर लंबाई था लागू किया जाता है -
• मेरे स्ट्रिंग पात्रों में से एक नियमित श्रृंखला है 0. तो अब, मैं लाइन ब्रेक देख सकता हूं जहां कोई भी नहीं होना चाहिए। चौड़ाई = 100% नई स्ट्रिंग लंबाई के साथ reapplied नहीं है।
• जावास्क्रिप्ट या डार्टियम कोई फर्क नहीं पड़ता।
• मैं क्रोमियम का उपयोग कर रहा हूं।

संपादित करें 2:

हाँ, dataValue प्रारंभिक मूल्य है, अभी भी डिजाइन टूट जाता है।

<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();

यह अंदर है के बाद:

String dataValue = "some text"; 

इस कोड है सीएसएस फ़ाइल:

#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

मैंने आपकी समस्या को दोहराया, और एक फिक्स मिला (हालांकि मुझे डर है कि यह एक हैक है)।
मैंने वेबयूआई स्टब कोड का उपयोग करके एक नया एप्लीकेशन बनाया, फिर 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); 
} 

यहां तक ​​कि अगर यह तुम्हारे लिए भी hacky है, उम्मीद है कि यह आप :)

साथ मदद करेंगे: के साथ निम्नलिखित (मैं भी आपकी दी एचटीएमएल घटक की सामग्री और आपके सीएसएस के रूप में इस्तेमाल) डार्ट

अद्यतन: मुद्दा उठाया: https://github.com/dart-lang/web-ui/issues/487

Answer 2

इस में देखा थोड़ा अधिक, एक सरलीकृत रेप्रो है:

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