I have a black navigation bar (bar) and a vertical white page (page).
The page is supposed to run from to to bottom and look like it just comes out from right under the bar. The bar has a drop shadow which should obviously be 'on' the page - like this:
The problem with this is that the page needs a z-index of -1 to look like this (both have a fixed or relative positioning) - and this means (at least in Chrome) that I can't select or click anything on the page.
When I assign a z-index of 2 (bar being 10) it obviously doesn't work anymore:
Yet at least I can click the page's elements.
How can I achive the correct look while still being able to click/select elements?
you could set box-shadow: inset (...) to page.
http://jsfiddle.net/seler/fP2Gx/
or: http://jsfiddle.net/seler/fP2Gx/12/
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;
}
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
we built an xpages app with the extlib application layout, and use the title bar for tabbed links.
Irritating for the users is the effect that the whole title bar is shown as link, i.e. the mouse changes to a link symbol (hand) for the whole title bar row.
Clickable are only the title bar tabs (as expected and correct), but users very often try to get "back home" by clicking on the title (left in the title bar).
Did we create that effect by sth.? or is this the normal bootstrap (3.2.0) design?
thx, Uwe
Add following CSS to your XPage(s):
.nav {
cursor: auto;
}
Then, only tabbed links will have a pointer cursor in title bar.
This overwrites the settings in xsp-mixin.css:
/*Bootstrap relies on the href attribute on a's to show the correct cursor: fix for XPage pagination that by default doesn't have that*/
.nav, .pagination, .carousel a {
cursor: pointer;
}
I checked for side effects but couldn't find any issue with other elements not showing pointer cursor where needed.
So, when I have some items with html content in it, and the fx = scroll, direction = left, the first item scrolls left, the container remains empty, then quickly the second item appears.
If I use images only, one image is one scrollable item, the items follow each other smoothly, so when the first item moves left, right after the second item also comes in from the right side.
Any idea what should I set, to make the plugin work properly?
My guess is its something with the width settings of an item, but I tried several settings, no one was good.
Thank you
Maybe your item is to big for the container? or someting with position absolute/relative? Coudl you show me some of your code (and images/div sizes?)
I found the solution (in stackoverflow). I have to use float:left on the div elements I want to scroll. Now they follow nicely each other.
#subdesign,
As nicely quoted by #RunningFusion may your item be too big for the container.
Try width: "100%" instead of specifying the width in px.
I need to create a DHTML menu with the specified features, but I can't figure out how to do it. Here's what I need:
All items are layed out horizontally. If they would be wider than the screen, two little arrows appear on the right side of the menu that allow to scroll it. Something like this:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Menu items should be clickable anywhere in the cell. They should stretch both vertically and horizontally to the contents. The text in the items should be centered both vertically and horizontally. The menu should work in IE7/Opera/FF/Safari.
The scrolling is the easy part - I just place it all in a container (say, a <div>), set the container to overflow: hidden and then play around in Javascript with clientWidth, scrollWidth and scrollLeft. That I've figured out and have already tried.
But how to make the menu items so stretchy, clickable anywhere and centered text?
Try the CSS below:
#menu {
display: table;
}
#menu a {
display:table-cell;
vertical-align:middle;
}
And then format your menu like:
<div id="menu">
normal text
<big>large text</big>
<span style="line-height:100px;">very tall text</span>
</div>
This will force vertical alignment and prevent the links from wrapping. Let us know how it works out.
OK, I talked with my superiors and they decided that it might be OK that you cannot right-click a menu item and select "Open in New Window". If this requirement is dropped, then I'm not bound to <a> elements for links. With JavaScript I can turn anything into a link. Thus, I choose you, pikachoo <table>!
Yap, it's a heresy, but it works. More specifically, it's the only construct that I can think of that can do all of the following at the same time:
Center text horizontally and vertically;
Stretch to contents horizontally and vertically;
Not wrap to next line when items are starting to overflow.
Anything else that can do the same will probably be more convulted anyway. And before anyone has the idea - no, I don't need search engine support. It's an internal web application. It'd be pretty bad if Google could index that...
clickable anywhere is easy: you can either bind the onclick event trigger (and hopefully some cursor styling) to the atomic cell element, or you can make the atomic cell elements <a> tags (or more likely wrap these in <li>) and link and style appropriately (padding, margin, foo).
e.g. case 1:
<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>
(obviously I don't really recommend inline styling or script handlers but you get the idea)
Applying padding will effectively centre the text, and having no width assigned they'll naturally stretch to fit their content.