Free flow screen layout

Hi,

I am struggling to find a way to place the graphical widgets (buttons, lables etc), on locations of my choice instead of it being stacked on top or side of each other. 

Is there anyway to place the components anywhere I like on the screen?

Thanks

Mo,

Hello Mo, 

As OutSystems works over HTML, the positioning of elements in the screen follow the HTML positioning rules (https://www.w3schools.com/css/css_positioning.asp).

If you don't have knowledge about this, I recommend you to study the HTML positioning system so you understand better how to place your elements on the screen.

Said that some position methods allow you to position the elements "freely" in the view, but I recommend you to be careful, as each positioning system has its own characteristics that may have undesired results depending on where your application will be "seen".

Cheers.

Mo Touman wrote:

Hi,

I am struggling to find a way to place the graphical widgets (buttons, lables etc), on locations of my choice instead of it being stacked on top or side of each other. 

Is there anyway to place the components anywhere I like on the screen?

Thanks

Mo,

Hi Mo,

In the case of mobile,

Have you tried floating content widget in the mobile pattern?

  

Regards,

Pankaj

Eduardo Jauch wrote:

Hello Mo, 

As OutSystems works over HTML, the positioning of elements in the screen follow the HTML positioning rules (https://www.w3schools.com/css/css_positioning.asp).

If you don't have knowledge about this, I recommend you to study the HTML positioning system so you understand better how to place your elements on the screen.

Said that some position methods allow you to position the elements "freely" in the view, but I recommend you to be careful, as each positioning system has its own characteristics that may have undesired results depending on where your application will be "seen".

Cheers.

Hi Eduardo,

I am very familiar with the HTML positioning but I cant see how I can do that when I am designing the screens. When I drop an element into my container it automatically locks it to the left hand side and other elements will be positioned alongside it unless I make the element bigger. 

May be there is a setup which allows me to design the screen in a WYSIWYG, but I cant see it. I would be happy to change the <div> elements if I have access to them, but I have a feeling that the IDE is forcing the elements along a pre-defined layout, rather than letting me to decide where they should be. 

Any suggestions welcomed.

thanks

Mo,

Pankaj pant wrote:

Mo Touman wrote:

Hi,

I am struggling to find a way to place the graphical widgets (buttons, lables etc), on locations of my choice instead of it being stacked on top or side of each other. 

Is there anyway to place the components anywhere I like on the screen?

Thanks

Mo,

Hi Mo,

In the case of mobile,

Have you tried floating content widget in the mobile pattern?

  

Regards,

Pankaj

Hi Pankaj,

Floating content and actions are good starts which I will be using. However they still don't provide what I need as I need to lay our screens with buttons, text inputs, images etc in a free flow format rather than using existing templates which currently don't give us what we need.  

Being able to set the position of an element graphically (or even manually if former is not available) would be a good help. 

Thanks

Mo,


Hello Mo,

If you are familair with the HTML positioning, you are also familiar with the idea of styling using CSS.

For every element, you can change the properties to the style editor through the toogle button. Than you can use the styles editor to apply styles very easily, r to apply personalized CSS.

The Canvas will reflect the styles being applied in the Styles Editor or the CSS.

For now, I think it is the only way of doing that.

Cheers.

Thanks Eduardo,

Using the style editor, I managed to do it for variables which worked well. 

When I try to do it for other elements, the changes are not reflected in the design. 

Thanks

Mo,

Hello Mo,

Could you provide an example of a CSS setting the SS do not show the result?

Cheers

Eduardo Jauch wrote:

Hello Mo,

Could you provide an example of a CSS setting the SS do not show the result?

Cheers

Please see below.

The textarea works i.e.             

                   .textarea_textvar2, .form-control.textarea_textvar2

But the other two don't work. (.text1 and .myimg).

Cheers



SyntaxEditor Code Snippet

/*---------- $6. ExcludeFromPickers ----------*/

/* ExcludeFromPickers: active, animated-label-input, avatar, badge, bottom-bar, bottom-bar-item, bottom-bar-item-icon, bottom-bar-items, bottom-bar-item-text, button-group-item, button-group-selected-item, counter, disabled, dividers, floating-actions,
floating-actions-items, form, header, header-content, header-right, is-endrange, is-inrange, is-selected, is-startrange, list-item-action-primary, ListRecords, login-logo, login-screen, noUi-background, noUi-base, noUi-connect, noUi-handle-lower,
noUi-handle-upper, noUi-origin, open, owl-nav, owl-theme, past, phone, pika-button, pika-label, search-input, search-round, search-stick-bottom, section-expandable, section-expandable-icon, section-expandable-title, splash-screen, tablet, tabs-header-tab,
tabs-underline, tag, wizard-item, wizard-item-wrapper, wizard-label */
.textarea_textvar2, .form-control.textarea_textvar2 {
    left: 30px;
    top: 100px;
}
.text1 {
    left: 50px;
    top: 250px;
}
.myimg {
    height: 64px;
    width:64px;
    left: 30;
    text-align: left;
    top: 200;
}


Hello Mo,

Did they work in runtime?

Because if you are trying to style form controls, it is possible that the template theme has already styles being applyed that use more specific selectors than the ones you are applying (with only a class).

Cheers.

Hi there,

No, it didn't work on run time either. I will experiment further to see what I get.

Mo,

Hi,

If it does not work in RunTime either than it is because there are other selectors more specific that are overwriting your selectors (that are simple classes).

If you inspect the page in the browser, you will be able to see which selectors are being used instead of yours, and will be able to change your selectors to those instead, solving your problem (unless you are inside a web block...)

Cheers.