PrimeNG Calendar with Bootstrap

[Niiix]

Hi everyone!
How I can fix a problem?

If I use only PrimeNG, I am get:


If I use PrimeNG+Bootstrap, I am get:

(the right side was slid)

[sudheer]

It seems like Bootstrap framework styles are impacting PrimeNG styles. If it is mandatory to use Bootstrap then you should override the styles as it required.

[Niiix]

It seems like Bootstrap framework styles are impacting PrimeNG styles. If it is mandatory to use Bootstrap then you should override the styles as it required.

Yes, You are right. But there is his stile:


When i add in Chrome DevTools -> width: 260px; (for example) Calendar look pretty good, but i can't add it in stile

And one more.
If I paste p-calendar in tag <form></form> and click repeatedly, it look like:

[sudheer]

Those styles are generated one and you can't control them. But you can try with style classes mentioned in calendar documentation. Or If you can provide me the plunker example then I will try it.Thanks.

[Niiix]

i did this like this - in app.component.css add

Code: Select all

.ui-datepicker  {
  width: 270px;
}

And calendar look pretty good
THX!