I am in need of disabling the scrollbar which appears in the application. Using the default web browser there is a option called ScrollBarsEnabled which you can set true of false allowing the scrollbar to be hidden or not while scrolling.
Sadly i dont think Gecko has this feature seeing as its not listed!
I came across a similar post which had my issue but all that does is change the css which then causes my page to become not scroll-able.
Thread: how to hide scrollbar in gecko webbrowser control in c#
Does anyone to this date, have any idea how to hide/disable that scroll bar?
A different workaround could be to move the margin a little bit, as described here
#content browser {
margin-right: -14px !important;
overflow-y: scroll;
overflow-x: hidden;
}
Related
Basically, I want to do something similar to what is shown here, but not in a dialog.
In the link, it is a dialog panel that has the card body able to scroll, but I want to have this happen on any specific v-card on the page, not a dialog. When I apply overflow-y: auto; to the v-card, the v-card-title is scrolled up too. When I apply overflow-y: auto; to anything else in the v-card, nothing changes. I'm using vue and vuetify, but I'm open to adding a new dependency if it will make this work and look nice. Thanks in advance!
Have you tried giving the v-card height or max-height style?
I have a Vue application that has menu items across the top in a nav bar fashion. The number of menu items changes based on the type of user logged in. Sometimes it might be 3 items, some times it could be up to 6 items.
I am trying to figure out how to determine when to switch between the desktop version of this navbar where the items are layed out as a row of buttons and the mobile version where the menus are hidden under in a slide in type drawer.
I have overriden the updated() life cycle hook to select the appropriate view on startup. I am using ref on a div that contains the menu buttons. From that I can get scrollWidth (the amount of pixels needed to display all the buttons) and clientWidth (the amount of pixels the div has been given). I have overflow: hidden.
From that I can determine when I need to switch from the desktop to the mobile view. I am using a resizeObserver to catch resize. This is working great to switch from desktop to mobile.
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
I also don't know how wide the menu buttons will be for different languages.
Any suggestions?
Thanks
Greg
But the problem is that once I am in mobile, the desktop navbar isn't part of the dom so i don't know how many pixels are needed to render it so I don't know when to switch back from mobile to desktop as the user resizes the window bigger.
So just hide them with visibility:
<div class='wrapper' :class='[mode]'>
<div class='items' ref='items'>
<div class='item' v-for='item in items'>Item {{ item }}</div>
</div>
</div>
.wrapper {
overflow-x: hidden;
pointer-events: none;
visibility: hidden;
&.desktop {
visibility: visible;
pointer-events: all;
}
}
.items {
display: inline-flex;
}
.item {
margin: 0 10px;
white-space: nowrap;
}
JSFiddle
Edit to add more information:
This answer caused me to rethink my approach to the question. I was looking at switching between two different navbar contents. But that isn't compatible with what is being suggested as an answer. The key to the answer is that both the mobile and the desktop navbar elements are going to be present at the same time. The difference is that the desktop elements are going to be squeezed into a smaller and smaller space and then made invisible using the visibility property.
Note about the visibility property: It leaves the element in the DOM and on the screen. The screen still renders the page as if the element was visibile but has transparent pixels. This is important to understand. It is also why the pointer-events have to be handled (turned on and off), because the elements are still there and can still be interacted with. So when they are hidden, we have to disable the pointer-events. And when the element comes back into visibility, we have to enable the pointer-events.
The other thing that you might have to look out for is that the answer uses offsetWidth. For simple navbar contents, this is fine. But in my case I have layers of flexbox and in the end the div that contained the menu was being squished due to flexbox and even though the overflow contents were being hidden, the offsetWidth was being shrunk. I switched to scrollWidth to get the true width of the menu and then it worked greata again.
Using version 2.1.0 of durandal I found a problem I am not able to fix it seems.
I'm using a dialog but the content is too big for the screen, the buttons - which are at the bottom of the screen - kind of fall off, under the screen.
This mostly comes from the fact that I use visible bindings using knockout the show and hide elements on the dialog making durandal position it wrong and/or not showing a scrollbar for the dialog/screen when it overflows.
Does anyone know how to solve this by either getting a scrollbar or repositioning it on the screen?
I have tried the reposition method but to no success.
Moreover I tried both of these:
Responsive dialog
Durandal modal dialog
Both did not help out and I'm still stuck on this.
Anyone got any idea how to get the scrollbar on the dialog or on the screen so I can actually see my buttons by scrolling? Or is there a better way to get around this?
I'm not sure this is what you want
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
http://jsfiddle.net/farizazmi/5Lnqurar/
I am experiencing flickering when fading in elements using webkit transition opacity.
The issue only occurs in Safari but it is really glitchy.
I have tried -webkit-backface-visibility: hidden; and -webkit-transform: translate3d(0,0,0);
but none are working, does anyone have any ideas?
http://www.timbretday.com
solved it, adding keyframes in the CSS stopped the flicker
On Mobile Safari, when you click on an element it gets a grey box around it between mousedown and mouseup.
How do you turn this off?
I was looking for the answer as well, and found it in the jQTouch CSS source code. Just add this to your definitions: -webkit-tap-highlight-color: rgba(0,0,0,0); Note that the box shows up for anything with a "click" or "touchend" listener (I think), so for best results, toss it under body { }