My goal is to showcase multiple elements in cards, obtained from my routing system, much like how I'm setting up my sidebar (which is functioning correctly). I have all the titles and icons ready, and the linking works seamlessly.
This is where I'm facing an issue: When parsing through elements fetched from my routing system, some of them have children. For instance, I have placeholders for "agenda," "session," and "packs & modules." The last element contains two children - "packs" and "modules." However, when I inspect my route file for these elements, each parent is enclosed within a wrapper, creating separate wrappers for "agenda" and "session," and combining both "packs" and "modules" into one wrapper. I don't want the parent to be displayed in this case.
Everything is running smoothly except for one concern. I display all my cards horizontally, and if a wrapper doesn't fit on the screen, it moves to the next row. This behavior is perfect for single-element wrappers. But with wrappers containing children, things get tricky. When a wrapper can't fit on the screen, the entire wrapper shifts to the next line. I only want the child that doesn't fit to move to the next line, not the entire wrapper.
Here is a snippet of my code:
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<template v-if="!item.hidden&&item.children && hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link :to="resolvePath(onlyOneChild.path)">
<el-card :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest} ">
<div class="contentCard">
<div class="icon">
<i :class="onlyOneChild.meta.icon" />
</div>
<span class="title">
{{ generateTitle(onlyOneChild.meta.title) }}
</span>
</div>
</el-card>
</app-link>
</template>
...
</template>
And here's the CSS styling:
<style lang="css" scoped>
.el-menu--inline span{
font-size: 0.9em;
}
...
</style>Your help would be appreciated. Thank you!
Edit: To simplify, I have multiple wrappers with cards inside, all in one line. If there was just one card per wrapper, everything would work fine. However, some wrappers contain two or more cards, and when the screen limit is reached (especially on smaller screens), the entire wrapper jumps to the next line instead of just the card that doesn't fit on the same line inside that wrapper.