0

I have a Twitter Bootstrap application using Bootstrap modal windows. The page is built with knockout js. The page is a SPA with 10 rows. Each row has it's own hidden modal window which appears when the user clicks a button. However the modal box has a textbox which can't be edited for some reason. The same happens on all browsers.

Each modal contains a form element.

<!-- ko foreach: talks -->
<div data-bind="showModal: $data.ShowModal" class="modal fade">
    <form class="form-horizontal" method="POST" 
        action="#" 
        data-bind="submit: $root.createTalk, attr: { 'id': $data.ModalId }" enctype = "multipart/form-data">
        <div class="modal-header">
            <h3>Add Talk</h3>
        </div>
        <div class="modal-body">
<div class="control-group">
                <label class="control-label" >Title:</label>
                <div class="controls">
                    <input name="title" data-bind="value: $data.Title, attr: { 'id': $data.TitleIdStr() }" type="text" />

Each input box has a unique id and the form is unique. I really can't see why this keeps happening.

Any help appreciated.

madth3
  • 7,275
  • 12
  • 50
  • 74
Matt
  • 5,573
  • 4
  • 33
  • 37
  • Is your containerless binding nested within another element? – PW Kad Sep 02 '13 at 21:45
  • What does the ShowModal method look like? – E.Z. Hart Sep 03 '13 at 02:30
  • Would need a bit more info to properly debug this. Small hint, in loops you don't have to use $data to get properties, can just use the property itself. e.g. `value: Title` – Thewads Sep 03 '13 at 07:45
  • Perhaps this would help... http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background?rq=1 – bflemi3 Apr 25 '16 at 12:18

0 Answers0