igx component styling with css

Using the latest of everything (12.0.1 Angular/CLI/IgniteUI/etc.).

I’m trying to style a bunch of components in a blue background:

• checkbox
• combo/dropdown
• button

I want them all to match:

• For the checkbox, I want the check, the box, and the text to be white and the fill of the checkbox to be a light blue (#00C7FE just an example).
• For the combo/dropdown, white fill and that light blue for the text/boxes/blocks signifying it is selected.
• For the button, similar to combo/dropdown. This is the easiest and I have already been able to modify it.

I also need the combo/dropdown to be on the same line as the text labeling it (start/end WW) and the current parameter from the scenario details to be selected, which isn’t working, even using [(ngModel)]. Here’s an image of what I have right now.

My current CSS:

igx-checkbox {
    color: white;
}

button {
    color: #00C7FE !important;
    background-color: white;
    margin: 10px;
}

igx-combo {
    color: #00C7FE !important;
    background-color: white;
}

I’ve tried styling by a bunch of different features I can see when I inspect the checkbox and combo, but none of them seem to have any affect.

My current HTML:

    

        

        

            Scenario: {{scenario.name}} 
 Families: {{scenario.families}} 
 Start WW:
            
            {{scenario.active !== 'Active' || scenario.locked || scenario.scenarioType == 'Actual' ? scenario.startWw : ''}}
        
        

            Locked: 
            
 Facilities: {{scenario.facilities}} 
 END WW:
            
            {{scenario.active !== 'Active' || scenario.locked || scenario.scenarioType == 'Actual' ? scenario.endWw : ''}}
        
        

            Private: 
            

            Update Horizon
        
    

I’m having a similar issue with advanced/excel filtering in removing the blaring pink that shows up everywhere. I’m hoping you guys can give me a way to change it to match the theme of the app I’m building. Those checkboxes don’t work for me there, either. Everything else in that frame is fine, though.

Hello Chris,

Thank you for posting on our forums.

Overwriting css classes is not the intended way of styling our components, as it does not guarantee consistency between versions, since some variables might get renamed over the course of code refactoring. The best way to style components would be to use Theming.

I would recommend checking the following pages from our documentation regarding each element, where you can find a sample how to style them:

Checkbox
Button
Combo

Regarding the combo being on the same line as the text labeling it, wouldn't you achieve that by not using <br> tag which makes it go on a new line?

Regarding stylig advanced filtering, this is also available on our website here:

Advanced Filtering / Excel Style Filtering

Please let me know if you have any further questions.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

That is highly unhelpful. All the theming is in SCSS and I am attempting to style in CSS, as I mentioned already. Also, if you look at my HTML code again, the "<br/>" is BEFORE the text identifier for the field and there is not another instance before the combo.

Once again, I feel you guys have wasted an attempt to answer something, causing another 24 hours+ before a decent response that might actually help me accomplish what I'm asking for.

Now. Again. I need a CSS solution for styling Checkbox, Button, Combo, Advanced Filtering, Excel Style Filtering. I also need a solution for keeping a Combo on the same line as text within a div. I have Google searched and found nothing that actually works because IGX components are different from the usual ones.

Hello,

As per my previous reply, overwriting css classes is not the intended way to style our components, however if you do not have other option you can do that using ng-deep, as styles are capsulated and you need it to pass it to child components.

I have prepared a sample for you for further reference:

https://stackblitz.com/edit/github-s6zits?file=src%2Fapp%2Flists%2Fcombo%2Fcombo-styling%2Fcombo-styling.component.scss

Please let me know if you have further questions.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

I am still unable to accomplish the following:

• style the checkbox and combo
• have the label and combo be inline
• tie a selected value to the combo so it displays a checked option upon loading
  • this failed in your example, using an array of string and this.selection=this.weaponsData[0];

Here is my current HTML:

    

        Scenario: {{scenario.name}}

        Families: {{scenario.families}}

        Start WW: 
        
    
    

        Locked: 

        Facilities: {{scenario.facilities}}

        End WW: 
        
    
    

        Private: 


        Update Horizon
    

Here is my current CSS:

div>span {
    color: white;
}

button,
.igx-input-group__wrapper {
    color: #00C7FE !important;
    background-color: white;
    margin: 10px;
}

label {
    display: inline;
}

igx-combo {
    color: #00C7FE !important;
    background-color: white;
    height: 36px;
}

#container {
    display: flex;
    flex-direction: row wrap;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto;
}

