Disable the collapse action from a Material-UI Stepper component - html

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.

Related

Moving components with bindings outside of their parent

In my project I'm working on styling some overlays. Because of the nested component structure I'm running into some problems here. The intended solution is to move the overlay somewhere closer to the app root while preserving data bindings, making the css styling less restricted.
I've managed to set up a prototype using Renderer2.appendChild(...). When the overlay is shown, the ngOnInit of the overlay appends the overlay to another DOM element.
With my current code I can either get the input or output binding to work (but not both), based on moving an empty comment <!----> found directly in front of the overlay.
From my understanding (Empty comments in Angular application) Angular needs this comment, but Renderer2.appendChild does not account for it (maybe it's not meant to be used for components, only for 'raw' html?).
Demo:
Here's the prototype presenting both issues I am stuck on: https://stackblitz.com/edit/angular-pg24om
Visibility of the overlays (shown below the labels) can be toggled with a button. The submit buttons inside the overlay logs the input to the console using an #Output event emitter. Pressing change text changes an #Input property.
Without moving the overlay, input and output binding works like expected.
Incorrect input binding: If I choose to move the empty <!----> comment together with the overlay, my input binding seems to stop working. Pressing Change text does not change the random number I pass to the component. Output binding still works fine in this scenario.
Incorrect destruction: If I don't move the empty comment, Angular fails to clean up the component when the visibility is hidden using the Toggle visiblity button. That said, while the component is alive both input and output binding remains functional.
If anyone knows how to get this to work, I'd greatly appreciate some help. I did see other methods of creating overlays using factory resolvers and detaching views, but being able to move the component while preserve bindings in the HTML template will save us a lot of time otherwise spent on changing a lot of components.
Edit: I forgot to mention that the error Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. occurs when attempting to remove the overlay without the moved comment. Angular is attempting to delete a #comment element from the overlay, but it fails to do so because the comment is still in the div where the overlay template resides. That's the reason I tried to move the comment together with the overlay.

How to use scrollbar plugin in Angular 6 app?

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

How to force invalidation in Flex 4 TextArea component?

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.

Using the standard Flash AS3 scrollbar class

Flash has a scrollbar class, documented here:
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/controls/ScrollBar.html
However, besides listing functions and variables, there's no real explanation of how to hook an instance of this class to a textfield.
Everything I've tried either ends up in errors or the scrollbar not showing. The documentation lacks a clear way of how you should bind the textfield and the scrollbar toghether, and CS4 isn't providing any help either.
Can someone explain, or link to an example of how scrollbars work with textfield?
if your question is how to attach scrollbar to textfiled in design view
then just add textfiled to the stage, make sure the textfiled is multiline
drag a scrollbar component over it, add some lines to the textfiled then run it.
If you just want a textfield with a scrollbar attached, you can use the premade "TextArea" component which already provides this functionality.

PyGTK: Packing widgets before tabs in a gtk.Notebook

Basically, what I want to do is put some buttons before the tabs in a gtk.Notebook. I tried making my own notebook type widget and it worked well, but it would have required lots more work to make it as flexible as I would like, also it wasn't as efficient.
Here is a mock-up of what I'm trying to achieve: http://imagebin.ca/view/84SC0d.html
Any ideas would be much appreciated, thanks.
Ben.
You might be interested to know that this functionality has been added in GTK 2.20, see "Changes in GtkNotebook" in the following announcement: http://mail.gnome.org/archives/gtk-devel-list/2010-March/msg00132.html
It's a hack, but you can put your widgets on a separate tab, and then prevent the tab from being clicked by registering the following switch-page event for the notebook:
def onTabsSwitchPage(self, notebook, page_notUsableInPython, pageNumber):
# Don't allow to switch to the dummy tab containing widgets
if pageNumber == <put correct tab number here>:
notebook.stop_emission("switch-page")
Note that this doesn't look good with all GTK themes, but it works...
I don't think there's any way to do it without making your own notebook widget. There are a couple of hacks. One was posted by AndiDog. Another is to hide the tabs altogether (notebook.set_show_tabs(False)) and make a toolbar with buttons above the widget, with your buttons on the left, plus one button for each tab in the notebook that switches to that page.
Instead of making your own notebook-type widget from scratch, you could inherit from gtk.Notebook, overriding some of the methods like expose_event, size_request, and size_allocate, in order to deal with two types of container children: pages and buttons. I don't know how to do this in PyGTK though, only in C.
You might also consider whether the buttons in the tab space are really what you want. What if the user resizes your notebook small enough that some of the tabs disappear? Where do the previous tab/next tab arrows go? What happens to the buttons?