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.
Related
Hopefully someone can help me here.
I'm working in Oracle Apex and have a side navigation menu which expands and shrinks. In both versions there is a visible web browser vertical scroll bar.
Is it possible to hide this but still maintain the scroll feature?
For example this sample application I found online (https://apex.oracle.com/pls/apex/f?p=42599:1::::::) contains the same functionality but without the scrollbar present. Looks a lot cleaner and doesn't get in the way of text / icons etc.
Here is a picture to show both systems.
Thank you
If you want this behaviour throuhought the application, define the below CSS code either on the page 0 or in a global CSS file.
/* Hide scrollbar for Chrome, Safari and Opera*/
.t-TreeNav::-webkit-scrollbar {
display: none;
}
/*Hide scrollbar for IE, Edge and Firefox */
.t-TreeNav {
-ms-overflow-style: none; /*IE and Edge*/
scrollbar-width: none; /*Firefox */
}
I don't understand how to specify the background color of a given page.
In app.json, I have the following:
"window":{
"backgroundColor": "#ff0000"
}
This color is applied in the very background, I can see it if i try to scroll the page with my finger.
But my views are still white.
I tried to simply add the background color of my view and it is mostly working, but the last view is not expanding to the bottom of the screen, so I still have a white area.
How can I either:
Request all the view to be transparent so that I can see the background color specified in app.json
Create a view which expand to the bottom of the page, without creating a scrollbar
There is a root element in Wechat Mini-program named page.
So the following code will make the work:
page
{
background-color: red;
}
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;
}
jQuery Mobile's search input comes with a search box, with a search glass icon that is to the left of the box. I want the search icon to the right side of the box. I'm looking at the css, but the only thing I see that controls it is...
.ui-icon-searchfield::after
but just not sure if that is the right css to use to move the icon around...or is there a class or data attribute I can use on the search element itself, to move the icon?
thanks!
You have identified the class correctly. All you need to do is override the background's position to be roughly textbox's width + 73px, e.g.:
.ui-icon-searchfield::after {
left: 173px !important;
}
​Check my example here: http://jsfiddle.net/ruslans/wyeUu/
not sure what you want to do about the "clear" icon, which appears on the right when you type.
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/