Twitter 부트 스트랩의 모달 크기 늘리기

Twitter 부트 스트랩의 모달 크기 늘리기

---

모달 양식의 크기를 변경하려고하거나 오히려 렌더링하는 내용에 응답하도록하십시오. 양식을 렌더링하는 데 사용하고 있으며 필요한 경우 스크롤을 처리하는 것을 선호합니다.

내가 렌더링하는 폼에는 아마도 다른 50px가 필요할 것입니다. 단지 버튼이 없습니다.

따라서 application.css.scss 파일 (Rails 3.2 사용)에서 .modal 스타일을 재정의하려고 시도했지만 최대 높이 및 오버플로 편차가 덮어 쓰여진 것 같습니다.

이견있는 사람?

---

나는 똑같은 문제를 겪고 있었다.

.modal-body {
    max-height: 800px;
}

스크롤 막대가 모달 대화 상자의 본문 섹션에만 표시되는 경우 본문의 최대 높이를 조정해야 함을 의미합니다.

---

부트 스트랩 3에서 :

.modal-dialog{
  width:whatever
}

---

#myModal뿐만 아니라 #myModal .modal-body 요소에 있는지 확인해야합니다 (몇몇 사람들이이 실수를 했음). 또한 모달 마진을 변경하여 높이 변경을 수용 할 수도 있습니다.

---

새로운 CSS3 'vh'(또는 너비의 경우 'vw') 측정 (높이를 뷰 포트의 일부로 설정)을 사용하여 다음을 사용하십시오.

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

이렇게하면 부트 스트랩과 같은 반응 형 프레임 워크를 사용하는 경우 해당 디자인을 모달에도 유지할 수 있습니다.

---

너비와 높이에 대한 두 가지 방법을 혼합하면 좋은 해킹이 있습니다.

CSS :

#myModal .modal-body {max-height: 800px;}

jQuery :

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

이것은 내가 사용하는 것입니다. 너비와 높이에 대한 여백과 스크롤 막대 문제를 수정하지만 내용에 맞게 모달의 크기를 조정하지는 않습니다.

내가 도움이 되었기를 바랍니다!

---

CSS 클래스 사용 (스타일을 재정의 할 수도 있습니다-제안되지 않음) :

(html)

<div class="modal-body custom-height-modal" >

(css)

.custom-height-modal {
  height: 400px;
}

---

나는 대답을 얻었습니다 ... 문제는 최대 높이 속성을 덮어 썼고 부트 스트랩 모달은 500px 높이 제한을 초과하여 크기를 조정할 수 있다는 것입니다

---

".modal-body"height : 100 % 설정하면 콘텐츠에 따라 높이가 자동으로 조정되고 화면에 따라 "최대 높이"가 설정됩니다 ...

---

size 매개 변수를 사용해 보셨습니까?

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

선택적인 크기

모달에는 수정 자 클래스를 통해 .modal-dialog에 배치 할 수있는 두 가지 선택적 크기가 있습니다.

1. 기본값 : 600px
2. sm : 작은 너비 300px
3. lg : 너비 900px

다른 것을 원하면 bootstarp.css를 업데이트하십시오.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

---

Boostrap> 4의 경우 이것은 나를 위해 일했습니다 :

.modal-content{
  width: 1200px;
}

고급 버전 :

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

다음은 코드 펜입니다.

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

---

부트 스트랩 대형 모델

<div class="modal-dialog modal-lg">

부트 스트랩 소형 모델

<div class="modal-dialog modal-sm">

---

Assuming that your modal has an id of modal1 the following CSS would increase the height of the modal and display any overflow.

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

---

Tried a few of the above as need to set specific sizes of width and height (to display an image in a modal)and as none above helped me I decided to override the styles and have added the following to the main < div > that has class="modal hide fade in" in it : i.e. added a width to the style tag for the background of the modal.

style="display: none; width:645px;"

and then added the following 'style' tags to the modal-body:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

works like a charm now, I'm displaying an image and now it fits perfect.

---

This worked for me:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Note that in my case, I have nested modals, each having controls which require different heights when I toggle control's display inside the nested modal, so I could not apply the max-height, instead height:100% works for me well.

---

Don't forget the optional bootstrap classes modal-lg and modal-sm if you want to keep within the responsive framework. And add a clearfix below your form, that may help dependent on your structure.

---

I was recently trying this and got this correct: Hope this will be helpful

 .modal .modal-body{
        height: 400px;
    }

This will adjust height of your model.

참고URL : https://stackoverflow.com/questions/9416985/increase-modal-size-for-twitter-bootstrap