Adapt Learning Community: Hotspot Menu is "messed up"

I am trying to use the Hotspot Menu, in the latest framework, and it looks "messed up", is the best way I can describe it. Functionally it works fine, but visually it is completely wrong, like the CSS isn't processing properly for it.

The popups for the menus do not display correctly, they are all stretched and off the side of the page, etc.

Anyone encounter this?

Hi Rob,

Just tried a quick test, and wasn't displaying correctly for me either (although this could be due to me misconfiguring it...).

There have been no updates for over a year, so it's entirely likely that it needs a bit of loving care to get it working in the latest framework. I'd try logging an issue on the repo if you get no luck here.

Show parent | Reply

Hi Rob,

My first point of call would be to see that the parent of the hotspot popup has a 'position relative' attached to it.

Failing that, I would look to the theme to make sure there were no overrides happening by accident as I know the vanilla theme ships with a boxmenu.less file that could be affecting the hotspot menu.

Please let me know how you get on.

Guy

Show parent | Reply

Hi Rob,

I appreciate I'm rather late to the table on this one, but I really wanted to get the hotspot menu up and running too (having seen the really rather nice Scouts course Kineo did (see showcase)).

I've got things working the same as the Scouts site (admittedly with a fair bit of CSS work, and some tweaks to handlebars), but as a starting point I kind of ignored part of the example.json, specifically the 'parents' and 'children' bit - getting .LESS to do the same thing. It may be a roundabout way, but here's one solution...

Uninstall the boxMenu then install the hotspot menu
Delete menu.less from vanilla theme
Working from the hotspot menu example.json, I ignored the first 'parent' chunk
In contentObjects.json I left each of the object's _parentIds as "course"
To each of the objects I added the "_hotspotMenuItem" part from example.json, setting positions as preferred.
I created a new .LESS file, targeted the hotspot-container-image div (the one where the hotspot menu background image should sit) and styled accordingly. As a very quick example:
.hotspot-menu .hotspot-container-image {
    height: 600px;
   background-image: url('../../course/en/images/menu-bg.jpg');
   background-repeat: no-repeat;
   background-size: 100% auto;
}

Of course, getting the menu items to look and behave as they do on the Scouts site took some more CSS work and a few tweaks to some .hbs files, but nothing that couldn't be gleaned from FFs web dev tool.

Anyway, hopefully the above might be of assistance to you (if you haven't alredy found a much better way of doing it!) and anyone else who's looking to implement the menu.

Chris

Show parent | Reply