Hi All,

I have the problem, i wan to make it display in horizontal line from the list when click "+" list Append

Thank you

Hi Jing,

Could you please make sure that all the parent containers in the horizontal line combined to occupy 12 grids? This should also consider the margins. If you can share the sample oml, or more information about the containers it can help solve faster.

Hi,

It is in the 12 grids.. now i make all input box to small.. still same.


please find the attached file.

Hi Jing,


Would you be able to share the sample oml? I can't make out much from the attached image.

Hi jing tung wong,

You can implement your requirement by following either one of the below options:

1) Use columns elements (Columns 4 will suit your requirement)

2) Use the Table widget, setting the Show Header property to 'No'

Check this: ListItems Sample App

PFA - includes the .oml file


Hope this helps you!


Regards,

Benjith Sam

jing tung wong wrote:

Hi All,

I have the problem, i wan to make it display in horizontal line from the list when click "+" list Append

Thank you


Hi,


Use the container properly and set the width.


Thanks

Halo,


Here the sample, can you try?


please find the attached file.

Hi jing tung wong,

Enclose all the Input widget within a container as mentioned below.

Hope this helps you!


Regards,

Benjith Sam

Halo,

I put together under one container already. Still same problem


thank you

jing tung wong wrote:

Halo,

I put together under one container already. Still same problem


thank you


I can't run your OMl but I'll try to give u something,


For controls, you can try width 2 for all if 4 cols not work


Hi Jing,



Try the attached oml, all the row containers are clubbed together.

halo..

 i have try, still the same problem. When execute run.. all still not horizontal.


thank you

JitendraYadav wrote:

jing tung wong wrote:

Halo,

I put together under one container already. Still same problem


thank you


I can't run your OMl but I'll try to give u something,


For controls, you can try width 2 for all if 4 cols not work



Tried already.. i change all to 1 col also same. if Input box, it will just break to next line. If expression it will horizontal. i dunno why

jing tung wong wrote:

JitendraYadav wrote:

jing tung wong wrote:

Halo,

I put together under one container already. Still same problem


thank you


I can't run your OMl but I'll try to give u something,


For controls, you can try width 2 for all if 4 cols not work



Tried already.. i change all to 1 col also same. if Input box, it will just break to next line. If expression it will horizontal. i dunno why

Ok then may be related to screen resolution/zoom related issue..Thanks


Hi Jing,

Try this one, if it helps.

Akshay Puri wrote:

Hi Jing,

Try this one, if it helps.

Hi,


Still same problem.


thank you


Hi jing tung wong,

I tried to replicate the whole screen same as the one you shared and it's working fine for me.

Check this: ListItems Sample App


PFA - includes the updated .oml solution file


If possible would you be able to share the application screen URL, after checking the screen Anonymous Role property to true.


Hope this helps you!

Regards,

Benjith Sam

jing tung wong wrote:

Halo,

https://jingtung-wong.outsystemscloud.com/ROE/ReportCreateOrUpdate?_ts=637249838065834535


Ok I see so the issue with the widget "ColumnSmallRight"

if u put your form then it will works




To solve that you have to override the Widget classes please look at CSS 

JitendraYadav wrote:

jing tung wong wrote:

Halo,

https://jingtung-wong.outsystemscloud.com/ROE/ReportCreateOrUpdate?_ts=637249838065834535


Ok I see so the issue with the widget "ColumnSmallRight"

if u put your form then it will works




To solve that you have to override the Widget classes please look at CSS 


Halo,

How to solve? can u amend in the oml i shared earlier?

I am new in outsystem

Solution

Hi Jing,

Try to add this css in your screen to see if they show up in same line.

.form span[class*="input"] {
    display: contents !important;
}


Here is the OML.

Solution

Akshay Puri wrote:

Hi Jing,

Try to add this css in your screen to see if they show up in same line.

.form span[class*="input"] {
    display: contents !important;
}


Here is the OML.

Hello,


Yes, it is working now. May I know why? is it a bug?

Can you please check for me the CSS, i put correctly?


Please find the attached file.


Thank you


Yes Jing looks correct now. Seems you've somehow overridden the mentioned css in your module. Basically it was display: block earlier which means consuming the entire div space for the row. 

jing tung wong wrote:

Akshay Puri wrote:

Hi Jing,

Try to add this css in your screen to see if they show up in same line.

.form span[class*="input"] {
    display: contents !important;
}


Here is the OML.

Hello,


Yes, it is working now. May I know why? is it a bug?

Can you please check for me the CSS, i put correctly?


Please find the attached file.


Thank you



Good to know that your issue now resolved.