"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,
}}
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>
);
};```
I have a button and a CircularProgress component that are next to each other on the same row. I want to add a little bit of space between them. How can I achieve this? I've been trying using style etc but failing.
<Grid
container
direction="row"
// justify="space-between"
spacing={50}
>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
//code
}}
>
Import Games
</Button>
{showCircularProgress === true ? (
<CircularProgress style={{ marginTop: '1em' }} />
) : (
''
)}
</Grid>;
For that you would need to use marginRight to the direction of you next element
<Grid container direction="row">
<Button
variant="contained"
color="primary"
size="large"
style={{ marginRight: "32px" }}
>
Import Games
</Button>
<CircularProgress style={{ marginTop: "1em" }} />
</Grid>;
You could read more about CSS margin here
Simplified Working Example:
Im currently trying to display price (loaded via an api) under the days of a datepicker (a bit like google flights).
Exemple:
Im currently using Vue 3. Im trying to acheive this using Element-plus library. I can't find a way how to do it. Any suggestion (i checked Element-plus doc), or suggestion may another Vue 3 lib does exactly the same !
Here's my code
<link href="//unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"/>
<script src="//unpkg.com/vue#next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div class="grid-container-medium">
<div id="app">
<div class="d-flex justify-content-between">
<div class="block"><span class="demonstration">Single</span>
<el-date-picker :default-value="new Date(2021, 6, 28)"
placeholder="Pick a date"
type="date"
:disabled-date="disabledDate"
v-model="value1"></el-date-picker>
</div>
</div>
</div>
</div>
<script>
var Main = {
data() {
return {
value1: '',
value2: '',
disabledDate(time) {
return time.getTime() < Date.now()
},
};
}
};
;const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
</script>
In the last version of Element+ (v1.2.0-beta.1) they have added a new #cell slot in the DatePicker component.
Docs: DatePicker - Custom content
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template>
So, you can do it now with Element+ also.
You can use the PrimeVue Calendar component. It has a date slot:
<Calendar id="datetemplate" v-model="date_with_price">
<template #date="slotProps">
{{slotProps.date.day}}<br>
{{slotProps.date.price}}
</template>
</Calendar>
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',
},
]
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.