KnockOut数据绑定可见导致HTML错误

Question

I use bootstrap with KnockOut. When I use classical way, it looks like below.

 <div class="col-md-6">
    <label for="element2" class="field-title">Kazandıran Şube</label>
    <select class="form-control select2" tabindex="15" data-bind="options: BranchList, optionsText: 'Label', optionsValue: 'StringValue', value: CustomerDataTransformObject.Customer.ConsolidationPlace, newChosen: {}"></select>
</div>

But when I use visible binding, it crashes like this.

 <div class="col-md-6" data-bind="visible: CustomerDataTransformObject.Customer.Type() == 'Tüzel/Kurumsal'">
    <label for="element2" class="field-title">Tüzel/Kurumsal Tip</label>
    <select class="form-control select2" tabindex="10" data-bind="options: CommercialTypeList, optionsText: 'Label', optionsValue: 'StringValue', value: CustomerDataTransformObject.Customer.Commercial.Type, newChosen: {}"></select>
</div>

How can I solve this problem?

Answer 1

The main problem is totally about data-bind: visible. Because when you use visible binding for div, it can't calculate the real size of it. So I had to fix the size of select component. The unique solution is adding $(element).css("width", "100%"); to newChosen binding definition.