I'm creating an app in Angular 6 and I want to change all the scrollbars to a custom one. I'm aiming for something similar to the Mac OS scrollbar;
Transparent
Over the content
Shows on mouse over
I want a method that will replace all and any scrollbar that will appear in the app to this custom one without altering the html.
I've been looking for an Angular/Typescript plugin to do this but each one I found is suggesting that I wrap my content in it's related selector. Which is not something I want to do. Or am I not understanding how to use this?
This one plugin I'm looking at: https://www.npmjs.com/package/ngx-perfect-scrollbar
Is there a way to use this plugin without wrapping my content with <perfect-scrollbar>?
Sorry, I'm very new to Angular :(
I was also looking into Custom CSS scrollbars but that only works for webkit browsers.
just use this :
const ps = new PerfectScrollbar('.scroll-container');
and set scroll-container class on all the elements that need scroll
Related
I am trying to use Autoresize on some of my View Controllers Auto Layout on others. Everything looks fine on all device sizes when I use the "View As:" tool in Storyboards. There are no overlaps and everything fits nicely. However, I have Auto Layout Warnings:
Why am I getting these warnings if nothing is clipping or overlapping? And how do I get rid of them?
Well I think you don't need to do any special steps, just try adding auto-layout margins using (control + actions told) storyboard and xCode will automatically handles them separately.
Other controllers that you have made ready using Auto-resizing would not be effected by this.
And new controller you made ready with auto-layout would work fine as well.
Hope this would work out for you.
For reference adding 2 screenshots (both are from same xCode project) for you to be clear of that what I am trying to say...
if you don't want to use auto layout just disable it.
select ViewController in storybored,go to file inspecter -> locate the Interface Builder Document section.uncheck use Autolayout.
I am building a react site using Material-UI, specifically, the Stepper component.
Is there any way to disable the collapse and expand of each StepContent for vertically oriented Stepper? I want to keep the styles of the component, but I essentually want all content of the stepper to be visible.
An example of a "collapsing" Stepper is here. I simple need to figure out how to disable the collapsing.
I've read the docs back to back and haven't found an obvious way to do this, yet it seems like it should be doable.
Adding TransitionProps={{in: true}} works better and does not produce error in the console because TransitionComponent should to be object, not a string.
It basically sets the collapse component to be always open.
Found the answer Adding TransitionComponent="None" to the StepContent element does exactly this.
Is there a way to create an ios datepicker/timepicker like styled custom select for ionic apps?
For example, I want to create a custom select as the following image
This is kind of late to the party, but maybe this will help: https://github.com/mmnaseri/proton.multi-list-picker
This is an Angular 1.x component with no dependencies on any other frameworks that provides an easy solution for creating iOS-style select views.
For instance, this is the sort of select that you can create with this component:
And this is another example:
If you set the attachment value to bottom it will be exactly like the iOS select component looks like, with a fixed bottom modal attachment.
I'm not sure but for now this not possible with Ionic. There options like this ionic-datepicker, but this isn't native, just a library.
There are various plugins available out there. You can find one here
Also you can use HTML Select/Option list to show up a native alike control that will display a list of single select-able items. Select/Option tag invokes OS specific native selector.
Have a look at it here. That demo might help you.
I have a TextArea in a mobile application that I want to force invalidation on a certain event. So far I can do this:
myTextArea.width = myTextArea.width + 1;
I know it works because the text area updates correctly.
I've tried to do it "correctly" using the following:
testing.invalidateProperties();
testing.invalidateDisplayList();
testing.invalidateSize();
testing.validateNow();
parentGroup.invalidateProperties();
parentGroup.invalidateDisplayList();
parentGroup.invalidateSize();
parentGroup.validateNow();
None of the previous code works.
The TextArea is using the StageTextAreaSkin.
UPDATE
This seems to work as well as setting the width but is also a hack and also doesn't sync with the rest of the components:
testing.skin.styleChanged("anything");
The only way I've found to force a validation is to call myTextArea.setStyle("anything_here") or myTextArea.skin.setStyle("anything_here"). Note, it may be the fault of the skin, it is a mobile spark skin from the SDK (not my own creation). Better answers are appreciated.
I have a Cocoa webview, with a web application in it. The web application has a fixed toolbar itself, and with the elastic scrolling, and the toolbar coming below the top, it looks bad. Is there a way to disable the elastic/rubber-band scrolling, or at least keep the toolbar from moving with the rest of the content? I can modify the web app as much as neede.
If you're interested in doing it from the WebView and Cocoa perspective, you can also implement the finish load delegate, grab the scroll view, and disable elasticity:
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame {
NSScrollView *mainScrollView = sender.mainFrame.frameView.documentView.enclosingScrollView;
[mainScrollView setVerticalScrollElasticity:NSScrollElasticityNone];
[mainScrollView setHorizontalScrollElasticity:NSScrollElasticityNone];
}
Maybe this article would help you.
In short: disable overflow on HTML and BODY, add a wrapper with overflow:auto around all the page contents
I know this comment likely won't be accepted, since there's already an answer.
However, there's an actual method you can call on your NSView (docs here):
[[[webView mainFrame] frameView] setAllowsScrolling:NO];