I'm trying to get slides working where each slide has a number of cards in it.
I've created a stackblitz to show my problem: https://stackblitz.com/edit/ion-slides-info-zgej2j
Normally, the cards are stacked vertically, and within each card, the header is above the content.
But doing this inside slides shifts the cards, headers, and content into horizontal rows. See Stackblitz for the example.
Any thoughts?
Regards,
Andy
Ah, I've resolved it. All the content inside the ion-slide must be wrapped by one element, not multiple elements at the same level.
So basically, have multiple ion-cards, and insert them into one div:
<ion-slide>
<div>
<ion-card />
<ion-card />
<ion-card />
</div>
</ion-slide>
Related
While creating a project on the Nuxt + Tailwind stack, I stumbled upon another problem.
Following the documentation I wanted to add a background image, but css does not display it (other Tailwind classes work)
**.vue
<div class="bg-[url('img/stories/desktop/18-days-voyage.jpg')]">
<h3>The Mountains</h3>
<p>by John Appleseed</p>
Read story
</div>
However, if I am use the img tag with the same path to the image, then it displays.
<img src="img/stories/desktop/18-days-voyage.jpg" alt="" />
Need to make the first way work. Can you tell me where to dig? Thanks in advance.
I started a new job and I need to build a website with nuxt. A typical website would look like this in a nuxt layout file:
<NavMenu />
<Nuxt /> - my different routed pages
<Footer />
Whenever I change a page <Nuxt /> displays another page, but <NavMenu /> stays as is.
But the website I am building now needs a particular design. Imagine each page looking like this:
(NB: this is purely a design/layout description, not actual vue components)
<HeroImage /> - different for each page, belongs to that specific page
<NavMenu /> - always the same, belongs to the general layout
<MyPageContent /> - content belongs to specific page
The hero image is almost full screen. If you're wondering why the <NavMenu /> is tucked after a fullscreen hero image, it is because when you scroll, the NavMenu is scrolled into view, and whenever it reaches the top of the page, it stays sticky. Here's an example of such sticky navbar: https://codepen.io/bencasalino/pen/MOLQKM
I want to display the NavMenu after the HeroImage. My problem is figuring out how to display a top level component inside of multiple routed pages without reloading it. I can't put the NavMenu inside of individual pages, because if I change the page, that would destroy it and create a brand new NavMenu every time. Also, I can't put HeroImage outside of the <Nuxt /> component because it belongs to its own specific page (the image is different for every page).
I thought I could solve this problem with <teleport>, which allows to move an element to another position in the DOM with a css selector. I would have done something like this:
<teleport to="somewhere_after_the_hero_image" >
<NavMenu />
</teleport>
<Nuxt /> - my different pages
<Footer />
// Pages would look like this
<HeroImage />
<div class="somewhere_after_the_hero_image"></div>
<PageContent />
The problem is that Nuxt doesn't allow it yet because it runs on Vue 2, and <teleport> is a recent feature from Vue3. What would be the most logical way to create this layout? Many thanks in advance !
I didn't find the perfect answer, but one way of doing it might be using the vue store to pass (img url) data from the page created in <Nuxt /> to my HeroImage component.
In the end, I took another approach: my HeroImage is created inside of the Nuxt component, below the menu, and then I used Javascript to put everything into place.
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
I am using a dijit/layout/TabContainer with two tabs. I create them like this:
<div dojoType="dijit.layout.TabContainer" doLayout="false">
<div dojoType="dijit.layout.ContentPane" title="First tab" style="background-color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
<div dojoType="dijit.layout.ContentPane" title="Second tab" style="background- color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
</div>
This works fine for Firefox, Chrome and IE9, but doesn't render properly on ipad with Safari. The first time the first tab displays correctly, but then it takes the width of the second tab, which is larger. I believe that this should not happen as I have added the doLayout flag. I don't know if it matters, but I am using dojo with xpages framework.
Thanks a lot in advance!
I added
controllerWidget="dijit.layout.TabController"
to the div of TabContainer along with a width in percent and and now it displays correctly in Safari too.
The problem was that Safari needed a width to be defined. But as my content is dynamic, I couldn't define a fixed width in pixels. So in order to use width in percent I had to also add the above flag. I don't know if this is the appropriate way to achieve this, but it fixes my problem.
I ran into this issue while building my online design portfolio. It seems complex to me, but I know there is a way to do it, so I am frustrated that I can't find a solution. Please help!
My design calls for the use of media queries to optimize my site for mobile, tablets, and desktops/laptops. The mobile version has a single column of thumbnails. When each thumbnail is clicked, a hidden div is revealed below it via jQuery slideToggle, pushing down the other project thumbnails.
That is how the mobile version works and it works great. The problem is the tablet and dektop/laptop versions. For those versions, I want the the thumbnails to display in a grid pattern. Two side-by-side on tablets and three side-by-side on desktop/laptops with infinite rows for all versions. I can make them display in a grid with HTML, but the problem comes when a thumbnail is clicked and it reveals the div below it via slideToggle. Since I'm using media queries, the order of the HTML is still the same as the mobile version and the hidden divs are directly below each thumbnail in the code. Thus, revealing the hidden div pushes down all the other thumbnails, including the thumbnails in the same row as the thumbnail that is being clicked (if they come after it in the code). The last div in each row does what I want it to; the next row is pushed down when the hidden div is revealed. I want the hidden div to display below the row it is in and push down the thumbnails that are in the rows below.
And obviously I want to stick with media queries to avoid creating separate HTML, if possible.
Repeating HTML for the thumbnails and hidden divs:
<div class="body">
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
</div>
I created a jsfiddle to demonstrate the problem: http://jsfiddle.net/EuHyc/13/
Please note that the divs are hidden using jQuery. Hiding them with CSS was not allowing my content within the hidden div to display properly when revealed. Also, I had to use display:inline-block because float:left does not force the hidden div to appear below it in the layout.
I hope I adequately explained the problem. Thanks in advance for any help! I sincerely appreciate it!