CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
maasha
maasha

Reputation: 1995

How to make a full screen modal using bootstrap-modal?

I am using bootstrap-sass v. 2.1 and bootstrap-modal-rails v. 2.1.1 in Rails but fail to create a full screen modal. For now I have a combi of a really tall modal and a wide modal based on the demo, but I would like to get 100% width and 100% height. Is that possible?

#jbrowse-modal.modal.container.expand.hide.fade{"data-replace" => "true", :tabindex => "-1"}
  .modal-header
    %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
    %h3
      = @scaffold.name
    .modal-body
      %div{:style => "height: 1000px; overflow: hidden;"}
        %iframe{:id => "jbrowse-iframe", :src => "/JBrowse/was_index.html?loc=ctgA", :style => "border: 1px solid black"}

Upvotes: 0

Views: 5076

Answers (3)

rusllonrails
rusllonrails

Reputation: 5856

Bootstrap 3:

.modal-dialog {
  width: 98%;
  height: 98%;
  padding: 0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
}

Upvotes: 0

tcgumus
tcgumus

Reputation: 328

i think you should play with .modal class not .modal-body. it has left: 50% ant top:20%. make default to your .modal-body and change .modal.

please use this code in modal

display: block;
width: 100% !important;
left: 0 !important;
margin: 0 !important;
height: 100% !important;

Upvotes: 1

Martin
Martin

Reputation: 2300

I tested this on an exising project. These simple rules should get you in the right direction:

#jbrowse-modal {
width: 100%;
left: 0;
margin-left: 0;
top: 0;
margin-top: 0!important;
height: 100%;
}

@tcgumus is on the right track.

Upvotes: 3

Related Questions