"Screen Interaction Exercise"

Hi,

   During "Screen Interaction Exercise" , chapter "Add the New Movie feature", page 15 , i've encountered a problem. After step:

"Right-click the Expression in the Title placeholder of the Screen and select  Enclose in If. "

input field (after being enclosed in if) of the "Title" widget is being misplaced. Either i am missing something or there is lack of additional style settings in tutorial .pdf that must be set to make it look "right" (aligned with the rest of inputs).

P.S Should i undo last step, input field return to "normal" (aligned with the rest, having the same width and height as the rest input fields) position. It looks as if "enclosing in if" overrrides default style settings of the input Title filed.

Does anyone had a simillar problem? This is not a showstopper, still i am curious how could this be fixed.

Hi Dariusz,

Can you share the screenshot of your widget tree showing input fieldin the free.

If screen widget do not create any HTML element so should not interfare in your styles.

Hi Dariusz.

It is a common behaviour in OutSystems platform when you encapsulate widgets in IF condition. This is just a CSS pattern. The widget takes the context of the IF (new parent), and loses the margin-left default style. To replace it, you can encapsulate the IF into a container or define the style manually in the widget (there is a margin-left class definition in the base theme for this).

Oh ok. My bad, I thought your input was misplaced even when you view it in browser. 

Yes, as Andre said it is default behavious when you see it in service studio preview but in browser doesn't affact your style & placement.

In outsystems as in any other platform, when you have CSS, there are hierarchies and that usually the one that wins is always the last one, unless you have some important ones somewhere.


I think it would be better to take a look at the CSS content and its hierarchy.


Remember, the last CSS that is loaded during rendering is the one that wins, and all the CSS attributes behind that are present in the latter are crushed. An excellent exercise is to see this through your eyes in the inspect (F12 key) of your browser.


Cheers

Solution

Hi Dariuzs,

you simply misread the instructions.  They are talking about the title placeholder (see yellow below), not the title widget.

This is the area top left of screen, each screen has a title placeholder, and incidentally, your movie entity also has a title attribute being displayed in a title widget, hence your confusion.

What they want to accomplish is that in case you are editing an existing movie, the title attribute of the movie is displayed in the title placeholder.  In case you are adding a new movie, they want the screen to display the text "New Movie" in the title placeholder.  

So you should aim your efforts a bit higher on your screen.

Hope this helps,

Dorine

Solution

Dorine Boudry wrote:

Hi Dariuzs,

you simply misread the instructions.  They are talking about the title placeholder (see yellow below), not the title widget.

This is the area top left of screen, each screen has a title placeholder, and incidentally, your movie entity also has a title attribute being displayed in a title widget, hence your confusion.

What they want to accomplish is that in case you are editing an existing movie, the title attribute of the movie is displayed in the title placeholder.  In case you are adding a new movie, they want the screen to display the text "New Movie" in the title placeholder.  

So you should aim your efforts a bit higher on your screen.

Hope this helps,

Dorine

Thank you for clearing that up, i've made incorrect assumption.Indeed i came to the same conclusion seeing screenshot in next chapter of this instruction ;)

Also,i would like to thank others participants for explaining why style changes after widget is being "enclosed in if" statement.I will look into that.