#container>div {
    width: auto;
    height: auto;
    margin: 10px;
}

Please update example.

Thanks.

Hello,

I have updated the sample a bit:

https://stackblitz.com/edit/combobox-cssoverwrite?file=src/app/lists/combo/combo-styling/combo-styling.component.scss

On my end all elements are styled with lightblue background and white font color(except checkbox when not selected, as the text would not be visible due the white background).

I have also have label + combo on the same line. Actually all elements will be on the same line if there is enough space, but reducing the width of the window will put the button and checkbox on another line, while keeping label + combo on the same.

I have also binded the value of the checkbox. If you are looking to set it using the combo API, you should use:

this.combo.selectItems([‘Long Sword’, ‘Katana’]);

https://es.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcombocomponent.html#selectitems

Should you have any further questions, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

The only reason the styling works is because of the SASS components. The CSS components do nothing (aside from the button CSS I shared).

Your limit on the combo isn't working, the toast to say what the limit is doesn't work, either.

Using the selectItems throws an error that it's not a function. Using the setSelectedItem also doesn't work, despite being in the API.

No matter what I do, the combo won't stay on the same line as the label or even raw text.

EDIT: I am unable to utilize Angular Material because when I import it I get a million errors stating igx components are not known and each of their attributes/methods is also unknown.

Would a select/dropdown work better for this? I would appreciate if you update the sample with this sample's implementation. I will attempt to accomplish it on my own in the meantime.

Hello,

IgxCombo uses IgxDropDown as internal component, so in a way we re already using it.  I have tested selectItems and there is no error, I updated the sample:

https://stackblitz.com/edit/combobox-cssoverwrite?file=src%2Fapp%2Flists%2Fcombo%2Fcombo-styling%2Fcombo-styling.component.scss

And here is the sample you have linked with same classes used for the dropdown to change the color of the items background and foreground:

https://stackblitz.com/edit/github-tvness?file=src/app/dropdown-sample-4/dropdown-sample-4.component.scss

Can you please post a sample of your code on stackblitz where I can run it and see what the issue with positioning the elements is?

Looking forward to your reply.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics 

Figured out the selected value in Dropdown version using the [selected] property of igx-dropdown-item. Still can't get the Checkbox or dropdown TEXT color to be white.

Was able to change the background color of both, though, using:

igx-input-group.igx-input-group,
igx-checkbox.igx-checkbox {
    background-color: white;
}

I don't really want the background color to change, just the black ornaments and text on both.

Maybe you could give me another hint as to how to get the TEXT color to change?

Hello,

The class for the dropdown items is .igx-drop-down__item, however currently the background is also white, so the text would not be readable. Since the background of the selected items is already light blue, you should change the background to another color which is not light blue(in order to make selection distinct), and have the white foreground visible.

Please let me know if you need further help.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics

We already covered styling the dropdown items. I was asking about the dropdown overlay, I assume it's the input that is in the middle of the dropdown block code. Unfortunately, only the background is changing and I need to color the text as well. What is the css code that will allow me to change that text color? Also, I don't see anything changing the text color for the Checkbox.

I feel like we've made only 33% progress here, despite a lengthy back and forth conversation.

I figured out more of the checkbox:

igx-checkbox.igx-checkbox {
    --label-color: white; //text color
    --fill-color: #00c7fe; //inside the checkbox
    --empty-color: white; //checkbox border
    --tick-color: white; //the checkmark color
}

What is the class applied when it is disabled? I would like to persist the above and change the background to a light grey.

Perhaps you can help in finding similar CSS attributes for the dropdown/combo styling.

I happened upon it by chance. I used the (click) accessor and just console logged the $event from it. In the Path element of the emitted event, I found the igx-checkbox class (knew it existed) and it exposed those and more attributes in the CSS frame.

Hello Chris,

The :disabled attribute will allow you to set styling when the element is disabled. In the initial sample I have provided, you can observe similar styling for the checkbox, as I have it styled further when it is checked.

Please let me know if you have further questions.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics