Why not Horizontal for LIST

Back to Forums

jing tung wong

Solved

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

13 May 2020

Akshay Puri

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.

See solution in context

report1.2.oml

13 May 2020

2 replies

Last reply 13 May 2020

Show thread

Hide thread

jing tung wong

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

13 May 2020

JitendraYadav

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.

13 May 2020

Akshay Puri

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.

13 May 2020

jing tung wong

Hi,

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

please find the attached file.

horizontal1.png

13 May 2020

Akshay Puri

Hi Jing,

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

13 May 2020

Benjith Sam

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

13 May 2020

JitendraYadav

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

13 May 2020

jing tung wong

Halo,

Here the sample, can you try?

please find the attached file.

report.oml

13 May 2020

Benjith Sam

MVP

Hi jing tung wong,

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

Hope this helps you!

Regards,

Benjith Sam

13 May 2020

jing tung wong

Halo,

I put together under one container already. Still same problem

thank you

table1.png

13 May 2020

3 replies

Last reply 13 May 2020

Show thread

Hide thread

JitendraYadav

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

13 May 2020

jing tung wong

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

13 May 2020

JitendraYadav

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

13 May 2020

Akshay Puri

Hi Jing,

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

reportupdated.oml

13 May 2020

jing tung wong

halo..

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

thank you

13 May 2020

Akshay Puri

Hi Jing,

Try this one, if it helps.

report1.1.oml

13 May 2020

1 reply

13 May 2020

Show thread

Hide thread

jing tung wong

Akshay Puri wrote:

Hi Jing,

Try this one, if it helps.

Hi,

Still same problem.

thank you

13 May 2020

Benjith Sam

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

13 May 2020

jing tung wong

Halo,

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

13 May 2020

2 replies

Last reply 13 May 2020

Show thread

Hide thread

JitendraYadav

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

13 May 2020

jing tung wong

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

13 May 2020

Akshay Puri

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

13 May 2020

2 replies

Last reply 13 May 2020

Show thread

Hide thread

jing tung wong

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

13 May 2020

JitendraYadav

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.

13 May 2020

Akshay Puri

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.

13 May 2020

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

See the full guidelines