I'm using the JSON Schema form in Retool, and I want to include firstname and lastname fields, that display as follows.
I want to displayed as follows:
Hey there! Unfortunately this is the current styling on the JSON schema form, and I am unaware of a way to change it. It definetly leaves a lot to be desired. I would love if the retool team could put some love into the JSON schema form!
Maybe your best way to approach this would be a custom component?
Hello @ZeroCodez,
Currently the style is auto-formatted to iterate down line by line for the JSON schema form.
I can definitely file a request to add additional stying options to this component.
A work around would be to use the normal form component and take advantage of its drag-and-drop functionality to nest text input components within it. You can click-and-drag the form as well as text input components to get the sizing set up to fit two text inputs next to each other as you illustrated in your second screen shot, as i have done below.
With the form component handling cases where you need special customization and the JSON schema form being better suited for very long/large numbers of input fields that do not need styling.
@jamesg31 Let me know what other requests to improve the JSON schema form you would like!
Ideally we want users to use the main form component for most needs and only use JSON schema when they have a object all the specified data on how they component should parse it. But we can definitely add some nice bells and whistles to help JSON schema look better and be easier to use!
Hello @Jack_T , I'm using a JSON schema form because I need to display 100 rows of fields simultaneously. Additionally, I want to add 100 more rows of fields whenever the "+" button is clicked. Due to this requirement, I can't use the standard form in Retool. Do you have an alternative solution for setting the CSS for this?
Hello @ZeroCodez hope you had a great weekend.
Thank you for helping me to understand the situation. I agree, using a default form would be tricky with working with that many input fields, without using some Javascript code/logic to loop through the input fields.
Definitely sounds like a job for JSON schema form, how many/what percentage of the 100 input rows do you want to be doubled up similar to the first name, last name example?
Our component uses the react-jsonschema-form library under the hood. If you were to build a custom component you could definitely apply custom CSS to the specified fields that you want, by setting display:flex for the fields you want to double up on a single row.
Even then you would need to either manually define the HTML component IDs which you want to apply the CSS display:flex to. I was not able to find any flag in the JSON schema which would tell the library to automatically apply CSS 
I would suggest a combination of the JSON schema form with custom CSS but you will have to find the class/ID of the components and then give them something like display:flex to get what you are looking for 
Hello @Jack_T
I've already applied custom CSS, but it's not resolving the issue.
@ZeroCodez that is odd that the custom CSS you have applied isn't working to flex the display.
I cam make a feature request for greater styling controls over JSON schema form.
Could you share the custom CSS and the component classes in a screen shot?