Angular 2+ Override Global CSS

Hello - I'm trying to figure out how to override CSS to make an input box larger.

I downloaded code from github for an ng2 completer (that provides typeahead functionality).

I'm trying to make the input box tied to the <ng2-completer> larger and am not having a lot of luck.

I'm seeing some options on-line on items to try...but many of them seem to be depreciated. I do not want to spend time trying to learn something that is being thought I would see if someone could provide some guidance on which method to pursue.

Some sites seem to say that specifying a css style in the components .css file...starting wit with ":host" could do the trick...but I tried that and it did not work.
Css entry:
:host .completerWidth {
  width: 650px;

used in HTML by:
<ng2-completer class="completerWidth"
...other completer settings...
closing >

That does not on a regular input box...but not the ng-completer.

Two other items I have tried...

I tried specifying styling in the global css file and using it in the component with the luck.

I have also tried viewing the underlying code of the ng completer and determining where the width is specified so I can change it...and have not been able to pinpoint the correct place.

Any tips you can provide would be greatly appreciated.  

Cynthia HillLead ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

if you're sure about the class you need to override, try this :!important_exception

:host .completerWidth {
  width: 650px !importan;

Open in new window


leakim971 meant to post:
:host .completerWidth {
  width: 650px !important;

Open in new window

Cynthia HillLead ConsultantAuthor Commented:
leakim971 and it_saige - Thanks for the reply!

Still not working for the <ng2-completer>...

As with my other works fine for a regular input box...but cannot get anything to change the width of the ng completer.

I will have to search around some more in the files included in download from github (which I will do later this evening).

I must be missing a css file in my searching of the ng completer from github.

I only found 1 css file in the folder I thought I should be looking in and played around with that a bit...but it did not help either.

Maybe there is another css file hiding from me?

I will post back later this evening.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

could you share a link to your page or post the RENDERED html (use save it with Chrome/Firefox) and please help us locate the field
Cynthia HillLead ConsultantAuthor Commented:
Leakim971 - The page I am playing with is on an intranet site, so I am not able to provide a link.

Essentially, I have two versions of the input box just for testing purposes (one using the ng completer and one regular input). I apply the custom formatting to both...and it only works on the regular input box (the 1st one in the code below).

See sample code below:
    <input class="your-class" placeholder="Enter ID" [(ngModel)]="idSearch" textSearching="'Please wait...'"/>
                      <ng2-completer class="your-class"
                                    [placeholder]="'Enter ID or Name'"
                                    [textSearching]="'Please wait...'"
                                    [clearSelected] = "true">

Open in new window

and css:
.your-class {
  width: 750px;

Open in new window

also tried css:
:host .your-class {
    width: 650px !important;

Open in new window

I have done a more in-depth search of the ng2 completer download from github to try and find where the size is set...but no luck.

I did notice I can set the input box to null after the user clicks a selection using a "[clearSelected] = "true"" I may end up going that route instead so I do not need to worry about the selected text fitting into the text box??

At the end of the day...I need the input box to drive what is displayed in the table...(which is working fine) I might be okay with not showing the selection in the input box itself...since it will be displayed in a table.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
here the input made by the ng-completer :
<input _ngcontent-c0="" autocapitalize="off" autocomplete="off" autocorrect="off" class="completer-input ng-valid ng-dirty ng-touched" ctrinput="" type="search" ng-reflect-klass="completer-input" ng-reflect-is-disabled="false" ng-reflect-clear-selected="true" ng-reflect-clear-unselected="false" ng-reflect-override-suggested="false" ng-reflect-fill-highlighted="true" ng-reflect-open-on-focus="false" ng-reflect-open-on-click="false" ng-reflect-select-on-click="false" ng-reflect-select-on-focus="false" name="" placeholder="" maxlength="524288" tabindex="0" ng-reflect-model="">

Open in new window

the main class is : completer-input

so, to start, try :
.completer-input {
    width: 650px !important;

Open in new window

Cynthia HillLead ConsultantAuthor Commented:
Still no luck...I also tried adding :host in case that helped (I have seen that in a lot of examples on-line).
:host .completer-input {
      width: 650px !important;

Open in new window

But...neither works :(

I noticed on the ng-completer demo site ( ...some of the ng completer inputs are wider. Trying to see if I can determine what is different about those(?).

Looks like the last sample one on the page looks similar to the way mine formats on my page.
in their demo :     width: 100%;
.form-control {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    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;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

Open in new window

Cynthia HillLead ConsultantAuthor Commented:
Was not able to find a way to do what i was hoping to do. Going with a workaround mentioned in my post.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.