I'm trying to right align a set of radio buttons in a Vuetify grid:
<v-layout row wrap align-start justify-end fill-height>
<v-flex xs12 class="text-xs-right">
<v-radio-group row hide-details>
<v-radio label="Public"></v-radio>
<v-radio label="Private"></v-radio>
</v-radio-group>
</v-flex>
</v-layout>
They always stay left though. How is right alignment achieved?
Fiddle here:
https://jsfiddle.net/80mq5rhf/
You could put a <v-spacer> inside your <v-radio-group>. That will fill the available space on the left of the buttons.
<v-radio-group row>
<v-spacer></v-spacer>
<v-radio label="Public"></v-radio>
<v-radio label="Private"></v-radio>
</v-radio-group>
Another way would be to add an offset to your <v-flex>
<v-flex xs12 offset-xs8>
<v-radio-group row>
<v-radio label="Public"></v-radio>
<v-radio label="Private"></v-radio>
</v-radio-group>
</v-flex>
Related
I am working on vuetifyjs and currently stuck while trying to achieve this(below) in a vuetify way.
,
Please correct me if i am wrong, align-self-end must align v-flex to the end of the v-layout?
This is what I have tried.
Any suggestions would be helpful
https://jsfiddle.net/fierce_trailblazer/bp3f1wct/5/
It is at the end of v-layout, but v-layout is only as big as it needs to be because you didn't set a height attribute on it nor v-container.
Also, because v-flex items have a flex-grow property of 1, they will fill all the remaining space, meaning that there is no empty space left to 'align' the separate items.
Finally, you're working with Vuetify 0.16.6 (in your fiddle), which doesn't have the align-self-xxxxx props according to the v1 Vuetify docs.
What you can do in your situation, is use the flex-grow: 1 property of the first v-flex item, and replace the thing you want at the bottom with a normal div (which has flex:grow: 0) so it's automatically pushed to the bottom.
Alternatively: get rid of the v-flex altogether, because you're not using the column as a grid, so you don't need the subdivisions. Then use justify-space-between on the column layout.
<div id="app">
<v-container fluid style="height: 400px;">
<v-layout class="fill-height layout" column>
<v-flex shrink class="topitem">
<v-layout class="layout" row>
<v-flex xs12>
<v-btn primary dark>Normal vflex 1</v-btn>
</v-flex>
<v-flex xs12>
<v-btn primary dark>Normal vflex 2</v-btn>
</v-flex>
</v-layout>
</v-flex>
<div class="bottomitem">
<v-btn primary dark>Should be fixed to bottom</v-btn>
</div>
</v-layout>
</v-container>
</div>
Here's a working fiddle that achieves what you want: https://jsfiddle.net/q69wuk28/13/
Here's an article about flexbox, which is used by vuetify's v-layout/v-flex components: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div id="app">
<v-container fluid pa-0 ma-0 style="backgroundColor:yellow">
<v-layout class='page' pa-0 ma-0 style="backgroundColor:red;height:100vh" column >
<v-flex xs12 pa-0 ma-0>
<v-layout pa-0 ma-0 row>
<v-flex xs12 pa-0 ma-0><v-btn primary dark>Normal vflex 1</v-btn></v-flex>
<v-flex xs12 pa-0 ma-0 ><v-btn primary dark>Normal vflex 2</v-btn></v-flex>
</v-layout>
</v-flex>
<v-flex xs12 pa-0 ma-0 style="display:flex">
<v-btn style="align-self:flex-end" primary dark>Should be fixed to bottom</v-btn></v-flex>
</v-layout>
</v-container>
</div>
Your problems:
container was not on a full page
Vuetify deprecate v-flex block, now you can add to classes '.d-flex', position too writing in a class like "justify-space-between"
I have tried loads of different options with the following code, however, I can't get this to fill the remaining height. (The second layout should fill the remaining height) what am I doing wrong here?
<template>
<div class="earnIndex">
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex
v-for="(offer, index) in offers"
:key="index"
xs2
class="pa-1"
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card>
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
EDIT:
So here is my new code:
<template>
<v-layout column wrap>
<v-flex>
<v-layout row wrap class="red">
<v-flex
v-for="(offer, index) in offers"
:key="index"
class="pa-1"
xs2
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow align-content-start>
<v-card height="100%">
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</template>
This creates the following:
I would like the card with "test" to start straight after the links at the top, and then fill the rest of the height.
Thank you in advanced for your help!
Regards,
Josh
Try using column fill-height on the right side, and then grow on the v-flex...
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
<v-btn>{{ offer.siteName }}</v-btn>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card class="fill-height">
<p> test </p>
</v-card>
</v-flex>
</v-layout>
</v-container>
https://codeply.com/p/bwE5ifP4Pe
You don't need as much markup in your scenario and can cut this down to just a few lines.
I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 2.0 (https://vuetifyjs.com/en/components/grids/).
<div class="d-flex fill-height" style="flex-direction:column">
<v-row class="blue">
<v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
<v-btn>{{ i }}</v-btn>
</v-col>
</v-row>
<div class="fill-height" style="background-color: salmon">Down</div>
</div>
Codesandbox example
I have a vue.js application and I'm using vuetify. I have a table that looks like this:
When I shrink the width of the viewport, it ends up looking like this:
I don't like this view. I'd prefer to have the dropdown be shoved under the row description and have the checkboxes stay aligned with the ones on the other rows, like this:
The problem is that the order of items in each row goes as follows: description, dropdown (if applicable to row), checkbox 1, checbox 2, checkbox 3. The only way I can see the dropdown falling below the description is if it's put at the end of the row. But can that be done with CSS below certain screen widths?
Here is my code:
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
<v-flex md4 v-if="item.hasDropdown">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
You'll note that I'm using vuetify's flex classes such as sm2, md1, sm2, etc. These are great for adjusting the number of columns on different screen sizes, but is there something similar in vuetify for determining different layouts based on different screen sizes?
You can utilize the order classes for this purpose. Just add order-lg/order-md etc according to your need. Here in your example i'm using order-md. Customize according to your needs. Here's how I have done it:
Instead of v-flex, you have to use v-col
for grid use md=9 style instead of md9
your page must have v-app at root level, otherwise this will not work.
.........................
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-col xs=12 sm=6 :md="item.hasDropdown ? '5' : '9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-col>
<v-col md=4 v-if="item.hasDropdown" order-md="1">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-col>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
SOLUTION 2
Solution 1 is more like vuetifyish way to do the ordering. For plain css way:
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
<v-flex md4 v-if="item.hasDropdown" class="v-select">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
And Here's the CSS:
.v-chkbox {
order: 1;
}
.v-select {
order: 2;
}
*Don't forget the media query which I didn't add.
** To know more about css ordering check the MDN and CSS Tricks link.
Cheers :)
I have a problem with the code shown below. I want it to be fixed, therefore filling the height and the width, eliminating the scrollbar if possible.
Here is code sample:
<template>
<div class="mt-10 pt-10">
<v-container fluid ma-0 pa-0 fill-height>
<v-layout row wrap class="ma-0 pa-0">
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card height="900" class="ma-0 pa-0" id="rounded-card">
<v-img
src="img.jpg"
height="100%"/>
</v-card>
</v-flex>
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card class="ma-0 pa-0 elevation-5" height="900">
<item_att/>
<v-divider/>
<item_pro/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I want my website to have similar layout to this page: https://nephos.cssninja.io/product.html
Here's my sample page: https://thestackoverflow.netlify.com/single
I want the textbox to be 6 column on screen greater than sm and 12 column for mobile.
I use the vuetify grid but it does not work as expected.
this is my code:
<v-card-text>
<v-layout warp>
<v-flex xs12 sm6 class="pa-1">
<v-text-field
ref="name"
v-model="password.name"
label="Name"
solo
placeholder="Full Name"
counter="25"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-1">
<v-combobox
v-model="password.keys"
label="Add keys"
chips
solo
multiple
>
<template slot="selection" slot-scope="data">
<v-chip :selected="data.selected" close #input="remove(data.item)">
<strong>{{ data.item}}</strong>
</v-chip>
</template>
</v-combobox>
</v-flex>
</v-layout>
In the mobile view, the elements are in the same row.
What can be the reason, and how can I fix it?
This is the mobile version:
You have a typo on the "v-layout" should be wrap not warp.
https://codesandbox.io/s/my49o8vo9y