Width of application header SAP-UI5

Question

Hi All,
I am creating a login application using  SAPUI5.
My questions are
1. If i am skipping height in AbsoluteLayout why is is not working ? how it will take full screen height irrespective of screen size
2. There is a gap between window and the AbsoluteLayout how to remove that
3. The application header i have attache is not taking complete width of the screen ? how to do that ?
Code for  is in view.txt file
Screen shot of the UI is also attached
THANKS  A LOT

Answer 1

Hi Arvind,
100% height in CSS is a difficult topic (you might google for it - basically the height of the parent element needs to be defined to make it work, which may mean you have to set the height of ALL parent elements to 100%).
First, you have to set the View height to 100%:
this.setHeight("100%");
(e.g. in createContent())
And second, you need to add this style:
body, html, #content {
   height: 100%;
- where "#content" needs to be the ID(s) of the HTML elements between body and the AbsoluteLayout.
The gap around everything is the default margin of 8px which all browsers add to the page. Set
body {
   margin: 0;
to get rid of it.
The third issue is caused by how AbsoluteLayout and ApplicationHeader interact. This seems like a bug and we will follow up internally on this.
You can work around the issue by setting the width of the parent of the ApplicationHeader to 100%. It does only have a generated ID, though, so setting the following will only work as long as the ApplicationHeader is the second element added to any AbsoluteLayout in the page - otherwise you need to look up and adjust the ID:
#__container1 {
   width: 100%;
See
http://jsbin.com/aku_ApplicationHeader_AbsoluteLayout/1/edit
for a working example (only Firefox/Chrome/Safari)
Thanks and regards
Andreas