Why not Horizontal for LIST
Question

Hi All,

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

Thank you

horizontal.png

Champion
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.

report1.2.oml

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


horizontal2.png

mvp_badge
MVP

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.

Champion

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.

horizontal1.png

Champion

Hi Jing,


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

mvp_badge
MVP

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

ListItemSampleApp.oml

mvp_badge
MVP

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.

report.oml

mvp_badge
MVP

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

table1.png

mvp_badge
MVP

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


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

mvp_badge
MVP

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


Champion

Hi Jing,



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

reportupdated.oml

halo..

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


thank you

Champion

Hi Jing,

Try this one, if it helps.

report1.1.oml

Akshay Puri wrote:

Hi Jing,

Try this one, if it helps.

Hi,


Still same problem.


thank you


mvp_badge
MVP

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

ListItemSampleAppUpdated.oml

mvp_badge
MVP

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

Champion
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.

report1.2.oml

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


horizontal2.png

mvp_badge
MVP

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.

Champion

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. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.