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).
https://github.com/oferh/ng2-completer

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 depreciated...so 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 work...works 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 ngcompleter...no 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.  

Thanks,
Cynthia HillLead ConsultantAsked:
Who is Participating?
 
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:
  <div>
    <input class="your-class" placeholder="Enter ID" [(ngModel)]="idSearch" textSearching="'Please wait...'"/>
    
       
                      <ng2-completer class="your-class"
                                    [datasource]="dataService"
                                    [minSearchLength]="2"
                                    [placeholder]="'Enter ID or Name'"
                                    [inputClass]="'form-control'"
                                    [fillHighlighted]="false"
                                    [textSearching]="'Please wait...'"
                                    (selected)="onCompleterSelect($event)"
                                    [clearSelected] = "true">
                     </ng2-completer>
    
               </div>

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"" setting...so 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)...so I might be okay with not showing the selection in the input box itself...since it will be displayed in a table.
0
 
leakim971PluritechnicianCommented:
if you're sure about the class you need to override, try this :  https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

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

Open in new window

0
 
it_saigeDeveloperCommented:
*NO POINTS*

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

Open in new window


-saige-
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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

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

As with my other attempts...it 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).
https://github.com/oferh/ng2-completer

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.
0
 
leakim971PluritechnicianCommented:
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
0
 
leakim971PluritechnicianCommented:
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

0
 
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 (http://oferh.github.io/ng2-completer/#) ...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.
0
 
leakim971PluritechnicianCommented:
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

0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.