So I have a radiobutton with a label. The problem is that the label and buttons are in the same line (row). I want my buttons to be underneath the label! Here is my code:
<v-radio-group row v-model="voltage" #click="consoles" label="SELECT
VOLTAGE:">
<v-radio
v-for="n in radioNames"
:key="n"
:label="n"
:value="n"
></v-radio>
</v-radio-group>
<v-radio-group row v-model="dependency">
It currently lookslike this:
As you can see the label and buttons are in the same line. How do I move to label to be above the buttons (top left. Like "S" should be placed exactly on top of the left button)?
Using p for label
As far as I can see from Vuetify API there is no option to set the label as column and the v-radio as row. A simple solution would be add the label as a separate element from the v-radio-group:
<p>SELECT VOLTAGE:</p>
<v-radio-group row v-model="voltage" #click="consoles">
<v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-radio-group>
Using v-layout
Based on #SnakeyHips answer there is a simple way to set the v-radio elements in a row. Use a <v-layout align-start row> to wrap only the radio buttons in a row:
<v-radio-group label="SELECT VOLTAGE:" v-model="row">
<v-layout align-start row>
<v-radio v-for="n in radioNames" :key="n" :label="n" :value="n" />
</v-layout>
</v-radio-group>
Here is an example of both solutions.
If you want the labels of each radio button to be above the button then you could handle all the layout manually yourself without the v-for loop like so:
<v-radio-group v-model="radioGroup">
<v-layout row wrap>
<v-flex column>
<p>Label 1</p>
<v-radio key=1 value=1>
</v-radio>
</v-flex>
<v-flex column>
<p>Label 2</p>
<v-radio key=2 value=2>
</v-radio>
</v-flex>
<v-flex column>
<p>Label 3</p>
<v-radio key=3 value=3>
</v-radio>
</v-flex>
</v-layout>
</v-radio-group>
Currently, v-radio-group in row mode is a flexbox. So you can give the legend element a width of 100% and this will force a line break. e.g.
.v-input--radio-group__input legend{
width: 100%
}
Related
I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.
Code is below:
<template>
<div class = "header">
<v-toolbar app prominent>
<v-layout-row>
<v-layout-column>
<v-img
max-width="100"
src="../../assets/large.png"
/>
</v-layout-column>
<v-layout-column/>
<v-layout-column justify-end>
<HeaderAccount colorTheme="#FFA200" />
</v-layout-column>
</v-layout-row>
<template v-slot:extension>
<v-tabs>
<v-row>
<v-col cols = '3'/>
<v-col cols = '6'>
<v-tab v-for="l in links" :key="l.path" :to="l.path">
{{ l.text }}
</v-tab>
</v-col>
</v-row>
</v-tabs>
</template>
</v-toolbar>
</div>
</template>
Any assistance would be greatly appreciated!
I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.
Otherwise, the tab styles will not be applied correctly.
So your template should be similar to:
<div id="app">
<v-app id="inspire">
<v-toolbar>
...default toolbar content
<template v-slot:extension>
<v-row>
<v-col cols="3" class="lime accent-1">Three cols item</v-col>
<v-col cols="6">
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
Item One
</v-tab>
<v-tab>
Item Two
</v-tab>
<v-tab>
Item Three
</v-tab>
</v-tabs>
</v-col>
</v-row>
</template>
</v-toolbar>
</v-app>
</div>
Test this at CodePen.
I have a mat-card that essentially has two columns inside of it; one column for displaying the image and the other for the mat-card contents. I currently set the two columns widths to half of their containers width to equally space them inside of the mat-card.
I am trying to modify my html code so that if the returned image path is empty, the mat-card contents occupy the entire width of the mat-card. I've tried doing so using the [ngClass] below but couldn't get it to work.
Is there an alternate way of doing this?
Below is my html code, I set the width of the two columns to half their containers width in the css file.
<mat-card class="mat-elevation-z1" id="card-div" >
<div class="img-container" *ngIf="blog.imagePath != ''" [ngClass]="blog.imagePath === '' ? 'width': '0%'">
<img [src]="blog.imagePath" [alt]="">
</div>
<div class="card-content" [ngClass]="blog.imagePath === '' ? 'width': '80%'">
<mat-card-header>
<mat-card-title> {{ blog.title }}</mat-card-title>
<mat-card-subtitle>
Published: {{blog.dateCreated}} <br>
Author: {{blog.author}}
</mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
<p >{{ blog.content }}</p>
<mat-action-row >
<button mat-raised-button *ngIf="adminIsAuthenticated" (click)="onDelete(blog.blogId)">Delete</button>
<button mat-raised-button *ngIf="adminIsAuthenticated" [routerLink]="['/edit', blog.blogId]">Edit</button>
<button mat-raised-button >Read More</button>
</mat-action-row>
</mat-card-content>
</div>
</mat-card>
The [ngClass] helps you to add some CSS classes to an element, while in your code you are trying to add width property that is set to 80%.
If you wanna use a [ngClass] then you can write it like so
[ngClass]="{ yourClassName: blog.imagePath === ''}"
and in CSS or SCSS file specify this class like so
.yourClassName {
width: 80%;
}
I have a radio list control that displays a list. I want to format the text with Bold and additional text in New Line. How do I do that in a Label. When I add a span, it is displaying on the UI.
<v-flex>
<v-radio-group v-model="radioGroup">
<v-radio
v-for="(accountType, index) in accountTypes"
:key= "accountType.key"
:label="accountType.name"
:value= "accountType.key"
></v-radio>
</v-radio-group>
</v-flex>
<v-flex>
<v-radio-group v-model="accountType">
<v-radio
v-for="(acctType, index) in accountTypes"
:key= "acctType.key"
:value= "acctType.key"
>
<span slot="label">{{ }}</span>
</v-radio>
</v-radio-group>
</v-flex>
Using Span slot solved the issue
This is my data:
data: () => ({
html: [
"../assets/html.png",
"../assets/css.png",
"../assets/scss.png",
"../assets/materialize.png"
]
})
I loop through like this, which shows the text stored in my data object:
<p v-for="img in html" :key="img">{{img}}</p>
However I can not use interpolation inside elements, so the following code does not work.
<v-flex xs6 md3 v-for="img in html" :key="img">
<img src={{img}} alt />
</v-flex>
How can I do this?
Edit: No errors, but not working yet: The HTML link looks like this (working):
</v-flex>
<v-flex xs6 md3><img src=../assets/html.png alt /></v-flex>
</v-layout>
src="/img/html.6ec9ec76.png"
Rendered by vue: src="../assets/materialize.png
Vue does not handle it correctly it seems!
Try to use <img :src="img" alt /> instead
string interpolation can only be used to display for value in attribute you have to bind it:
<v-flex xs6 md3 v-for="img in html" :key="img">
<img :src="img" alt />
</v-flex>
I'm working on a web application, and I have a datatable where you can filter via an API call. Upon adding filters, Material Design chips get added in horizontal orientation. When I add too much chips, my text in my div goes over the text above it.
This is my code:
<!-- ABOVE IS ANOTHER MAT TOOLBAR ROW WITH 3 INPUTS AS SHOWN IN THE PICTURE BELOW -->
<mat-toolbar-row class="controls">
<div class="col-md-9">
<span>Filtering {{getTotalDataSize()}}
<span *ngIf="type === 'user'" i18n>users</span>
<span *ngIf="type === 'role'" i18n>roles</span>
<span *ngIf="type === 'entitlement'" i18n>entitlements</span>
<span *ngIf="type === 'application'" i18n>applications</span>:</span>
<span *ngIf="clusterConditions.length == 0"> no filters applied</span>
<div *ngIf="clusterConditions.length > 0 || isInGroupByMode()">
<mat-chip-list>
<mat-chip *ngFor="let condition of clusterConditions" [selectable]="false" [removable]="true" (removed)="removeCondition(condition)">
<span *ngIf="condition.attr.name">{{condition.attr.name | capitalize}} {{condition.match}} "{{condition.val}}"</span>
<span *ngIf="!condition.attr.name">Contains "{{condition.val}}"</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<mat-chip *ngIf="isInGroupByMode()" [selectable]="false" [removable]="true" (removed)="changeGroupByMode(false)">
<span>Grouped by {{groupByAttribute.name}}</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</div>
<div class="col-md-3">
<mat-paginator #paginator [length]="getDataSize()" [pageIndex]="0" [pageSize]="10"></mat-paginator>
</div>
</mat-toolbar-row>
I tried fiddling with some display: block/flex; and box-sizing: border-box;, but I can't seem to figure it out!
An example of what it looks like when adding too much chips:
I'd like the 'Filtering ...' to show beneath the input fields!
EDIT: Wanted behaviour:
Note: The row has two columns, the chips column and the navigator on the right. When there are to much pills, a next row has to start as shown in the picture above, in the column div of the pills, not of the paginator.
Either the pills start next to the 'Filtering ... :' or beneath it (doesn't really matter)
Thanks in advance!