Using https://bootstrap-vue.js.org/docs/components/table in vue/cli / "bootstrap-vue": "^2.1.0" I did not find how to set align for all columns and change it for
any column. I tried as:
<b-card-body>
<b-table responsive="sm" striped hover small :items="users" :fields="usersFields" align-v="end">
<template v-slot:cell(id)="data">
<div class="-align-right">{{ data.value }}</div>
</template>
<template v-slot:cell(status)="data" >
<div class="-align-left">{{ getDictionaryLabel( data.value, userStatusLabels ) }}</div>
</template>
But failed as all columns are centered.
How correctly ?
Class -align-right and -align-left are not valid Bootstrap v4 CSS class names. The Bootstrap text alignment classes are:
text-right
text-left
text-center
See https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment
The way I like most is setting in the field options:
usersFields: [
{
key: 'id',
label: 'ID',
thClass: 'text-right',
tdClass: 'text-right',
},
{
key: 'status',
label: 'Status',
thClass: 'text-left',
tdClass: 'text-left',
},
]
Related
hey i wanted to know how can i delete the border of the text area of mui with tailwind if possible and how can i add dir auto to this also
i want is to display the direction According to the language
return (
<div className="flex items-center">
<Textarea
minRows={4}
maxRows={4}
componentsProps={{
textarea: {
maxLength: 300,
dir: "auto",
},
}}
name="body"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.body}
error={formik.touched.body && Boolean(formik.errors.body)}
placeholder="Text (optional)"
required
variant="soft"
disabled={!loggedIn}
className=" flex-1 m-2 p-2 bg-gray-50 !outline-none !border-none rounded-md resize-none "
endDecorator={
<Typography className="text-xs ml-auto text-gray-500">
{300 - formik.values.body.length} character(s)
</Typography>
}
/>
</div>
);
};```
"Missing form label" accessibility issue in Wave tool when using Table pagination. How do I fix it.
<TablePagination
ref={paginationComponentRef}
ActionsComponent={PaginationActionsComponent}
component='div'
page={page}
rowsPerPageOptions={5, 10, 25]}
rowsPerPage={0}
intl={props.intl}
count={props.count || 0}
onChangePage={props.onChangePage || handleChangePage}
onChangeRowsPerPage={props.onChangeRowsPerPage || handleChangeRowsPerPage}
backIconButtonProps={{
'aria-label': props.intl.formatMessage(messages.prev, props.customTexts),
}}
nextIconButtonProps={{
'aria-label': props.intl.formatMessage(messages.next, props.customTexts),
}}
/>
output rendered html:
<div class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot">
<div class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiSelect-selectMenu MuiInputBase-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="mui-8736 mui-43" id="mui-43">5</div><input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="5"><svg class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path>
</svg></div>
If you don't want to change the pagination select design then use this
SelectProps={{
inputProps: {
'aria-label': 'rows per page',
'aria-labelledby': 'rowsPage',
},
id: 'rowsPage',
}}
Try to add the below code in your <TablePagination /> tag.
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
I'm building a registration form, and have to handle multiple checkboxes generated through *ngFor structural directive.
Template:
<div class="form-group">
<label class="col-lg-3 control-label">Response Type</label>
<div class="col-lg-7">
<div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
<label>
<input type="checkbox" name="responseTypes" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
</label>
</div>
</div>
</div>
TS model object:
client.responseTypes = [
{ value: 'type1', checked: false},
{ value: 'type2', checked: true },
{ value: 'type3', checked: true }
];
The actual values behind the scene checked or unchecked are stored correctly. But, the checkboxes do not show the correct value.
If one of the three objects.checked == false, all checkboxes will show unchecked
Only if all three objects.checked == true, all three will be checked in the form.
I tried fiddling with [value]="client.responseTypes[i].checked" and [checked]="client.responseTypes[i].checked" on the input element, but to no success.
Any pointers in the right direction are massively appreciated.
Regards, Chris
the syntax is ok, well, you can do too
<input type="checkbox" name="responseTypes" [(ngModel)]="type.checked">
the problem is in other place (when you defined the client -I think you write some like this.client.responseTypes=...-), you can write
{{client |json }}
to check it
Alright after trying to wrap my head around why my local application wasn't showing the result I wanted, I started to copy and paste my form-group out of the <form></form> element it was in.
Ta-daa, it works now.
FYI: Placing *ngFor checkboxes inside a <form></form> element results in unwanted behaviour.
In angular every model bind with name , means you need to give unique name to each Form elements`
For Example:
<div class="form-group"><label class="col-lg-3 control-label">Response Type</label>
<div class="col-lg-7">
<div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
<label>
<input type="checkbox" name="type.id" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
</label>
</div>
</div>
</div>
Object :
client.responseTypes = [{id: '1', value: 'type1', checked: false},
{id: '2', value: 'type2', checked: true },
{id: '3', value: 'type3', checked: true }];
And now Check :) Thank you
I'm setting the selected option of a v-select using v-model, so when I open the screen it already comes with the result. That's working fine until I set autocomplete property in v-select tag. When I do that the option is chosen but the select doesn't show it.
Is there any issue with the autocomplete feature or it's the standard behavior for the component?
Vue.use(Vuetify);
var app = new Vue({
el: '#app',
data() {
return {
selected: 2,
country: [{
text: 'USA',
value: 1
}, {
text: 'Canada',
value: 2
}, {
text: 'England',
value: 3
}, {
text: 'France',
value: 4
}]
}
}
})
<script src="https://unpkg.com/vue#2.4.1/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app>
<v-card class="grey lighten-4 elevation-0">
<v-card-text>
<v-container fluid>
<v-layout row wrap>
<v-flex xs4>
<v-flex>
<v-subheader>Origin Country</v-subheader>
</v-flex>
<v-flex>
<v-select
:items="country"
v-model="selected"
label="Select"
class="input-group--focused"
single-line
bottom
autocomplete>
</v-select>
</v-flex>
</v-flex>
<v-flex>
Selected: {{ selected }}
</v-flex>
</v-layout>
</v-container>
</v-card-text>
</v-card>
</v-app>
</div>
Here it is jsfiddle link: https://jsfiddle.net/vcmiranda/huj9L4bq/
Thanks.
I test your code, vuetify will inject its classes after yours, after delete this line in v-select, it works.
class="input-group--focused"
Alternatively, using 'id' instead of 'class' is another option.
I was following the example given on Dynamic Forms from the Angular 2 documentation (https://angular.io/docs/ts/latest/cookbook/dynamic-form.html). In this example you are shown how to create forms dynamically, based on metadata that describes the business object model.
This roughly looks as follows:
I have a YesNoQuestion class that describes how my questions are formatted.
import { QuestionBase } from './question-base';
export class YesNoQuestion extends QuestionBase<string> {
controlType = 'radio';
options: {key: string, value: string}[] = [];
constructor(options: {} = {}) {
super(options);
this.options = [
{key: 'true', value: 'Yes'},
{key: 'false', value: 'No'}
];
}
}
Each form is generated in my dynamic-form.component:
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-group">
<df-question [question]="question" [form]="form"></df-question>
</div>
<div class="form-row">
<button type="submit" [disabled]="!form.valid">Save</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br>{{payLoad}}
</div>
</div>
The dynamic-form calls the dynamic-form-question for each single question dynamic-form-question.component:
<div [formGroup]="form">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<div class="form-group" *ngSwitchCase="'radio'">
<div *ngFor="let opt of question.options">
<input type="radio" [formControlName]="question.key" [value]="opt.key" /> {{opt.value}}
</div>
</div>
... Some extra form types ...
</div>
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>
Now I can generate a form by simply inserting a questions object like the following:
let questions: QuestionBase<any>[] = [
new YesNoQuestion({
key: 'a',
label: 'Label A',
}),
new YesNoQuestion({
key: 'b',
label: 'Label B',
}),
new YesNoQuestion({
key: 'c',
label: 'Label C',
}),
new TextareaQuestion({
key: 'd',
label: 'Label D',
}),
Now I am looking for a way to let these question be dependent of each other. I for example only want to see question A, and if yes is answered for question A I want to show question B. If no is answered I want to show question C.
Would something like that be implementable in my current approach? I haven't found a good tactic yet, I tried to add an attribute hide but didn't know how to reference other field values.