CODEWITHSUNDEEP
csstwitter-bootstrapknockout.jstwitter-bootstrap-3knockout-3.0
Dan Chew
Dan Chew

Reputation: 23

How to make Knockout a knockout visible tag use display:none !important

I have a site using both knockout and bootstrap, I need to use the knockout visible data binding to add and remove certain elements based on a given criteria, however , when knockout add's the style="display:none" to the div it gets overridden by bootstrap as the hidden-md and hidden-lg use display:block !important on smaller screens.

 <div class="col-xs-1 hidden-md hidden-lg" data-bind="visible: BooleanValue"></div>

Is there a simple way to make knockout use style="display:none !important" so that my values aren't shown?

Cheers.

Upvotes: 2

Views: 4782

Answers (3)

Philip Stratford
Philip Stratford

Reputation: 4733

Another solution would be to wrap the element in another element and bind the wrapper element's visibility using Knockout. E.g.:

<div data-bind="visible: BooleanValue">
    <div class="col-xs-1 hidden-md hidden-lg"></div>
</div>

Altneratively, to avoid breaking your page's layout you can use Knockout's containerless "if" syntax like this:

<!-- ko if: BooleanValue -->
    <div class="col-xs-1 hidden-md hidden-lg"></div>
<!-- /ko -->

These are both less elegant solutions than the answers already proposed but are probably quicker and easier to implement and in my opinion have the advantage of avoiding the potentially murky world of using !important to override Bootstrap's styling.

Upvotes: 1

user3297291
user3297291

Reputation: 23372

You could use the css binding and add a style rule to (the bottom) of your style guide:

ko.applyBindings({booleanValue: ko.observable(true)});
.block {
  display: block !important;
}

.hide-important {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<div class="block" data-bind="visible: booleanValue">
  visible binding
</div>

<div class="block" data-bind="css: {'hide-important': !booleanValue()}">
  css binding
</div>

<button data-bind="click: booleanValue.bind(null, !booleanValue())">toggle</button>

Alternatively, you could implement a custom visible binding:

ko.bindingHandlers['importantVisible'] = {
  'update': function(element, valueAccessor) {
    var show = ko.utils.unwrapObservable(valueAccessor());
    if (!show)
      element.style.setProperty("display", "none", "important")
    else
      element.style.display = "";
      
  }
};

ko.applyBindings({ booleanValue: ko.observable(true) });
.block {
  display: block !important;
}

.hide-important {
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="block" data-bind="importantVisible: booleanValue">
  importantVisible binding
</div>


<div class="block" data-bind="visible: booleanValue">
  visible binding
</div>

<div class="block" data-bind="css: {'hide-important': !booleanValue()}">
  css binding
</div>

<button data-bind="click: booleanValue.bind(null, !booleanValue())">toggle</button>

Upvotes: 4

Abhinav Galodha
Abhinav Galodha

Reputation: 9878

You can make use of css data Binding. The css binding adds or removes one or more named CSS classes to the associated DOM element. 

<div class="col-xs-1 hidden-md hidden-lg" data-bind="css: YourCss"></div>

Upvotes: 1

Related Questions