Dart webUI CSS 问题答案

【问题标题】：Dart webUI CSS issuesDart webUI CSS 问题
【发布时间】：2013-04-15 10:57:26
【问题描述】：

我在使用 webUI 时遇到了样式问题。

当我注入我的 dataValues 时，我的设计被破坏了。

在我的具体情况下，我的菜单显示不正确。据我所知，{{dataValue}} 的初始字符串长度为 0，并且在 webUI 完成注入之前应用了 html 和 css。

所以现在当我输入我的字符串时，它看起来好像是用错误的长度计算的。

在调试时，当我重新编辑 css 文件时（我不更改宽度：100%，我只是重新编辑并保存，以便重新应用 css），然后它看起来很好。

我尝试使用（来自 dart 文件）：

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

但这些似乎都不起作用。

所以基本上我认为我可以通过重新加载/重新应用 css 来解决这个问题。有人知道如何实现这一目标吗？

编辑：它是什么 {{datavalue}} ？ ..把我的字符串....

{{dataValue}} 是 Darts webUI 的符号。
我的字符串是一系列常规字符 - 例如"Word"
Dart 将 {{dataValue}} 解释为长度为 0 的字符串。当我使用 webUI “注入”我的字符串时，css 会像长度为 0 一样应用。所以现在，我可以看到不应该出现的换行符任何。 width=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;
  }

【问题讨论】：

{{datavalue}} 是什么？ ..把我的字符串....
嘿贾斯珀，我重新编辑了我的问题，我希望现在更清楚了
请添加一些代码更清楚。干杯:)
当dataValue 被赋予一个值时，页面是否仍然看起来很糟糕？宽度应随着dataValue 的变化而重新计算。请创建表现出这种不良行为的最简单的 HTML 文件，我们将能够提供帮助。 :]
我希望这就足够了 :))

标签： html css dart dart-webui

【解决方案1】：

我复制了您的问题，并得到了修复（虽然我担心这是一个 hack）。
我使用 WebUI 存根代码创建了一个新应用程序，然后将 xclickcomponent.dart 的内容替换为以下内容（我还使用您提供的 HTML 作为组件的内容和您的 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);
}

即使这对你来说太老套了，希望它会帮助你:)

更新：提出的问题：https://github.com/dart-lang/web-ui/issues/487

【讨论】：

【解决方案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

【讨论】：