CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
overlii
overlii

Reputation: 583

The scroll area of my bootstrap modal have an offset on top

I all,

I am using modals on my website and the scroll area containing them do not fit the page. See on the screenshot.

I am not applying any additional style to the modals and I can't figure out where does the problem come from.

I am sorry it is hard to post code because I am not sure which part might cause this and the code base is relatively large..Screenshot

EDIT: Sample modal

<div class="modal fade" id="addSpotModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" onclick='addSpot.cancel()'
                aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add a spot</h4>
        </div>


        <div class="modal-body">


            </div>


        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick='addSpot.cancel()'>Close</button>
            <button type="button" class="btn btn-primary" onclick='addSpot.sendAddSpotRequest()'>Save changes</button>
        </div>
    </div>
</div>

Any idea? Thanks. Olivier

enter image description here

Upvotes: 0

Views: 647

Answers (1)

Aibrean
Aibrean

Reputation: 6422

Firstly, the scroll is based on the modal itself, so as you can see, the rounded corners are not visible. The content inside the modal is pushing the size to be larger than the viewing area. You could try the size utilities like modal-lg on the dialog (<div class="modal-dialog modal-lg">) if you haven't done so. You can also change the dimensions through LESS/variables. The @modal-lg, @modal-md, and @modal-sm. To decrease the top margin, you would need to adjust the CSS for modal-dialog as 30px is the default.

Upvotes: 2

Related Questions