Ask Toolbar preventing Bootstrap Modal to show

Question

I am facing a bit problem with a project which uses bootstrap 2.3.2 framework. Users who has ask toolbar are unable to see bootstrap modal completely as in below given screenshot:

Steps to replicate the issue. Install ask toolbar for Google chrome {if not installed) or if installed and disabled, enable it. Go to Getbootstrap documentation website and click on Launch demo modal button to open the modal. The modal will display as shown in the screenshot.

Google Chrome is injecting an iframe with some css to all the pages (generally, html pages) to display the toolbar as chrome doesn't allow to show as inbuilt toolbar. We can disable the toolbar on window load event using following jquery function

    $(window).load(function () {
        $('.apn-toolbar').remove();
        $('#apn-body-style').remove();
    });

However on initiation of bootstrap modal some data attributes being added by the ask toolbar extension, to the modal wrapper div which is preventing to display the modal fully.

The data attributes are as below: <div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; top: -138px;" data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px"> instead of <div id="myModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">

how to get rid of style top negative value and data-apn-tb_demo_v7-toolbar_set="top" data-apn-tb_demo_v7-toolbar_set_top="undefined" data-apn-toolbar-adjusted="-138px" from the modal or

Edit:

completely disable ask toolbar while accessing the website without forcing the user to disable or uninstall ask toolbar manually? Because the toolbar is creating some other problems as well. I have fixed top bar and jquery UI tooltips. Also, using window.scroll() and scrollTop() function to fix another div next to top menu bar. if ask toolbar is activated, the scroll method is fixing the div beyond to the top bar. Also, tooltips are getting 31px of top margin of ask toolbar.

EDIT: I can fix the issue by giving .modal.fade.in { top: 10% !important;} hack. But it is not the proper way to do it.

To install ASK Toolbar for chrome, go to http://apnstatic.ask.com/static/toolbar/everest/download/index.html?source=sp and click on Download Toolbar button. After downloading, you may need to run the application manually. Finally restart chrome or see for a menu link under chrome wrench (menu at right top side) to activate toolbar.

## Note: this issue existed in bootstrap ver. 2.3.2. Not tested in ver. 3.x.x ##

Answer 1

Ravi,

You can get rid of inline styles added via APN toolbar with following scripts. You have to call this script on modal shown function.

$('#myModal').on('shown', function () {
  $(".modal").css("top", "");
})

Passing null ("") value to "TOP" CSS property, jQuery will remove that from the given selector.

I couldn't replicate this on JSFiddle as Result aria is iframe. Here you can download working version: https://dl.dropboxusercontent.com/u/30070004/apn-modal/index.html

I tried to remove those attributes as well, like:

$(".modal").removeAttr("data-apn-toolbar-adjusted data-apn-tb_demo_v7-toolbar_set data-apn-tb_demo_v7-toolbar_set_top");

But as soon as you remove these - apn toolbar again adds it with newly calculated styles. So better not to remove those attributes but only the "TOP" value.

Let me know your result!