CODEWITHSUNDEEP
javascripthtmlcssknockout.js
naiveai
naiveai

Reputation: 853

Make knockout "visible" use CSS "visibility" property

According to the "visible" binding documentation, Knockout uses display: none to hide elements if the the value of visible evaluates to false. How can I make it use visibility: hidden instead? visibility: hidden has the advantage (in this case) of still making the element take up space on the page.

Upvotes: 1

Views: 1102

Answers (1)

FredG
FredG

Reputation: 276

You should use plain css style or classes, check the official knockout.js css binding or knockout.js style binding documentations.

Style binding example :

<div data-bind="style: { visibility: isVisible()  ? 'visible' : 'hidden' }">
    Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        isVisible: ko.observable(true) // visible
    };
    viewModel.isVisible(false); // hidden
</script>

Upvotes: 5

Related Questions