Topic: A problem in mdb date picker
I am using mdb date picker input when I change the web width and the text is long the text goes out from the board ...picture attached: the date picker input text is "beginning of crop cycle" enter image description here
What is exactly the effect you would like to achieve? If you would like the entire text to be visible, no matter how wide the screen is, I suggest creating a responsive layout:
<template>
<mdb-container>
<mdb-row>
<mdb-col sm="12" md="6" > <mdb-datepicker /> </mdb-col>
<mdb-col sm="12" md="6" > <mdb-datepicker /> </mdb-col>
</mdb-row>
</mdb-container>
</template>
Or you can use text ellipsis, which will cut the label and add ... at the end. This feature will be added to our datepicker in the future, but in the meantime, you can just use the following styling:
.mdb-datepicker label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
Kind regards, Magdalen
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.8.1
- Device: web
- Browser: browser
- OS: Search Results Web results Linu
- Provided sample code: No
- Provided link: Yes