Add New Document modal is off-canvas

Viewing 15 replies - 1 through 15 (of 31 total)
  • Plugin Author bhaldie

    (@bhaldie)

    Looking at your screen shot, once again it is a css conflict. Looks like another plugin its overwriting the position of the modal.

    Check it out and let me know .

    Plugin Author bhaldie

    (@bhaldie)

    Oh and other thing that is weird about the screenshot is the size of the add documents modal. It is was too short looks like a lot of information is not being displayed either.

    Plugin Author bhaldie

    (@bhaldie)

    Still working on this issue does not work in version 3.0.3

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    I think all of the issues except this one (and some styling conflicts I’m solving) are resolved. I’m digging into this issue to try and find what plugin is conflicting with the modal position.

    Plugin Author bhaldie

    (@bhaldie)

    thanks for the update, if you do find the issue out could you pass it along to me so I can fix it on the official version.

    thanks ??

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    OK, the issue is a Boostrap CSS conflict. Your bootstrap.min.css files is loading the following classes which interfere with our theme’s CSS.

    .row {
    margin-left: -15px;
    margin-right: -15px;
}
.container {
    width: 1170px;
}
.container {
    width: 970px;
}
.container {
    width: 750px;
}

    Note, this is only breaking our styling on Pages/Posts where the bootstrap CSS file sis being loaded, which are the Memphis Docs pages.

    It would help greatly if you could inject into the <html> or <body> tag a mdocs CSS class I can key off of, to create an exception for these two classes. The over-ride in our theme’s CSS would be something like:

    .mdocs .row {
    margin-left: inherit;
    margin-right: inherit;
}
.mdocs .container {
    width: inherit;
}
    Thread Starter Cameron Barrett

    (@cameronbarrett)

    I just realized I posted a solution for a different issue. We still need the fix applied. ??

    I’m going to look at the Off-Canvas Modal position issue next.

    Plugin Author bhaldie

    (@bhaldie)

    So the solution above does not apply to mdocs? Or another issue with it?

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    Sorry if i wasn’t clear. We do need something unique to mdocs Pages/Posts that can be keyed off of.

    Something like this would be good (note the mdoc class added to body:

    <body class="page page-id-1700 page-child parent-pageid-1819 page-template-default district mdoc">

    This solves some other styling conflicts we noticed, but not the off-canvas modal position conflicts, I’m looking at that issue next.

    Plugin Author bhaldie

    (@bhaldie)

    I’m thinking I will injecting it with js, when the mdocs page initializes here is my thought:

    jQuery('body').addClass('mdocs');

    Simple, but does it meet your needs?

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    That should work, yes.

    Plugin Author bhaldie

    (@bhaldie)

    kk, I will add it to the next release 3.0.6

    Let me know if you have any other issue.

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    OK, the off-canvas positioning issue is also a CSS conflict with your Bootstrap CSS.

    You are loading this CSS via bootstrap.min.cc

    .modal {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0 none;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1050;
}

    We also have a .modal class that loads in our hosting provider’s must-use plugins CSS. Specifically, the left:0; and bottom:0; declarations are causing the modal to display in the wrong position.

    /wp-content/mu-plugins/wpengine-common/css/wpe-common.css

    .modal {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    left: 50%;
    margin-left: -280px;
    outline: medium none;
    position: fixed;
    top: 10%;
    width: 560px;
    z-index: 1050;
}

    Since this is in the wp-admin the above jQuery solution won’t work unless you also add it to the <body> tag of the mdocs admin screens, though a custom CSS over-ride won’t work here either because custom CSS is not applied to wp-admin screens.

    Plugin Author bhaldie

    (@bhaldie)

    this css won’t solve the problem?

    .mdocs-modal { left: 0px !important; bottom: 0 !important; }

    Thread Starter Cameron Barrett

    (@cameronbarrett)

    It would, but the wp-admin screens do not load:

    – theme CSS
    – Jetpack Custom CSS

    I would have to create a custom plugin just to load this CSS for admin screens.

Viewing 15 replies - 1 through 15 (of 31 total)
  • The topic ‘Add New Document modal is off-canvas’ is closed to new replies.