CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
Shahid Karimi
Shahid Karimi

Reputation: 4357

Boostrap modal width is not working for responsive theme

Please don't delete or close this question I put my question here after full three days search.

My responsive website has many modals to display blocks of data. The modal works fine with the default width on browser and small devices.

When I increase modal width for browsers with in % (percentage) it works fine in only browser. But do not display properly in mobile phones and other devices.

I tried % with min-width etc etc but no luck... also boostrap modal documentation has no information regarding size. only there is a small and large size is available which do not fit to my requirements.

Secondly I am oppening the modals using JS code as:

$(".modal-body").html("Loading...");
        $(".modal-body").load("fdeed.php");
        $("#modal_appointments").modal();
        $('#modal_appointments').modal('show');

modal with 50% width, works fine in normal browser size

Please, help me how I change the width so that it works fine in all devices. Any kind of help is highly appreciated. Thank you.

Upvotes: 1

Views: 5743

Answers (4)

Eckysaroyd Nyato
Eckysaroyd Nyato

Reputation: 1

First do not give width to modal and if you are working with @media query just remove the class modal-lg from <div class="modal-dialog modal-lg"> then it will work <div class="modal-dialog">.

Upvotes: 0

Darma Avalos Llerena
Darma Avalos Llerena

Reputation: 16

You can adjust the max-width programmatically.

var m = $('#modal_appointments');
m.css('width', '850px');
m.css('max-width', '100%');
m.css('margin', '50px auto 50px auto');
m.modal('show');

Upvotes: 0

Ronak Jain
Ronak Jain

Reputation: 1783

If you are on bootstrap 3.1.0 try using the bootstrap provided classes, to use the modal in smaller devices. I've personally never tested it in Extremely Small device. Try the following classes with the .modal-dialog class

.modal-sm - for small devices.

.modal-lg - for larger devices.

A useful link

http://codepen.io/SitePoint/pen/KkHyw

Hope it helps,

Upvotes: 2

Denis Thomas
Denis Thomas

Reputation: 1022

Setting the containers width to 60%, overwrite the margin and set left position should do what you need:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" style="left: 20%; width: 60%; margin-left: 0px;">
   <div class="modal-dialog">

You can find a complete example at: http://www.bootply.com/I0V4kQgcMD
Use mobile preview button on the right to see it in a new window which can be resized.

Upvotes: 1

Related Questions