javascript - Bootstrap Modal shows but no text is visible - Stack Overflow

admin2025-04-18 0

So I'm having quite a hard time figuring out why my text does not show in my bootstrap modal. I've tested, and it appears that only text wrapped in header tags are shown. Unwrapped text and text wrapped in paragraph tags do not show. I am truly baffled. The modal body and background show perfectly, so it is not a javascript issue. My code is below. This modal uses some Angular, but again, anything wrapped in a header tag works...I'm wondering if I left something out that Bootstrap requires in order to display ordinary text. I'm using Bootstrap v2.3.2.

<div id="column-select-modal" class="modal hide fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="show=false"><i class="icon-remove"></i></button>
        <h3 id="myModalLabel1">Adjust Data Columns</h3>
    </div>
    <div class="modal-body" style="height:250px;">
        <div class="fixedOverflowTable250">
            <table class="table table-striped table-hover table-bordered table-text-color swap-goal-modal-table">
                <thead>
                    <tr>
                        <th class="checkbox-align2 nogo text-align-left" style="width:73%;">
                            <h4>Column Name</h4>
                        </th>
                    </tr>
                </thead>
                <tbody data-ng-repeat="(key, value) in list">
                    <tr class="parent">
                        <td class="checkbox-align2 text-align-left">
                            <h5>{{key}}</h5>  <p>THIS DOES NOT SHOW</p> THIS DOESN'T EITHER
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
       <!--  <div class="clear"></div>
        <div class="alert alert-error" ng-show="columnError">{{columnError}}</div> -->
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" data-ng-click="selectColumns(selectedColumns)">Apply</button>
        <button class="btn" data-dismiss="modal" ng-click="show=false">Cancel</button>
    </div>
</div>

I've also insured that the other classes I use aren't screwing around with my CSS. I've included a screenshot link to show as well. Thanks in advance for your help!

<div id="column-select-modal" class="modal hide fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="show=false"><i class="icon-remove"></i></button>
        <h3 id="myModalLabel1">Adjust Data Columns</h3>
    </div>
    <div class="modal-body" style="height:250px;">
        <div class="fixedOverflowTable250">
            <table class="table table-striped table-hover table-bordered table-text-color swap-goal-modal-table">
                <thead>
                    <tr>
                        <th class="checkbox-align2 nogo text-align-left" style="width:73%;">
                            <h4>Column Name</h4>
                        </th>
                    </tr>
                </thead>
                <tbody data-ng-repeat="(key, value) in list">
                    <tr class="parent">
                        <td class="checkbox-align2 text-align-left">
                            <h5>{{key}}</h5>  <p>THIS DOES NOT SHOW</p> THIS DOESN'T EITHER
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
       <!--  <div class="clear"></div>
        <div class="alert alert-error" ng-show="columnError">{{columnError}}</div> -->
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" data-ng-click="selectColumns(selectedColumns)">Apply</button>
        <button class="btn" data-dismiss="modal" ng-click="show=false">Cancel</button>
    </div>
</div>

I've also insured that the other classes I use aren't screwing around with my CSS. I've included a screenshot link to show as well. Thanks in advance for your help! http://screencloud/v/bD79

Share Improve this question asked Feb 17, 2016 at 17:24 bj7 2403 silver badges12 bronze badges

I think it could be something in your list, check your angular app, as your modal is shown. Try to print something outside the ng-repeat, or create a row with some that and then do the repeat. Do you get your 'list' values in the console ? – jesicadev18 Commented Feb 17, 2016 at 17:30
All the items from the list show as long as they are wrapped in header tags. – bj7 Commented Feb 17, 2016 at 17:31
I believe I just discovered what the issue actually is. It's not in my modal. It's in some styling far outside my modal. I believe there is a <div> that has the btn-group class added to it outside of my current html. This modal is being included via a directive. I'm going to experiment and get back to this. – bj7 Commented Feb 17, 2016 at 17:33

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Ok, I just discovered the issue. My unwrapped, ordinary text does not show because my modal is being included in a directive, and that directive happens to be inside a <div class="btn-group">. Apparently that's hiding the ordinary text. I didn't realize this because the <div> is outside of my current working code. So this may be a simple error in reality, but apparently unwrapped text does not show inside of an element with Bootstrap btn-group in its class.

there is small mistake you have just added hide class at first div which was not displaying div content find below code what you have added

<div id="column-select-modal" class="modal hide fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">

use below one

<div id="column-select-modal" class="modal fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">

remove hide class from this div it will work fine.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744970312a277447.html

javascriptBootstrap Modal shows but no text is visibleStack Overflow

最新回复(0)