I am currently discovering a problem where a wp_enqueue_style call in wp_iframe is causing my page to break due to the CSS overwriting some of the parent CSS outside of the iframe.

add_action('wp_ajax_getImageEditor', 'exampleCall');

function exampleCall(){
    wp_iframe('frameInfo');
}

function frameInfo(){
    wp_register_style('fabriccss', plugins_url('/fabricJS.css', __FILE__));
    wp_enqueue_style('fabriccss');
    echo "HELLO";
}

Included are two pictures. The first one shows what it looks like if you run the above code as normal. .png

The second image shows what happens if you comment out wp_enqueue_style('fabriccss');.

Comparing the two, you can see that the title and button CSS have changed even though the only iframe is in the middle.

Any ideas on how to fix this?

I am currently discovering a problem where a wp_enqueue_style call in wp_iframe is causing my page to break due to the CSS overwriting some of the parent CSS outside of the iframe.

add_action('wp_ajax_getImageEditor', 'exampleCall');

function exampleCall(){
    wp_iframe('frameInfo');
}

function frameInfo(){
    wp_register_style('fabriccss', plugins_url('/fabricJS.css', __FILE__));
    wp_enqueue_style('fabriccss');
    echo "HELLO";
}

Included are two pictures. The first one shows what it looks like if you run the above code as normal. https://s27.postimg/mqiidwtqb/stack_Question1.png

The second image shows what happens if you comment out wp_enqueue_style('fabriccss');.

Comparing the two, you can see that the title and button CSS have changed even though the only iframe is in the middle.

Any ideas on how to fix this?

• plugin-development

1 Answer 1

wp_iframe doesn't actually create an iframe it just applies it in a special div. Therefore, my way around this is just scoping my CSS to be specific to what I want to display with my added CSS.