CSS Issues

[RSquared64]

I have been doing a lot of searching and have found no answers to this.

All the samples and documentation show the ability to use height, width, x, and y in the styles.css file.

For example what has been shown to work and what I am using:

This is for an image resource referenced in the index.gui file

#steps-face{
  height: 24;
  width: 24;
  x: 99%;
  y: 1% + 2;
}

This is for text element in the index.gui

#cals-text{
  font-size: 20;
  font-family: System-Bold;
  text-anchor: middle;
  x: 50%;
  y: 1% + 20;
  fill: white;
  text-length: 3;
}

In the Index.gui file the related items are:

  <image
    href="stepsface.png"
    id="steps-face"
  />

  <text
    id="cals-text">
      000
  </text>

Neither works for positioning and displaying the desired items. However, if I put the settings in the index.gui file inline with the element the setting is being used with, they work fine.

This kind of defeats the purpose of using .css!!

Right now I am developing using Visual Studio Code with the Command Line Interface and the Fitbit OS Simulator.

Any suggestions?

[Gondwana]

Have you linked your .css in widgets.gui?

[RSquared64]

Yes, here is a copy of the widgets.gui file - it is the default one created with a new project.

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
  </defs>
</svg>

[RSquared64]

In addition, I copied the whole project up to the web based studio, and had the same issues as I did with the CLI version.

[Drifty26 · Accepted solution]

This sounds like a problem I had a long time ago that was due to a very subtle typo - i think it as something at the end of a line.  I finally found it by cutting out most of the file and adding it back in an element at a time.

Hope this helps.

[RSquared64]

Still not sure what caused it, but literally stripped out all unnecessary characters, made it single line, and it started working.

Hopefully this will continue as I do have a formatting standard I like to use.

Thanks Drifty26!!

[RSquared64]

I did find a specific issue that caused the error!!

I can format the CSS as I had shown, and it worked fine. HOWEVER, if you put space(s) between the +(plus) or -(minus) in the positioning elements, it fails to properly format the text or image on the Fitbit.