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
Related
I am working on this feature where i have multiple cards with a toggle inside it.
I am getting the values for the card from the api, and using the
When i am trying to click on the toggle, the toggle on the cards opens where by i want to display the particular card toggle.
Here is the code for it:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle.collapse>
{{ value.name }}
</b-link>
<b-collapse id="collapse">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
Please assist
The problem is with the same id attribute of the collapse. You need to change the id assignment. Try the code below:
<div v-for="values in api" :key="values.id">
<card>
<li>
<b-link v-b-toggle="`collapse-${values.id}`">
{{ value.name }}
</b-link>
<b-collapse :id="`collapse-${values.id}`">
<pre>
{{ value.address }}
</pre>
</b-collapse>
</li>
</card>
<div>
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%;
}
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>
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%
}
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!