Is there a way to show the helper text space on a version 5 React Material UI Input on an input even when it’s disabled? Right now when the component is disabled, the helper text space goes away as well.
My use case is that when I’m in the view stage of my page, all of the inputs are disabled and then when I hit edit, this action adds the blank line of helper text which causes all of the inputs to jump as each one adds bottom padding. I’d like to avoid this jumping behavior if possible.
Related
I want autocomplete(for me it's a search bar) component to stay in one line and expand when searching. Sadly, the component adds another line when there is a long chip.
For example:
the image shows that the component added a line
how can I stop the component from adding a new line while maintaining it's behavior while writing in it (when you write in the component it expands to show the entire search)
I tried changing its CSS a max lines prop but it didn't work.
granted I might missed something in the CSS
To summarize the behavior of the bar:
it is a multi select
There are two situations
the user isn't using it.
In that situation the bar should just be one line nothing more
the user clicked on it and editing in the bar
In that situation the bar should expand vertically to and show all the chips
right now It correspond with the situation that I described, but if a chip that is too big it expands to two lines and I want it to stay just one line if it isn't situation 2.
So, I am making a note taking app with react, and I want to make something that works like apple notes where you can click on the checkbox and it adds a new checkbox to the writing area.It keeps adding a new one when you press return/enter until you press backspace, and then you can resume typing regular text. I've been trying to do it yesterday pretty much the whole day, I found some rich editor text libraries but even though they have functionality to style the text e.g bold, italic etc. I cannot find a library that provides this specific functionality. I tried using a div with the contentEditable attribute instead of textarea but I wasn't sure what to do.
In case my explanation was bad here is an image.
On a given form, we replace one component with another.
The original component is a series of TextFields, and the new form is some informational text and a button. We hide the first one, and show the second one (the UI designer has both Containers within the form).
I tried using scrollRectToVisible with various values but it didn't seem to make any difference with the scrolling.
continueButtonContainer.setHidden(false);
f.forceRevalidate();
Button continueButton =
(Button)StateMachine.GetInstance().findByName("ButtonContinue", f);
f.scrollComponentToVisible(continueButtonContainer);
f.scrollComponentToVisible(continueButton);
I'm expecting the continue button to be near the top of the screen.
If the screen was scrolled before displaying the continue button, the button ends up right at the bottom of the screen (it was below the bottom of the screen before I put in the scrollComponentToVisible line(s).
After the user scrolls the screen, the button goes up to where it needs to be, and stays there.
If the screen is not scrolled, the button appears where it should be.
I know I can probably add some invisible containers underneath the button and force them onto the screen, but I would rather have a slightly more robust solution.
There are a few issues with this. First you are using forceRevalidate which should be used in very rare cases.
Second it seems that you are invoking this on a Form, this is a bit misleading. While it seems that:
f.add(myCmp);
Adds a component to the form it is really a synonym to:
f.getContentPane().add(myCmp);
That's important because you need to invoke the scrollComponentToVisible on the scrollable container which will actually do the work and ideally be the direct parent of said component. I'm assuming it's the content pane in your case but it depends on layout etc.
The last part is letting the layout do its job. If you are invoking this before the form is showing this might not work. Notice that doing it after a call to show is meaningless as the form might take time with transitions. You can use a show listener or override the laidOut callback method to perform things like this.
Using CodenameOne,
I have a Form that the user needs to fill in. All of the components, however, are actually Containers that represent custom functionality. As an example, I would have a TextField alongside a Button on a Container, and I would use that Container as a "Component". This allows me to create more advanced functionality by combining existing Components.
A good example of where this is necessary is that of a custom date entry field existing out of 3 TextFields or a combination of TextFields and ComboBoxes.
I have a "Field" that has functionality for that of a Contact Component.
This all serves as a single "Unit" in order to allow the user to choose a contact or fill in their own. Buttons open Dialog popups, etc.
My problems comes with when the user uses the Android keyboard. Should this Contact Object be the second "Field" and the user presses the 'Next' button on the Android keyboard, the App does not know what field to give focus.
Furthermore, If one of the fields are a ComboBox or a Button and the user presses next to reach that Component, the keyboard doesn't close, and instead removes the 'Next' button, replacing it with a return button or an emoticon selector.
Below is an example situation:
The user would press on the first field, the Keyboard shows up, and when the user presses next, the keyboard's Next button dissapears, as the immediate next field happens to be a Button or ComboBox.
Is there a way to change the focusing index, or omit certain fields form ever gaining focus in this way? I tried making the entire thing a Component but that doesnt allow me to combine other Components. Even if it is possible to make the parent Container a Component, how would I solve this particular issue?
The default behavior is to use the "next focus down" for this functionality so just use setNextFocusDown(nextTextField) on each one of the components. Notice that a ComboBox won't work as expected although you might want to change that to an AutoCompleteTextField which would.
I have to implement a wizard, where each step is a single input field.
Everything is wrapped inside an accordion with section headers.
The user, after filling the input and pressing Enter, should navigate the wizard field by field. Only the current field is editable, while the other ones are readonly (the user can anytime change a previously filled input, by clicking it, moving the current pointer to it).
I was wondering what could be the best approach to design this system, considering that the whole wizard structure changes in dependence of different user inputs.
I have found a tutorial using ui-router (http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router), with a fixed number of steps, but my requirements are to show the current input edit box inside the accordion, not in a fixed "ui-views" placeholder.
Take a look at https://github.com/JustMaier/angular-autoFields-bootstrap
It's a module that allows you to render forms from Metadata. So essentially, you can change the Metadata you provide dynamically to change the forms.