cancel
Showing results for 
Search instead for 
Did you mean: 

Why UI5 hides the div when placing controls across multiple divs ?

former_member183518
Active Participant
0 Kudos

Usually in UI5 apps, we would have a parent div with id content under which the complete app/component would be placed. For a change, i was thinking to create my own layouts in plain html and place UI5 controls wherever needed. Just to test the feasibility, i have two <divs> under the <body> and tried to place a UI5 button under each of the div. But UI5 hides whatever is placed in the second div. Is the framework designed this way ? If yes, any specific reasons ?


var oBtn1 = new sap.m.Button({text:"Hello"});

var oBtn2 = new sap.m.Button({text:"World"});   

oBtn1.placeAt("content1");

oBtn2.placeAt("content2");


<body>

  <div id="content1" />

  <div id="content2" />

</body>

JS Bin - Collaborative JavaScript Debugging

Accepted Solutions (1)

Accepted Solutions (1)

former_member183518
Active Participant
0 Kudos

courtesy:

It took me indeed a while to understand what's going wrong:

Your JSBin uses two nested <div> elements, although it doesn't look like that:

  <body> <div id="content1" /> <div id="content2" /> </body>

HTML5 doesn't generally support the self-closing <div .. /> syntax that XML supports (seehttp://www.w3.org/TR/html5/syntax.html#start-tags for a more precise definition where they are supported and where not). Browsers just interpret the <div .../>as the opening tag and automatically add the missing closing tag.

When you comment out the two placeAt() calls in your JSBin and inspect the resulting raw DOM, then.you'll notice that the <div id="content2"> is nested into the <div id="content1">. In such a case, it is normal behaviour for UI5 to preserve the "content2" (means: move to sap-ui-preserve). The framework would restore it as soon as an HTML control or XMLView with ID "content2" would be placed somewhere.

If you modify your HTML so that it properly defines two <div>s in parallel, then the two buttons are rendered as expected:

  <body> <div id="content1" ></div> <div id="content2" ></div> </body>

See http://jsbin.com/yaqazasovi/1/edit?html,output

Answers (0)