cancel
Showing results for 
Search instead for 
Did you mean: 

Adding a css class to knockout without breaking the default code

SOLVED

Adding a css class to knockout without breaking the default code

I'm trying to add a css class in the field.html that is used on checkout.

 

My code:

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope},
css: additionalClasses,
css: {hideBusiness: dontShowField(element.inputName)}">

 

Now it does add the 'hideBusiness' class but the default class '_required' gets removed from the field. I'm not sure why that is?

 

This is the output:

 

<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses, css: {hideBusiness: dontShowField(element.inputName)}" data-mspdevtools-ui="91cce697fb40dbd783700346b3670c29" name="shippingAddress.firstname">
~~ other code ~~
</div>

 

Without my code it outputs:

 

<div class="field _required" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses" data-mspdevtools-ui="31d1a4eee47d38a859d9852323de30f1" name="shippingAddress.firstname">
~~ other code ~~
</div>

 

I feel like it might have to do with the double css binding but i'm not sure how to combine them?

2 REPLIES

Re: Adding a css class to knockout without breaking the default code

That sadly didn't work. I ended up copying abstract.js from view/form and adding it in the _setClasses function to additionalClasses.

Re: Adding a css class to knockout without breaking the default code

@SannNL

You dont need to override core file you can add extra css class using below way,

<div class="field" css="additionalClasses" data-bind="visible: visible, attr: {'name': element.dataScope},css: {hideBusiness: dontShowField(element.inputName)}">
If Issue Solved, Click Kudos/Accept As solutions.