8

webUI使用時のスタイリングに困っています。

dataValues を挿入すると、デザインが壊れます。

私の具体的なケースでは、メニューが正しく表示されません。私が見る{{dataValue}}限り、最初の文字列の長さは 0 で、webUI がインジェクションを行う前に html と css が適用されているようです。

そのため、文字列を配置すると、間違った長さで計算されているように見えます。

デバッグ中にcssファイルを再編集すると（幅は変更しません：100％再編集して保存するだけなので、cssが再適用されます）、見た目は問題ありません。

私は（dartファイルから）使用してみました：

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

しかし、これはどれもうまくいかないようです。

基本的に、CSSをリロード/再適用することでこれを解決できると思います。これを達成する方法を知っている人はいますか？

編集: {{datavalue}} とは何ですか? ..put my string.... <- 何の文字列? ..間違った長さ.. <- 何が悪いの? Dart Editor で「Javascript として実行」し、ハードディスクから HTML ファイルを実行した場合、動作しますか? CSS スタイルは正しく表示されますか? どのブラウザで？

  • {{dataValue}} は Darts 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 ファイルでは、 StringstheFlowなどに値を割り当てているだけで、その後呼び出していますconnectbusinesswatcher.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;
  }
4

2 に答える 2

6

私はあなたの問題を再現し、修正しました (ハックだと思いますが)。
WebUI スタブ コードを使用して新しいアプリケーションを作成し、xclickcomponent.dart のコンテンツを次のように置き換えました (コンポーネントと CSS のコンテンツとして提供された HTML も使用しました)。

@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

于 2013-04-27T23:32:06.853 に答える
0

これをもう少し詳しく調べたところ、簡略化された再現は次のとおりです。

<!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-06T00:48:26.823 に答える