jbimagesのモーダルウインドウをレスポンシブ対応【CSS|TinyMCE】
この記事は最終更新から1年以上経過しています。内容が古くなっているかもしれません。。
/*** ポップアップ画面 ***/
.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;
}
}
この記事はお役に立てましたか?
いいえ
ヤフーに戻ります