Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code.
Here’s the code you need to add to your application’s custom CSS:
Note: class name is grid-container
.grid-container .oneToOne {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
Added to the library, thank you!
@ThinhDinh I tried this today. The units in the number entry boxes don’t align. Thoughts? @Himaladin maybe knows?
It seems the issue is because you don’t want a label on one of the entries, so the space is taken up by the input box. You can fill the label with a blank space to make them align again instead of adding CSS code.
Time to resurrect emptyspace???
Ha! Except, no, there is a unit on all entry boxes. I had to add a width:100 to the entry box and do an align-items: end to one of the parent divs. I’ll see if I can capture what did to make it work!
After switching to grid-template, I noticed that targeting .oneToOne > div:nth-child(2) and adding some top margin helped push it down. The rest was just setting the input field ([data-testid="wf-input"]) width to 100% so the unit stays aligned at the far right of the field. That was just based on my observation from inspecting the DOM.
