Dart webUI CSS问题
在使用webUI时，我在造型方面遇到了问题。
当我注入我的dataValues时，我的设计就坏了。
在我的具体情况下，我的菜单显示不正确。据我所见，{{dataValue}}的初始字符串长度为0，在webUI完成注入之前就应用了html和css。
所以现在，当我把我的字符串，它看起来是用错误的长度计算。
调试时，当我重新编辑css文件时(我不会更改宽度:100%我只是重新编辑和保存css以便重新应用)，然后它看起来很好。
我尝试使用(从dart文件)：
element.style.width = "100%";
element.classes.add("classWithWidth100Percent");但这一切似乎都行不通。
所以基本上我认为我可以通过重新加载/重新应用css来解决这个问题。有人知道如何做到这一点吗？
编辑：{{数据雪崩}}是什么？..put我的字符串.<-什么字符串？..wrong长度..。<- -这有什么不对？如果您在Dart编辑器中“以Javascript的形式运行”，然后从硬盘上运行HTML文件--它工作吗？CSS样式是否正确显示？在哪个浏览器里？
- {{dataValue}是飞镖webUI中的符号。
- 我的字符串是一个常规的字符系列，例如
"Word"。 - Dart将{{dataValue}解释为长度为0的字符串。当我使用webUI“注入”字符串时，就会像长度为0一样应用css。所以现在，我可以看到在不应该有任何断线的地方。width=100%不会用新的字符串长度重新应用。
- Javascript或Dartium没有区别。
- 我在用铬。
编辑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;
} 回答 2
Stack Overflow用户
发布于 2013-04-27 23:32:06
我复制了你的问题，并得到了一个修复(虽然我担心这是一个黑客)。
我使用WebUI存根代码创建了一个新的应用程序，然后用以下内容替换了xclickcomponent.dart的内容(我还使用了所提供的xclickcomponent.dart作为组件和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);
}即使这对你来说太麻烦了，希望它能帮到你:)
Stack Overflow用户
发布于 2013-06-06 00:48:26
再看一看这一点，一个简化的复制是：
<!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
https://stackoverflow.com/questions/16148831
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号