jqxmenu with vue (with images)

[Craig MatthewsParticipant]

Before I start posting code, perhaps someone can tell what a possible cause for similar code to produce the results between the menu items being properly displayed and displayed as UL/LI items with improper formatting. I am thinking possible mislocation of jqwidgets-vue and jqwidgets directory.

I know I am having trouble locating the jqwidgets directory from the npm run serve (or dev) “base” or “root” directory for the localhost:8080 location.

[MartinParticipant]

Hello Craig Matthews,

Could you clarify what do you mean by ‘displayed as UL/LI items with improper formatting’?
If the jqxMenu is not rendered properly, the styles may not be referred correctly.
Please, make sure that you have copied the styles folder from node_modules/jqwidgets-scripts/jqwidgets to the public folder and that you have referred jqx.base.css file and the files of the other themes that you use in the index.html as showed in our Tutorial for Vue CLI with jQWidgets.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hello Martin,

The css was part of the problem. Since I couldn’t post a png file here, I couldn’t show what it was actually doing. It is mostly fixed now.

The problem I am still having is that I am using the JqxMenu with images and UL/LI when what I really want to use is the JqxMenu from an array, so that I can programmatically modify the menu contents before JqxMenu renders the menu. When using the UL/LI approach, the img src points to a predictable location (relative to src/components) but I can’t determine where the array contents img src needs to reference.

Once that is solved, the menu will be fine.

[MartinParticipant]

Hello Craig Matthews,

When you are loading the menu data from an array you can use an img tag again, inside the item’s label.
Please, look at the following Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hello Martin,

I looked at the example, and the example has the “image missing” icon next to the word “Folder”, so it looks like I am not the only one that can’t tell where the images need to be located.

Line 26 of the example app.vue is:
text: "<img src='../../images/folder.png'></img> Folder",

What I am asking is: where is “../../images/” supposed to be relative to where the npm run server localhost:8080 is looking?

[MartinParticipant]

Hello Craig,

The demo that I have sent you was just to show how the img tag could be used when loading items from an array.
The folder image is not uploaded to this example, that is why it is missing.

The images folder should be located inside the public folder. And if you use ‘images/folder.png’ for the src path it would also work,
so I guess that ‘../../images/folder.png’ in this case was a bit misleading.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hello Martin,

That path was what I needed.

Thank you.

[Author]

Posts