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;
  } 

Neomineomycin

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 ? – Coates

hey Jasper, i reedited my question, i hope it is more clear now – Neomineomycin

Please add some code to be more clear. Cheers :) – Coates

Does the page still look bad when dataValue is given a value? The width should recalculate as dataValue changes. Please create the simplest HTML file that exhibits this poor behaviour and we'll be able to help. :] – Basilica

i hope this will be enough :)) – Neomineomycin

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

Fibroma

Answer 2

Looked into this a bit more, a simplified repro is:

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

This appears to be a Chrome bug: https://code.google.com/p/chromium/issues/detail?id=111299

Parliament