Skip to Content (Press Enter)
2023-06-17 23-16-53
Elaine Guimaraes
129Views
8Comments
Solved
CSS position flex
Question
Reactive
Application Type
Reactive

Hi guys,

I need one more help with my CSS.

I have a table thats need position flex because this is a horizontal table, but I have a problem, I need to align it on left side, fixed. Anything that I am trying is working how I need.

Attached I'm sending images whith result of check and unchecked. How to be flex aligned on left, please?

Link of this screen: 


https://personal-h6lmzlzo.outsystemscloud.com/Zlate/TaskBoard?ProjectId=40




display_flex._uncheck.png
display_flex_check.png
0
0
19 Jun 2023
Copy Link
2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hello @Elaine Guimaraes 

As i understood your requirements below CSS can help you.

#fixedContainer {    
            position: fixed;     
            width: 600px;     
            height: 200px;     
            left: 50%;     
            top: 0%;     
            margin-left: -300px;     /*half the width*/ 
}  

Indeed you can make changes as per your need.

here is the example

I hope it'll help you.

Thanks
Deep

See solution in context
1
0
20 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

Hi Deepsagar, thanks for your help.

I have a question, please, with the "position: fixed; " I will disabled my horizontal table that needs "position:flex", no?

I'm looking for a way that I can continuows using my horizontal table (Sections of tasks)

0
0
20 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

Replying to Deepsagar Dubey's comment on 20 Jun 2023 04:07:25

I tryed some ways with your suggestion, It works with  only "position: fixed;"


Thank you!!

0
0
20 Jun 2023
Copy Link
2023-10-21 19-42-11
Tousif Khan
Champion

Hello @Elaine Guimaraes 

The issue is due to CSS getting applied there via script.
I did some tests and remove the CSS applied below the root element it was inline CSS and applied it through the Script tag.

You can test the same - 

Js Snipet :

var Elem = document.getElementById('SectionList').firstChild;
Elem.remove();

I hope this helps
Thanks

0
0
19 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

I wil try this! Thank you Tousif!!

0
0
20 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

Tousif, 

I tryed below the root and not work, sorry, my knowlege of css is micro.

Where I need to put it, please? I need to create a JS (if do I, where I need to create and call, please)?

0
0
20 Jun 2023
Copy Link
2024-09-12 02-43-38
Deepsagar Dubey

Replying to Elaine Guimaraes' comment on 20 Jun 2023 01:30:51

Hi @Elaine Guimaraes
That is JavaScript code which you are using in CSS editor, that's why its's throwing error.

Thanks.

0
0
20 Jun 2023
Copy Link
2024-09-12 02-43-38
Deepsagar Dubey
Solution

Hello @Elaine Guimaraes 

As i understood your requirements below CSS can help you.

#fixedContainer {    
            position: fixed;     
            width: 600px;     
            height: 200px;     
            left: 50%;     
            top: 0%;     
            margin-left: -300px;     /*half the width*/ 
}  

Indeed you can make changes as per your need.

here is the example

I hope it'll help you.

Thanks
Deep

1
0
20 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

Hi Deepsagar, thanks for your help.

I have a question, please, with the "position: fixed; " I will disabled my horizontal table that needs "position:flex", no?

I'm looking for a way that I can continuows using my horizontal table (Sections of tasks)

0
0
20 Jun 2023
Copy Link
2023-06-17 23-16-53
Elaine Guimaraes

Replying to Deepsagar Dubey's comment on 20 Jun 2023 04:07:25

I tryed some ways with your suggestion, It works with  only "position: fixed;"


Thank you!!

0
0
20 Jun 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.