Hello,


I am trying to resize my form fields for my Reactive Web App. I followed the 12 grids rule while I resize each fields so that some 2 or 3 fields will be put in a line instead of 2 or 3 separate lines (e.g. have 2 fields be of column width 6 so they are positioned on the same line).

This is what I have in my Service Studio.

However upon publishing my app and opening it in the browser, it resulted in a very different outcome where the columns that got resized are displayed with the same width and no space between the fields whatsoever. Below is the app displayed on Chrome & Firefox.

 I tried to remove the Form class & the Card class that were included in creating a form in Reactive Web only to find that the classes were not the ones causing the problem.Please let me know if I miss something.



Yosua

Hi,

Did you use OutSystems column widgets?

Could you share the module? 

Regards,

Daniel

Yosua Witantra wrote:

Hello,


I am trying to resize my form fields for my Reactive Web App. I followed the 12 grids rule while I resize each fields so that some 2 or 3 fields will be put in a line instead of 2 or 3 separate lines (e.g. have 2 fields be of column width 6 so they are positioned on the same line).

This is what I have in my Service Studio.

However upon publishing my app and opening it in the browser, it resulted in a very different outcome where the columns that got resized are displayed with the same width and no space between the fields whatsoever. Below is the app displayed on Chrome & Firefox.

 I tried to remove the Form class & the Card class that were included in creating a form in Reactive Web only to find that the classes were not the ones causing the problem.Please let me know if I miss something.



Yosua

 Hi Yosua,

Are you using column structure rich widget  for form fields? if not  use the column structure and make the input fields width fill parent. In your case document type and date field you can use small right column so that outsystems itself manage on browser resize.or you can share the oml file.

please try and let me know if it works


Hope this helps

AD

 

Hello Daniel,


Attached is the OML file.


Yosua

Hello AD,


Yes I used the Column Structure from the RichWidget. I also did resize it with accordance to the column structure.



Yosua

Solution

Yosua Witantra wrote:

Hello AD,


Yes I used the Column Structure from the RichWidget. I also did resize it with accordance to the column structure.



Yosua

 

 Hi Yosua,

You are not using column structure you using container to wrap the fields Please the screenshot of your oml


You need to use this column structure please see below

You cal wrap your containers inside this column as per your requirement  as this will provide you with placeholders on drag and drop on your screen.Please see below screenshot

I m  getting some errors in opening the OML .Please try this and let me know.

 

Hope this helps

Thanks

AD


Solution

Hello AD,


I think I can see your point now. Are you suggesting that I wrap around all of the form fields accordingly to how I want to display them, that is if I want to have 3 form fields in the same line, I choose Columns Structure 3 and put one form in each to pad them?

Also I believe what you are missing are the data. Let me know if you do need one so I can upload it.



Yosua

Yosua Witantra wrote:

Hello AD,


I think I can see your point now. Are you suggesting that I wrap around all of the form fields accordingly to how I want to display them, that is if I want to have 3 form fields in the same line, I choose Columns Structure 3 and put one form in each to pad them?

Also I believe what you are missing are the data. Let me know if you do need one so I can upload it.



Yosua

 Hi Yosua,
Now you got exactly what needs to be done just try and let me know.

Thanks 

AD 

AD wrote:

Yosua Witantra wrote:

Hello AD,


I think I can see your point now. Are you suggesting that I wrap around all of the form fields accordingly to how I want to display them, that is if I want to have 3 form fields in the same line, I choose Columns Structure 3 and put one form in each to pad them?

Also I believe what you are missing are the data. Let me know if you do need one so I can upload it.



Yosua

 Hi Yosua,
Now you got exactly what needs to be done just try and let me know.

Thanks 

AD 

 Hi Yosua,

I had created OML in  my PE  similar to your, have a look let me know is this you are looking .

You can run in browser and resize it will resize all the form fields as per the screen size its adaptive richwidget pattern available in OS

Hope this helps

Thanks

AD

 

Hey AD,


I tried to put a few of the field in the columns as you suggested and I don't know why putting the around 4 or 6 fields in the column align the columns perfectly.

Also thank you for creating an example OML. I really appreciate the time you took to make that.


Best Regards,


Yosua