16

Bootstrap 3 を使用して、レスポンシブ CMS で TinyMCE4 を使用しています。TinyMCE4 ではダイアログ/モーダルがレスポンシブではないことに気付きました。固定幅をオーバーライドするためにいくつかの単純な CSS クラスを書き始めましたが、かなり困難な作業になっているようです。だから、きっと他の誰かが今までにこれをやったと思いました。これが私がこれまでに持っているものですが、これが機能するために実行する必要があるセレクターは他にもたくさんあります。

では、質問ですが、TinyMCE のダイアログ/モーダルをレスポンシブにするための完全でフェールセーフな方法を思いついた人はいますか?

/* TINYMCE CUSTOMISATION */

.mce-window {
    max-width: 90% !important;
}



.mce-panel {
    max-width:100% !important
}

.mce-tabs {
    max-width: 100% !important;
}

.mce-container-body {
    max-width:100% !important;
}

.mce-container {
    max-width:100% !important;
}
4

4 に答える 4

5 
@media all and (max-width: 820px) {
  .mce-window                         {width:auto !important; top:0px !important; left:0px !important; right:0px !important; bottom:0px !important; background:none !important;}
  .mce-window-head                    {background:#FFFFFF !important;}
  .mce-window-body                    {background:#FFFFFF !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    {-webkit-box-sizing:border-box !important; -moz-box-sizing:border-box !important; 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; -webkit-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;} /*this only use with responsive 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;}
}
于 2016-03-17T09:33:35.280 に答える