Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal body content not hiding #12314

Closed
TimNguyenBSM opened this issue Jan 20, 2014 · 9 comments
Closed

Modal body content not hiding #12314

TimNguyenBSM opened this issue Jan 20, 2014 · 9 comments
Labels
confirmed docs
Milestone
v3.1.0

Comments

@TimNguyenBSM
Copy link

This Modal works perfectly:

<!-- Modal -->
<div class="modal fade" id="company-about" tabindex="-1" role="dialog" aria-labelledby="company-about-label" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="company-about-label">Company Name</h4>
         </div>
         <div class="modal-body">
            <p>Company bio here...</p>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This Modal below follows the above Modal immediately, but the Table is showing, rather than being hidden. On click, the Table content is blank. If I delete the Table data and replace with a text, it works as expected:

<!-- Modal -->
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="fee-details-label">Fees - What this loan will cost you to close</h4>
         </div>
         <div class="modal-body">
            <table class="table table-condensed">
               <tr>
                  <thead>
                     <th>Header1</th>
                     <th>Header2</th>
                     <th>Header3</th>
                  </thead>
               </tr>
               <tr>
                  <td>data1</td>
                  <td>data2</td>
                  <td>data3</td>
               </tr>
            </table>
          </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@juthilo
Copy link
Collaborator

juthilo commented Jan 20, 2014

You're using incorrect HTML for the <table>. All trs need to be children of a thead, tfoot or tbody and those three can only ever be direct children of the table.

@juthilo juthilo closed this as completed Jan 20, 2014
@TimNguyenBSM
Copy link
Author

Wow. Thanks. Corrected the HTML for TABLE but the data is still showing.

@juthilo
Copy link
Collaborator

juthilo commented Jan 20, 2014

Sorry, I think I misread what you were trying to achieve. Could you explain again/in more detail what the desired output is here?

@juthilo juthilo reopened this Jan 20, 2014
@cvrebert
Copy link
Collaborator

@TimNguyenBSM Could you also make your example into a JS Fiddle or JS Bin?

@TimNguyenBSM
Copy link
Author

@cvrebert Here you go: http://jsfiddle.net/mty3g/14/

@TimNguyenBSM
Copy link
Author

@juthilo The issue is that the TABLE contents are not hidden as I would expect them to be. Additionally, when opening the MODAL, I would expect the TABLE contents to show, but they do not. Please see: http://jsfiddle.net/mty3g/14/

@TimNguyenBSM
Copy link
Author

I figured how to get it work. It was the placement of the Modal. Once I moved it, it works fine now. Still curious why it didnt work with the original placement though.

@cvrebert
Copy link
Collaborator

Yeah, you can't just jam a div.modal in any arbitrary place. It should generally be relatively top-level in the markup.
Leaving this open as a docs bug, since we ought to mention that gotcha.

@TimNguyenBSM
Copy link
Author

Cool. In case this helps... I had two MODAL's in the same TR which created the issue, but once there was only one per TR it was all good.

@mdo mdo mentioned this issue Jan 20, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed docs
Projects
None yet
Milestone
v3.1.0
Development

No branches or pull requests
3 participants
@cvrebert @juthilo @TimNguyenBSM