oferh / ng2-completer

Angular 2 autocomplete component
http://oferh.github.io/ng2-completer/
MIT License
347 stars 172 forks source link

How to increase the width ng2-completer search field #253

Closed jaiparkashyadav closed 7 years ago

jaiparkashyadav commented 7 years ago

Hi Experts,

I am using ng2-completer, it is working fine. Just one problem , i am not able to increase its width.

I have added below in my component .css file but still it is not working and also getting some error in VSCode:

:host >>> .completer-dropdown { width: 100% !important; position: relative !important; }

Please help me out into this ... thanks in advance.

Regards, Jai

adriano-fonseca commented 7 years ago

I am interested too.

jaiparkashyadav commented 7 years ago

Hi All,

My issue has been fixed by putting below into component css file:

/deep/ .completer-input { display: block; width: 75%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

Regards, Jai