Firebug lite displays a div tag in the bottom right of the window when included on a page. The new tool Glimpse uses the same method to display a div for it's activation as well. My problem is that the glimpse div appears under the firebug div in z-order.
Is there a simple clever way to solve this?
You can change Firebug Lite options to not display that little icon:
https://getfirebug.com/firebug-lite.js#showIconWhenHidden=false
There are different ways to set options. Read more here:
http://getfirebug.com/firebuglite#Options
You could add a little JavaScript on your page that grabs either the Glimpse or FireBug Light div (if present) and changes the placement or zIndex.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)
My website has a content div which has to be of specific height. Let's say 800px.
I'm looking for a way I could enter the content in that div and make the div break it up and make it available via some "next" anchors.
Is such thing possible in a regular html page, no wordpress no drupal no plugins.
Style your div with overflow:hidden;
Then add a button to make it scroll 800px down
You should also use overflow:scroll-y; to make it simple.
Im using the Ie developer toolbar for IE6. By selecting an element I can see the CSS being applied to it. Is there a way of seeing other overridden styles the way you can with firebug?
Thanks
I don't know about the developer toolbar, but DebugBar will show you all CSS rules applied to the element you are looking for, even if it is overridden by another one.
I am trying to setup a modal YUI panel above a YUI Tabview. For CSS purposes [1] the tabs have a z-index that goes up to about 20 (depending on how many tabs there are).
The problem I am facing is that the mask that YUI draws for the modality of the panel is behind whatever nonzero mask the tabs have, and so the tabs peek through.
So far I have only found YUI API methods to change the mask of the dialog or panel.
Does anyone know how I can do this for the mask? Has anyone had an issue like this before?
I will shortly be posting the code I used.
TIA!
[1] (CSS designer did this, so I can't change the markup)
The solution is
- after show/render of top modal dialog, call hideMask() for underlying modal dialog
- before canceling top modal dialog, call showMask() for underlying modal dialog
Tip: If calling hide/show mask too early and/or too late, mask "flashing" may be experienced visually.
Looks like configuration value zIndex (for the Panel) combined with the stackMask should do it.
Nothing in the docs about whether stackMask should be called before or after rendering, before or after show etc. There is also an event (configzIndex) which fires when the zIndex property is changed.