+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Placement of icon (/showthread.php?tid=2893)
Placement of icon - Trond Hoyem - 07.10.2020
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?
RE: Placement of icon - admin - 07.10.2020
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;
}RE: Placement of icon - Trond Hoyem - 07.10.2020
(07.10.2020, 08:35)admin Wrote: Set Additional classes to value-rightI 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.
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 have a SpaceLYnk FW 2.5.1. Any known issues with CSS here?
RE: Placement of icon - admin - 07.10.2020
Are you testing in the editor or normal visualization view? Custom CSS does not work in the editor.
RE: Placement of icon - Trond Hoyem - 07.10.2020
(07.10.2020, 08:52)admin Wrote: 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.
(07.10.2020, 08:55)Trond Hoyem Wrote:Never mind. I found the error.(07.10.2020, 08:52)admin Wrote: 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.
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?
RE: Placement of icon - admin - 07.10.2020
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;
}RE: Placement of icon - Trond Hoyem - 07.10.2020
(07.10.2020, 09:26)admin Wrote: 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.Splendid!
Code:.value-left .icon {
display: inline-block;
}
.value-left .value {
line-height: 56px;
padding: 0;
float: left;
width: 50px;
text-align: center;
}