Positioning UI elements

Positioning UI elements

  

What is the best way to position UI elements? When I drop a label. for example, it gets automatically moved to the left and top most coordinates available. How can I set it's coordinates manually? Can I not simple drag the element at any coordinate?

Hello Roopesh, welcome ton the forum.

This is how HTML/CSS works. And you are working with HTML/CSS, in fact. Even in mobile applications. 

To place elements in screen usually we use containers and element properties like margins, paddings, width and height. If you need more control, you can work with positioning (relative, absolute, fixed).

But the nature is to be placed from top to bottom, on available space.

As for your question, the answer is no. You can't simple put an element at some coordinates.

I recommend the Online Training if you did not yet.

Cheers

Hi Eduardo,

I see here some potential for the improvement.

If developer wants to position his elements by dragging and dropping (that's all Oussytems is) so it should be allowed and outsystems should adjust all the coordinates accordingly where element is dragged.

Thanks and Regards,

Suraj Borade

Eduardo Jauch wrote:

Hello Roopesh, welcome ton the forum.

This is how HTML/CSS works. And you are working with HTML/CSS, in fact. Even in mobile applications. 

To place elements in screen usually we use containers and element properties like margins, paddings, width and height. If you need more control, you can work with positioning (relative, absolute, fixed).

But the nature is to be placed from top to bottom, on available space.

As for your question, the answer is no. You can't simple put an element at some coordinates.

I recommend the Online Training if you did not yet.

Cheers


I have exp using xcode - Native iOS development IDE. I was thinking if there is a way for similar drag and drop experience with ui elements. Is there an easy way to do it as you mention above using properties is the only solution. Can you ps share link to a tutorial to get familiar with the properties that are needed to be played with here.

Suraj Borade wrote:

Hi Eduardo,

I see here some potential for the improvement.

If developer wants to position his elements by dragging and dropping (that's all Oussytems is) so it should be allowed and outsystems should adjust all the coordinates accordingly where element is dragged.

Thanks and Regards,

Suraj Borade


Exactly. This doesn't seem to be a low-code platform when one has to set hell lot of html tag properties and need html skills to place elements on the screen. It should be just as easy as dropping an element anywhere on screen and then drag edges to adjust height-width. Its such a pain point. It's really very easy to design UI on Apple Xcode's Interface Builder.

Hi Roopesh,

You're missing the point. You do not need to "set hell lot of html tag properties and need html skills" for placing elements on the screen. Most of the CSS and HTML are hidden behind Themes and out-of-the-box components.

That said, you must understand what the OutSystems Platform is: it's a tool for building Web Apps running in a browser, and Mobile Apps running in a browser-like environment. That means that HTML and CSS are at its core, unlike Apple's Interface Builder, that is proprietary and produces proprietary code, the result of which need only run on an Apple device.

You are complaining like someone who travelled by bicycle for years, is exposed to a car, and complains that everything is so different.

Kilian Hekhuis wrote:

Hi Roopesh,

You're missing the point. You do not need to "set hell lot of html tag properties and need html skills" for placing elements on the screen. Most of the CSS and HTML are hidden behind Themes and out-of-the-box components.

That said, you must understand what the OutSystems Platform is: it's a tool for building Web Apps running in a browser, and Mobile Apps running in a browser-like environment. That means that HTML and CSS are at its core, unlike Apple's Interface Builder, that is proprietary and produces proprietary code, the result of which need only run on an Apple device.

You are complaining like someone who travelled by bicycle for years, is exposed to a car, and complains that everything is so different.

You mention that most of the CSS and HTML is hidden behind for the already available components, true that. But my point is, if I have to position many UI elements on the screen when I am creating a custom interface that is not already available, or if I have to modify/customize available components, I cannot do it without knowing how html/css works and how tcolumns/divs/other properties should be used to achieve what's intended. I am not complaining dude, I am trying to find if a simple solution already exists that I do not know off, just like its available in other IDEs like Xcode.



Roopesh,

The point is that it seems you are missing how HTML works.

You don't set coordinates in HTML. You just throw elements and they find it's place. 

Even when you decide to controls where to put them in the screen, it's always based on relative distances between elements and, in the final, always is everything related to the top of the screen.

Yes. You have to understand those concepts. The ide makes setting things much easier and still there is space for improvement. 

But there is no "coordinates" system in the same way a native application sees it.

So, you can create an idea to ask IDE should allow to you to just place an element in a place and settings be defined so the element stay there.

Don't think it is a good idea though...

Cheers

Eduardo Jauch wrote:

Roopesh,

The point is that it seems you are missing how HTML works.

You don't set coordinates in HTML. You just throw elements and they find it's place. 

Even when you decide to controls where to put them in the screen, it's always based on relative distances between elements and, in the final, always is everything related to the top of the screen.

Yes. You have to understand those concepts. The ide makes setting things much easier and still there is space for improvement. 

But there is no "coordinates" system in the same way a native application sees it.

So, you can create an idea to ask IDE should allow to you to just place an element in a place and settings be defined so the element stay there.

Don't think it is a good idea though...

Cheers


Thanks Eduardo, understand your point. Is there any available tutorial video that will help me get familiar with the outsystems' techniques/approaches to build custom UI using concepts you mention above:

"To place elements in screen usually we use containers and element properties like margins, paddings, width and height. If you need more control, you can work with positioning (relative, absolute, fixed)."