Dart webUI CSS issues

Question

I am having trouble with styling when using webUI.

When i inject my dataValues, my design is broken.

In my concrete case, my menu is not displayed right. From what i can see, it looks like the {{dataValue}} has initial string length 0, and html and css is applied before webUI has done its injections.

So now when i put my string, it looks like it is calculated with wrong length.

While debugging, when i re-edit the css file (i don't change the width:100% i just re-edit and save so css is reapplied), and then it looks fine.

I tried using(from dart file):

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

But none of this seems to work.

So basically i think i could solve this by reloading/reapplying css. Anyone know how one would achieve this?

EDIT: What is it {{datavalue}} ? ..put my string.... <- what string ? ..wrong length.. <- what wrong about it ? If you 'Run as Javascript' in Dart Editor and just run the HTML file from hard disk - does it work ? Does CSS styles display correctly ? In which browser ?

• {{dataValue}} is notation from Darts webUI.
• My String is a regular series of characters - for example "Word"
• Dart interprets {{dataValue}} as string of length 0. When i "inject" my strings using webUI, the css is applied as if the length was 0. So now, i can see line breaks where there should not be any. width=100% is not reapplied with new string lengths.
• Javascript or Dartium makes no difference.
• I am using Chromium.

EDIT 2:

Yes, dataValue has initial value, still breaks the design.

String dataValue = "some text";

This is the 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 file i am just assigning values to Strings theFlow, connect, business etc. and after that calling watcher.dispatch();

This is inside the CSS file:

    #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

I replicated your issue, and got a fix (though I'm afraid it's a hack).
I created a new application using the WebUI stub code, then replaced the content of xclickcomponent.dart with the following (I also used your supplied HTML as the content of the component and your 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);
}

Even if this is too hacky for you, hopefully it'll help you along :)

UPDATE: Issue raised: https://github.com/dart-lang/web-ui/issues/487