Reputation:
When i write the following code ( see complete CodePen test )I cannot get the radio-group and tthe firstName & lastName on the same row... I want to wrap them only on smaller screen width ( mobile )
<div id="app">
<v-app id="inspire">
<v-container grid-list-xl text-xs-center fluid>
<v-layout row wrap>
<v-flex xs8 offset-xs2>
<h4>Thank you for contacting us!<h4>
<v-container>
<v-layout row wrap justify-left>
<v-flex xs-6 class="wrapper-l">
<form>
CONTACT FORM
<v-container>
<v-layout column wrap justify-center>
<v-flex>
<v-container class="cont-2">
<v-layout row wrap justify-left>
<v-flex>
<v-radio-group row>
<v-radio class="radio" label="Mrs"></v-radio>
<v-radio class="radio" label="Mr"></v-radio>
</v-radio-group>
<v-text-field class="small-tf" label="first Name"></v-text-field>
<v-text-field class="medium-tf" label="family Name"></v-text-field>
</v-flex>
</v-layout>
</v-container>
<v-text-field label="email"></v-text-field>
<v-text-field label="message"></v-text-field>
</v-flex>
</v-layout>
<v-layout row no-wrap>
<v-flex>
<v-btn>CLEAR</v-btn>
<v-btn>SUBMIT</v-btn>
</v-flex>
</v-layout>
</v-container>
</form>
</v-flex>
<v-flex xs-6 class="wrapper-r">
INFOS
<v-card light flat>
<h4>email address </h4>
<p>[email protected]</p>
<h4>PHONE</h4>
<p>ding-ding /dong-dong</p>
<h4>ADDRES</h4>
<p>Our Company<br/>Somewhere<br/>on the planet</p>
<h4>WE ARE SOCIAL TOO</h4>
<p>
<a href="#">FBK</a>
<a href="#">LKD</a>
<a href="#">TWT</a>
</p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
here is the captured output :
Upvotes: 0
Views: 7026
Reputation: 4544
Check the docs on Vuetify's grid system: https://vuetifyjs.com/en/layout/grid#introduction
There are several issues in your code structure, e.g. there is no justify-left
but justify-start
and you should set the breakpoints if you want to wrap it for the different screen sizes.
Something like this should do:
<v-container class="cont-2">
<v-layout row wrap>
<v-flex xs12 sm4>
<v-radio-group row>
<v-radio class="radio" label="Mrs"></v-radio>
<v-radio class="radio" label="Mr"></v-radio>
</v-radio-group>
</v-flex>
<v-flex xs12 sm4>
<v-text-field label="first Name"></v-text-field>
</v-flex>
<v-flex xs12 sm4>
<v-text-field label="family Name"></v-text-field>
</v-flex>
</v-layout>
</v-container>
Upvotes: 1