Topic: A problem in mdb date picker

eladhr83 free asked 4 years ago

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

Magdalena Dembna staff answered 4 years ago

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:

            <mdb-col sm="12" md="6" > <mdb-datepicker /> </mdb-col>
            <mdb-col sm="12" md="6" > <mdb-datepicker /> </mdb-col>

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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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