26
Views
4
Comments
What does the "Enclose in Container" option do for me?

On page 22 of the training PDF, in step 6) we are told to “Right-click on the Text Area and select Enclose in Container”.  What does this do?  What are the benefits of doing it?   What are the consequences of not doing it?  Why didn’t we do this to any of the other fields on this screen?  This is the only time we have done this in all the exercises to this point for the “Becoming a Reactive Web Developer” training, so I was wondering why we did it in this scenario. 


QuestionAboutBuildaDetailScreenExercise.docx

mvp_badge
MVP
Rank: #2

Hi Glen, can you share the PDF?

Rank: #8978

I have attached the training pdf below

BuildaDetailScreenExercise.pdf

mvp_badge
MVP
Rank: #5

Hi Glen,

Containers are the way to organize content in the screen.
In this part of the exercise, you are adding, manually, a new element to a form, A label and a text area.
Form elements are, by default, Inline elements, meaning that if there is space to them in a "line", they will be side by side. 

So, we we the container, that is a "Block" element, that uses all the space, keeping everything in its own line (its possible to fix its width though).

When you drag an attribute to the form, Service Studio does that for you. It creates the container and adds the label and the correct input.

The exercise is just showing you how to do it manually.

The "Enclose in Container" option is just an accelerator menu. Instead of dragging a container to the screen and moving the widget to inside it, you do this automatically, wrapping the widget (in this case, a text area), in a container.

Hope this helps.

Cheers!

Rank: #328

Glen Beckman wrote:

On page 22 of the training PDF, in step 6) we are told to “Right-click on the Text Area and select Enclose in Container”.  What does this do?  What are the benefits of doing it?   What are the consequences of not doing it?  Why didn’t we do this to any of the other fields on this screen?  This is the only time we have done this in all the exercises to this point for the “Becoming a Reactive Web Developer” training, so I was wondering why we did it in this scenario. 


 Hi Glen,

Thanks Eduardo for the explanation.

just adding to Eduardo comment we can say enclose in container is a shortcut to add container to any element and in HTML document object model (DOM) it renders as a html div element which is block level element.


Thanks.

AD