Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap modal won't stretch to fit content

The modal, despite the same thing working fine on other pages, won't stretch to fit it's content and ends up too short. The only thing that seems to fix it is adding another div or p element with any content below it and I'd rather not have to do that.

HTML:

<!-- Donate modal -->
    <div class="modal fade" id="donate" tabindex="-3" role="dialog" aria-labelledby="donateToDev" 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="donateTitle">Donate</h5>
                </div>
                <div class="modal-body">
                    <p class="text-center">There's nothing to unlock by donating, but you will be considered awesome by the dev! Who doesn't like being awesome?</p>
                    <div class="text-center">
                        <div style="float:left;display:inline;">
                            PAYPAL
                        </div>
                        <div style="float:right;display:inline;">
                            <p class="bold text-center">Or you could donate with <a href="http://dogecoin.com">Dogecoin</a>:
                            <p class="code">doge donate address here</p>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

CSS:

.bold { font-weight: bold; }
.text-center { text-align: center; }

Result:

The dogecoin address line is below where the modal ends, and if you add content to the Paypal one, it'll do it there, too.

like image 488
LukeZaz Avatar asked Jun 01 '14 16:06

LukeZaz


2 Answers

Try this :

  <div class="modal-body" style="overflow-y:auto;">
like image 83
Costas Bakoulias Avatar answered Sep 22 '22 09:09

Costas Bakoulias


You are not clearing your floats. To quickly solve the issue you could add "clearfix" to the div with the "text-center" class.

Read about it here: http://getbootstrap.com/css/#helper-classes-clearfix

like image 24
david Avatar answered Sep 23 '22 09:09

david