In this article, I’ll describe a particular issue I often needed to solve in Evolve Authoring and provide code that you can copy and paste to solve it too.
To apply the code, you’ll need to refer to my article Applying Your Hacks, and for full context of why hacks are necessary, you can refer to Hacking Evolve Authoring.
When I was working in Evolve, I’d regularly get frustrated by the way the link component would always place every link in set columns or one on top of the other in a rigid way – without an option to let the links simply sit next to each other and wrap organically. So below is the hack I used to do to enable exactly that.
The code below allows your links to sit horizontally and dropdown to a new link only if necessary. Any number of links will fit on a line depending on the length of the line.
The code also allows adjusting the alignment, incase the default of left align doesn’t suit your course.
Add this styling code according to my articles Hacking Evolve Authoring and Applying Your Hacks.
designdebt.club/* Allow Links In Dynamic Columns - v1: 02/08/2019 */
.ev-links-widget .ev-grid {
text-align: center;
}
.ev-links-widget .ev-grid-item {
flex: none !important;
/* Use the line below for left aligned links. */
margin: 5px 5px !important;
/* Use the line below for even spreading and centering of links. */
/* margin: 5px auto !important; */
}
While that worked for me, that doesn’t mean it will still work for you. Evolve updates often, so always be sure to test the code before you use it and any time you export. Evolve may have even improved this feature such that it’s no longer necessary by the time you read this article.
However, if you’re trying to apply it and it doesn’t work, let me know if you modify the code to work and I’ll update this article.