I am trying to use the Vuetify Flex CSS Helpers to create cards with varying heights. The cards can wrap when there is no more space. However, I would like the wrapping to be more intelligent. Right now they wrap to the bottom of the previous "row", but is there a way to get them to wrap to content with the highest bottom to minimize the amount of space is allocated for the entire component? Here is some sample code:
<v-card class="d-flex flex-wrap" color="grey lighten-2" flat tile>
<v-card class="align-self-start" outlined tile>
...
</v-card>
<v-card class="align-self-start" outlined tile>
...
</v-card>
...
</v-card>
Here is a full CodePen example. In it you will see when the last card wraps, it goes to be under the first card. But there is a lot of vertical space between the first card and the last card now. I would like to remove that vertical space. Is this possible?
Thanks
Related
I am working in a personal project in which I am using Vue+Vuetify. In one view I'm going to have an image logo and, bellow it, a Drag&Drop area. For this I started testing the grid system (Vuetify 2.X), which is giving me a bit of a headache.
For testing I used this code that is referenced in the Vuetify's documentation website about the Grid system:
<template>
<v-container class="grey lighten-5">
<v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
<v-col v-for="k in n + 1" :key="k">
<v-card class="pa-2" outlined tile> {{ k }} of {{ n + 1 }} </v-card>
</v-col>
</v-row>
</v-container>
</template>
The result of this code should look like this:
From the documentation and this example, I understand that the v-container acts as a package that holds the v-rows, which are the ones that have the v-cols that are the ones with the information to display. The v-container will arrange the v-rows vertically, while the v-rows will do it horizontally to the v-cols. In summary: the v-container is the foundation for a matrix-like structure, in which the combination of v-rows with v-cols are the tiles of the matrix.
With this all said, using the same code in my view I get this:
Here the v-container seems to be arrnaging the v-rows horizontally instead, and not even centered.
Is this normal? Did I miss an option or maybe the problem is comming from outside the view?
Thank you for your time.
I have this html and want to select only the div with class 'image-container landscape'.
<div class="image-container landscape">
...
</div>
...
<div class="image-container portrait">
...
</div>
Using $(element).find('.image-container') selects either one of the div, that comes first. But I only want the one with 'landscape'. I tried using $(element).find('.image-container landscape') but it doesn't work, maybe because it assumes landscape is a tag. How do I do this?
Yes, it would assume landscape was a tag.
You want either:
[class="image-container landscape"]
or
.image-container.landscape
This is just CSS3 for the record, you can probably read the full specs in less than an hour.
I would like to display a number of cards in a flexbox.
Unfortunately, the items do not wrap properly in some browser window sizes. Example:
My Code:
<v-row>
<v-col v-for="n in 7">
<v-card
max-width="344"
outlined
min-width="350"
height="120"
>
Card
</v-card>
</v-col>
</v-row>
I created a pen for this: https://codepen.io/Tenarius/pen/poywYYW
The problem is particularly with a resolution of 1920x1040.
How do I set the items so that they wrap exactly on top of each other despite min-width and max-width in every resolution?
You need to remove flex-grow: 1 from .col.
It's distributing free space between the items.
Being that the number of items in each row varies, the free space will vary, leading to an uneven distribution.
As per the image above, I'm having trouble stacking or ordering my v-flex components the way that I need in my grid. Basically, I need my third v-flex (v-flex 3) to stack on the right side when the screen size changes to md.
I've been messing around with this for a few hours, and I am stuck. I hope this makes sense. Thanks.
This is how you can achieve your desired results:
<v-layout row wrap justify-center>
<v-flex md6><v-btn block dark>1</v-btn></v-flex>
<v-flex md6><v-btn block dark>2</v-btn></v-flex>
<v-flex xs12 md6 order-md2><v-btn block dark>3</v-btn></v-flex>
<v-flex xs10 md6 order-md1><v-btn block dark>4</v-btn></v-flex>
</v-layout>
You can learn more about it Here.
Here is a Codepen that does that.
By adding justify-center you make sure that when your v-flex does not get the entire row, it will still look nice(in this case, in the center). You can also control the ordering of grid items by using order-{screenBreakpoint}{order} so in this case I used order-md2 for 3rd v-flex and order-md1 for 4th v-flex.
The order in medium size screen:
The order in smaller size screen:
I am trying to move text next to my header, but it is not working using margins - when i try to move it all the text boxes move, even though each text box is a seperate div tag.
Here is my code for this part
<body>
<div id="wrapper">
<div id="header">
<h4><strong>Qtek Australia</strong></h4>
<div id="home">Home</div>
<div id="Aboutus">About us</div>
<div id="Contactus">Contact us</div>
<div id="Location">Location</div>
</div>
i am trying to move the home, about us, contact us and location to the right of the header "Qtek Australia", please help
You can try wrapping the h4 in another div and placing it where you want.
If this is the way you already tried, another way could be wrapping the three div you want to place on the left in one div, the other four in another and move around these two divs. It should be easier, even if you can get divitis doing so.
I will say that your document semantics are quite vague. You probably don't need to use STRONG inside your heading - it's conceivable that you really mean to emphasize the thought expressed in it, but I suspect that you only want the heading to appear bolder. Use CSS to achieve that, as in: h4 {font-weight:bold; font-size: 14em;}.
It's also conceivable that your page makes the most sense with the navigation starting at the fourth level of some topic, but it's highly unlikely; in the vast majority of cases, the navigation would exists higher up - under h1 or h2.
Your navigation itself would be more coherent if it was an unordered list.
<ul>
<li>Home</li>
<li>About Us</li>
...
</ul>
This also has the advantage of allowing you to style the navigation elements both as a set and individually.
You probably don't need to be wrapping your elements in all those divs. Most elements in HTML are containers - headings, lists, paragraphs, just about everything can be styled - including positioning and moving - by itself.
For instance, one means of positioning the navigation list to the right of the h4 would be to style the h4 with "display:inline", or "float:left", which would bring the following element (the list) onto the same line. There's a lot of different ways to go about that kind of positioning, and it's not even clear that this is what you're after.
Clarify what you mean; and it would help if you posted whatever CSS or JavaScript you're using.