jbimagesのモーダルウインドウをレスポンシブ対応【CSS｜TinyMCE】

2020年12月24日公開・2022年1月15日更新

この記事は最終更新から2年以上経過しています。内容が古くなっているかもしれません。。

/*** ポップアップ画面 ***/
.mce-tinymce {
  box-shadow: none !important;
}

/*** jbimages モーダル ***/
@media (max-width: 515px) {
  .mce-window {
    width: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: none !important;
  }
  .mce-window-head {
    background: #fff !important;
  }
  .mce-window-body {
    background: #fff !important;
  }
  .mce-foot > .mce-container-body {
    padding: 10px !important;
    width: 80% !important;
  }
  .mce-panel {
    max-width: 100% !important;
  }
  .mce-container {
    max-width: 100% !important;
    height: auto !important;
    overflow: auto;
  }
  .mce-container-body {
    max-width: 100% !important;
    width: auto !important;
    height:auto !important;
    overflow: auto;
  }
  .mce-form {
    padding: 10px !important;
  }
  .mce-tabs {
    max-width: 100% !important;
  }
  .mce-formitem {
    margin: 10px 0 !important;
  }
  .mce-abs-layout-item {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
  }
  .mce-slider {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .mce-abs-layout-item.mce-label {
    display: block !important;
  }
  .mce-abs-layout-item.mce-textbox {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
  }
  .mce-abs-layout-item.mce-combobox {
    display: flex !important;
  }
  .mce-abs-layout-item.mce-combobox > .mce-textbox {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 29px !important;
    width: 80% !important;
  }
  .mce-container-body.mce-window-body.mce-abs-layout iframe {
    height: 500px !important;
  }

  /*** file manager 9 ***/
  .mce-tinymce-inline {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mce-tinymce-inline .mce-flow-layout {
    white-space: normal !important;
  }
  .mce-menu.mce-fixed {
    max-height: 90%; overflow: auto;
  }
  .mce-title {
    white-space: normal !important;
  }
  .mce-btn-group {
    overflow-y: hidden !important;
  }
}