Before I explain my problem let me give you some background. The way our web application is being built I don’t have control at all on the distribution of the inputs of our forms, they are being built from the API, basically what my company was doing before I joined is to split the forms into columns if the form had more than 5 inputs, I’m currently in the process of changing it and have all the forms be in a single column and break the inputs into different widths in very specific scenarios (e.g. city, state, zip) and also group them by fieldsets with titles.

So far this is looking great but creates a problem, the content area where user can work on this forms is meant to be responsive, I will need to reduce the size of the form wrappers depending on the size of the screen so they don’t end up being very wide and intimidating for the user. Well in these screens you may also have inline edition tables (like Excel) below the forms basically, and this type of components are the opposite of forms where the more available space they have the better, we are talking big tables with a lot of columns.

This ends up creating a dilemma, if I reduce the size of the form but keep the tables at 100% of the screen is going to look broken or not finished.

I’m attaching an image to visually represent our problem and to have a better idea of our wireframe/app.

My questions to you guys would be…

• Should the form expand to the size of the table or viceversa?
• Should we split the form into two columns when they share the screen with a table
• What would you propose?