Placement of icon

[Trond Hoyem]

Hi

When using the setting "Icon and value" in normal visu, the Icon is placed on top of the value, is there a way to change this to have the icon to the right of the value?

[admin]

Set Additional classes to value-right

Add this to custom CSS, change 56px to icon height so the text is aligned to the vertical middle of the icon.

Code:

.value-right .icon {
  display: inline-block;
}

.value-right .value {
  display: inline-block;
  line-height: 56px;
  vertical-align: top;
  padding: 0 0 0 3px;
}

[Trond Hoyem]

Set Additional classes to value-right

Add this to custom CSS, change 56px to icon height so the text is aligned to the vertical middle of the icon.

Code:

.value-right .icon {
  display: inline-block;
}

.value-right .value {
  display: inline-block;
  line-height: 56px;
  vertical-align: top;
  padding: 0 0 0 3px;
}

I seem to have some CSS-problems. The changes I do in the CSS (like the one above), does not have any effect on my visu. 
I have a SpaceLYnk FW 2.5.1. Any known issues with CSS here?

[admin]

Are you testing in the editor or normal visualization view? Custom CSS does not work in the editor.

[Trond Hoyem]

Are you testing in the editor or normal visualization view? Custom CSS does not work in the editor.

I know, so I always has a different window with the actual visu to see the changes I do. I have also done a real refresh (Ctrl+F5), but no CSS changes are seen. If I move an object I can see that the changes have effect.

---

Are you testing in the editor or normal visualization view? Custom CSS does not work in the editor.

I know, so I always has a different window with the actual visu to see the changes I do. I have also done a real refresh (Ctrl+F5), but no CSS changes are seen. If I move an object I can see that the changes have effect.

Never mind. I found the error.
I copied some CSS from an example file. In this there are some line as comments, and that does not seem to work in SL editor, so all lines below the comments were seen as comments.

---

With this CSS I get the icon to the left of the value. How can I get the icon to the right?

[admin]

Use value-left class. In this case the value element must have a fixed width (50px in this example), otherwise if the text width changes the icon position will change as well.

Code:

.value-left .icon {
  display: inline-block;
}

.value-left .value {
  line-height: 56px;
  padding: 0;
  float: left;
  width: 50px;
  text-align: center;
}

[Trond Hoyem]

Use value-left class. In this case the value element must have a fixed width (50px in this example), otherwise if the text width changes the icon position will change as well.

Code:

.value-left .icon {
  display: inline-block;
}

.value-left .value {
  line-height: 56px;
  padding: 0;
  float: left;
  width: 50px;
  text-align: center;
}

Splendid!