Skip to Content

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

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"});    

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

JS Bin - Collaborative JavaScript Debugging

div.JPG (23.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Nov 02, 2015 at 03:49 PM

    courtesy: Former Member

    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 (see 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,'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>


    Add comment
    10|10000 characters needed characters exceeded