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 */
}
Related
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.
I'm configuring a picture upload button on a form. I have a green bootstrap button I am happy with, but Chrome still gives me a default, grey, pic upload button.
You can see the grey button underneath the green "Upload Project Picture" button.
I have searched my code, but can't find any way to hide it. My colleague (who is fairly experienced), has no idea either. Thanks if you can help.
I found this question, but am not sure if it's exactly the same issue:
How can I hide a button if JavaScript is disabled?
I think the best approach is to position the native element absolutely, and then move it far to the left of the viewable screen. You can then make your fancy custom submit button "be" the actual submit via javascript. Sounds hacky, but a similar solution is recommended by no less than Mozilla.
input[type=file] {
/* original submit tag pushed outside the viewport */
position: absolute;
left: -1000em;
}
Why are the menu items of my site in Internet Explorer 11 so high?
I've built a Joomla 3.4.x site with Bootstrap 3.4.x.
Here's the URL: https://www.chjc.nl
There seems to be something wrong with the menu in Internet Explorer (11). In Firefox Opera and Chrome all seems OK (I haven't got MS Edge), the height is what it should be, in IE the menu items are a lot higher.
Secondly: I see list-style circles in front of the menu items in IE.
Can anyone explain what is wrong?
Also: when I change some CSS in the Inspector in IE, something may change and when I then change the CSS file, IE doesn't do what it was doing when I changed the CSS in the Inspector... This may be a totally unrelated bug.
Thanx
Thom
Thomsterdam Web Design
If you change something in your Inspector in IE, it is not changing the file on your webserver. You should open the CSS file in your IDE a.k.a. web editor and save it and upload it to your website.
You should make your <ul> and <ol> have the style list-style:none;
If you make your <a> in the dropdown <li> inline-block instead of display:block your menu will look the same in all the browsers.
I'm having no end of fun (sic) with jQuery.tabs. The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling the UL and then toggling the "display" attribute for the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when the tabbed panel becomes larger than the browser's window, then the user ends up with too many scrollbars. I am trying to avoid this situation by linking the size of the tabbed panel to that of $(window). That is, I trap and process the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular, of the IFRAMEs (100% width, 100% height). The only exception are the panel DIVs, which are of fixed height (in px). And this is the only dimension css attribute that I manipulate during my resize action.
All of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect the width of the browser window (but only change its height), only the panel DIV changes in height; the IFRAME contained will not change. As a result of this behaviour, it is not possible to shorten the tabbed panel below the height of the IFRAME. I can lengthen the DIV, yes. But the IFRAME will not fill the panel in that case.
All becomes good the moment I make the slightest change to the width of the browser window. In that moment, the IFRAME expands to catch up with the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged the display with "display: block". No joy so far.
Any ideas?
Thanks.
Never mind. Just had an inspiration: jQuery.tabs doesn't mind if I make the panels outright IFRAMEs. That is, I can do away with the wrapping DIV and thus need not rely on IE6 to honour the automatic relative dimensioning (height=100%, width=100%) of the wrapped IFRAME. The IFRAME is now fixed px in height and is directly resized by my resizeHandler. Life is now good across 4 browsers. Yipee!