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:
Related
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.
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
I have a situation with the Sortable I can't seem to replicate in Plunker.
From what I can tell, Sortable slows down a lot because of something in change detection. Slow to the point of unusable. Visually, you can see the first animation, but then it very slowly refreshes as it slowly finishes change detection.
Here's a plunker that mimics what I have in my code.
http://plnkr.co/edit/veH2Y6CkFZ1Dc5jwcPWZ?p=preview
<kendo-sortable [data]="columns"
zone="abcdefg"
[animation]="true"
[activeIndex]="activeIndex"
itemClass="item"
emptyItemClass="emptyItem"
activeItemClass="activeItem item">
<ng-template let-column="item">
<div class="container" (click)="itemClick(column)">
<span class="col-name">
{{column.title || column.field}}
</span>
<span class="col-width">{{column.width}}</span>
</div>
</ng-template>
</kendo-sortable>
Basically the dialog is wrapped in a reusable component where I feed strings, templates or components into.
The "columns" array coming into the Input of SortableThingComponent is a copy of the array (all new'd Column objects) from a kendo grid.
Since I can't replicate the slow-down, I'm not sure what's going on. Does anyone see anything or have any tidbits about Sortable?
Edit
Here's an updated plunker that includes a grid. I noticed that if I didn't have data in the grid, the Sortable was faster. Workable, but still a little bit slow. The grid is virtual scrolling, page size 100.
http://plnkr.co/edit/hw8HaKpyZ0lRlVwF2tYp?p=preview
Edit 2
Updated the last plunker with data. Now I'm repro'ing the issue.
What can be done about this?
Here's a fix for now; detach the change detector for the grid component while the dialog with the sortable is open: http://plnkr.co/edit/yy1Z4rWC53vS3xCnxrWT?p=preview
constructor(private changeDetectorRef: ChangeDetectorRef) { }
this.changeDetectorRef.detach(); // when dialog opens
this.changeDetectorRef.reattach(); // when dialog closes
In the plunker, I had to add a this.changeDetectorRef.detectChanges() because of the way I'm opening the dialog.
For now, this is an OK workaround. I might play with the change detection strategy to get it all a little more efficient
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
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.