Only Title is Displayed.

Dear All,

Today I was designing a Split App app using xml views, and I faced a very peculiar problem

I just created a new project "for mobile" and I added a sample button to the initial view. I used a component container

Below the sample code:

Index Html:

var compContainer = new sap.ui.core.ComponentContainer(

'rootComponentContainer', {

name : "ss.testsplitN"

});

compContainer.placeAt("content");

</script>

1. Component.js

var oView = sap.ui.view({

id: "idViewRoot",

viewName: "ss.app.sublimesplitapp.testView",

type: sap.ui.core.mvc.ViewType.XML

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

controllerName="ss.app.sublimesplitapp.testView" xmlns:html="http://www.w3.org/1999/xhtml">

<Page title="Title">

<content>

<Button text="PRESS" />

When I run this app on my local server only the page with TITLE is shown. No button is visible.

SO I debugged and inspected the html result code and figured out that i need to add an additional css style sheet.

Added :

<!-- <style type="text/css">

.sapMPage>section {

height: 100%;

}

and it works just fine 😊

So I'm not able to understand this behavior. What mistake did I make? why isnt this the default property?

Thanks & Regards,

Dipankar